List Manager example
Team Directory
September 21, 2026
Live result on the frontend
The Team Directory list turns a table of employees into a friendly company directory. Each person becomes a profile card with a coloured initials avatar, and a click opens the bio and contact details in a pop-up.
What it shows
Colleagues can find each other quickly:
- Profile cards — four people per row on wide screens, two on tablets and one on phones.
- Search and filters — a search box over name and role, plus department and city drop-downs.
- CSS avatars — the avatar is a circle painted with the
colorcolumn and theinitialscolumn; no image files are needed. - Detail pop-up — clicking a card opens the full bio with a clickable email address.
How it’s built
The list uses the Card layout. The colour of the card header and of the department badge comes from a CSS class taken from the option-list label (d-##department##); the avatar colour is stored per person in the table.
Contact lines use small CSS-masked icons, so there are no image files or icon fonts to maintain. Department and city are Option list columns, which also feed the two filters.
The database is the table lm_people 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, profile cards and pagination.
The detail pop-up with the bio and contact details.
Fields/Columns: eleven columns with their types (text, option lists, number, textarea).
Display › Card: number of columns per device and the card HTML with its placeholders.
The CSS screen holds the toolbar, pagination and profile-card design.
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.
