The list component displays a vertical list of items. Each item can be clickable, include icons or images, and have action buttons for viewing, editing, or deleting.
Basic Usage
SELECT 'list' AS component, 'My List' AS title;
SELECT 'First Item' AS title, 'This is a description' AS description;
SELECT 'Second Item' AS title;
Top-Level Properties
Text header at the top of the list
Display the list in a more compact format, allowing more items on screen
Wrap list items onto multiple lines if they are too long
Title text to display if the list is empty
Description to display if the list is empty
Description to display if the list is empty, in Markdown format
URL to which the user should be taken if they click on the empty list
Item Properties
Name of the list item, displayed prominently
A description of the list item, displayed as greyed-out text
A description in Markdown format, allowing bold and italic text
URL to which the user should be taken when they click on the item
Name of an icon to display on the left side of the item (from tabler-icons.io) URL of a small image to display on the left side of the item
Color to be displayed as a dot near the list item contents
Whether this item is considered “active” (displayed more prominently)
URL for the “view” icon. Icon is hidden when omitted
URL for the “edit” icon. Icon is hidden when omitted
URL for the delete button. Submitted as a POST request
Examples
Basic Compact List
SELECT 'list' AS component,
true AS compact,
'SQLPage lists are...' AS title;
SELECT 'Beautiful' AS title;
SELECT 'Useful' AS title;
SELECT 'Versatile' AS title;
List with Rich Content
SELECT 'list' AS component, true AS wrap;
SELECT
'SQL Websites' AS title,
'/favicon.ico' AS image_url,
'Write SQL, get a website. SQLPage is a **SQL**-based **site** generator.' AS description_md,
'/' AS link;
SELECT
'SQL Forms' AS title,
'https://example.com/form.jpg' AS image_url,
'Easily collect data **from users to your database**.' AS description_md,
'?component=form' AS link;
List with Actions
SELECT 'list' AS component,
'Top SQLPage features' AS title,
true AS compact;
SELECT
'Authentication' AS title,
'?component=authentication' AS link,
'Authenticate users with a login form' AS description,
'red' AS color,
'lock' AS icon,
true AS active,
'?component=authentication#view' AS view_link;
SELECT
'Editing data' AS title,
'?component=form' AS link,
'UPDATE, INSERT and DELETE data in your tables' AS description,
'blue' AS color,
'database' AS icon,
'?component=form#edit' AS edit_link,
'?component=form#delete' AS delete_link;
Empty List
SELECT 'list' AS component,
'No items yet' AS empty_title,
'This list is empty. Click here to create a new item!' AS empty_description,
'create_item.sql' AS empty_link;
Notes
Nested links are not supported. If you use the list’s link property, your markdown description_md should not contain any links.
The list component automatically handles empty states, showing the empty message when no items are returned.