List Manager example
Book Library
September 21, 2026
Live result on the frontend
The Book Library list turns a plain MySQL table into a browsable catalogue. Every row becomes a book-cover card whose colour comes from the genre, and a click opens the book’s details in a pop-up.
What it shows
The visitor can find and browse books quickly:
- Card layout — three columns on desktop, two on tablets and one on phones, each card built from the row’s fields.
- Search and filters — a search box over title, author and genre plus two drop-down filters (genre and status).
- Ratings and status — the numeric rating is drawn as stars and the status as a green or red badge, using only CSS.
- Detail pop-up — clicking a card opens a modal with the summary of the book.
How it’s built
The list uses the Card layout: the card HTML is written once with ##field## placeholders (title, author, genre, cover colour...) and List Manager repeats it for every row.
All the styling is in the list’s CSS screen. The cover colour is stored in a column of the table, so a designer can change a book’s look just by editing that value. Option-list columns (genre, status) give their label to the card, which is how the status badge picks its colour.
The database is the table lm_books 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, card grid and pagination.
The detail pop-up that opens when a card is clicked.
Fields/Columns: ten 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 and cards.
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.
