List Manager example
Real Estate Listings
September 21, 2026
Live result on the frontend
The Real Estate Listings list shows 24 properties for sale or rent as photo-less cards: a coloured header with the price, a “For sale” or “For rent” ribbon, a featured badge and an icon row with bedrooms, bathrooms and area. A click opens the full description in a pop-up.
What it shows
An agency can present its portfolio with nothing more than a table:
- Card layout — three columns on desktop, two on tablets and one on phones; the header colour and watermark icon depend on the property type.
- Filters and search — drop-down filters for type, operation (sale or rent) and city, plus a search box over title, neighbourhood, city and description.
- Price and ribbon — a text column holds the ready-to-show price (€485,000 or €2,350/mo) and an option-list column drives the ribbon colour.
- Detail pop-up — a click opens the price, the location, four key facts and the description.
How it’s built
The list uses the Card layout: the card HTML is written once with ##field## placeholders and List Manager repeats it for every row. The price is stored both as a number (price) and as a text column (price_label) so thousands separators, the euro sign and the “/mo” of rentals come out exactly as written.
Yes/No columns render as icons, so the “Featured” flag is a small text column (highlight) that is either Featured or empty; the CSS hides the badge when it is empty. Icons come from Font Awesome, which List Manager already loads on the frontend.
The database is the table lm_listings with 24 sample rows (see the SQL download); the list configuration is a single XML file created with the Export Configuration button.
The whole list on the frontend: toolbar with search and filters, property cards and pagination.
The detail pop-up that opens when a card is clicked.
Fields/Columns: the columns with their types (text, option lists, numbers, textarea).
Display › Card: number of columns per device and the card HTML with its placeholders.
The CSS screen holds the whole design of the toolbar, pagination, gradient headers and detail pop-up.
Want this exact example on your own site?
- Create the table. Run the SQL file in phpMyAdmin (or the mysql client) on your Joomla database. It creates the sample table with its data (the table name has no Joomla prefix and is replaced if it already exists).
- Import the configuration. In your Joomla admin open Components › List Manager › Import and upload the configuration file — it is the same file the component's own Export Configuration button produces.
- Publish it. Create a menu item of type List Manager and select the imported list.
