The datagrid component displays small pieces of information in a clear, readable way. Each item has a name (title) and is associated with a value (description).
Basic Usage
SELECT 'datagrid' AS component;
SELECT 'Language' AS title, 'SQL' AS description;
SELECT 'Creation date' AS title, '1974' AS description;
Top-Level Properties
Text header at the top of the data grid
A short paragraph displayed below the title
A short paragraph below the title, formatted using Markdown
Name of an icon to display on the left side of the title (from tabler-icons.io) URL of an image to display on the left side of the title
Item Properties
Name of the piece of information (the label)
Value to display below the name
Muted text to display below the value
URL of a small image (such as an avatar) to display on the left side of the value
URL to navigate to when the value is clicked
Icon name to display on the left side of the value
If set, the value will be displayed in a pill of that color
Whether this item is “active” (displayed more prominently with bold text)
Tooltip to display when the user hovers over the value
Examples
Simple Datagrid
SELECT 'datagrid' AS component;
SELECT 'Language' AS title, 'SQL' AS description;
SELECT 'Creation date' AS title, '1974' AS description;
SELECT 'Language family' AS title, 'Query language' AS description;
SELECT 'datagrid' AS component,
'Ophir Lojkine' AS title,
'https://avatars.githubusercontent.com/u/552629' AS image_url,
'Member since **2021**' AS description_md;
SELECT
'Pseudo' AS title,
'lovasoa' AS description,
'https://avatars.githubusercontent.com/u/552629' AS image_url;
SELECT
'Status' AS title,
'Active' AS description,
'green' AS color;
SELECT
'Email Status' AS title,
'Validated' AS description,
'check' AS icon,
true AS active,
'Email address has been validated.' AS tooltip;
SELECT
'Personal page' AS title,
'ophir.dev' AS description,
'https://ophir.dev/' AS link,
'About me' AS tooltip;
Datagrid with Icons and Links
SELECT 'datagrid' AS component,
'Website Ideas' AS title,
'bulb' AS icon;
SELECT
'Search engine' AS title,
'https://google.com' AS link,
'Google' AS description,
'red' AS color,
'brand-google' AS icon,
'Owned by Alphabet Inc.' AS footer;
SELECT
'Encyclopedia' AS title,
'https://wikipedia.org' AS link,
'Wikipedia' AS description,
'blue' AS color,
'world' AS icon,
'Owned by the Wikimedia Foundation' AS footer;
User Profile Datagrid
SELECT 'datagrid' AS component,
'User Profile' AS title,
'/avatar.jpg' AS image_url;
SELECT 'Username' AS title, 'john_doe' AS description;
SELECT 'Email' AS title, 'john@example.com' AS description, 'mail' AS icon;
SELECT 'Role' AS title, 'Administrator' AS description, 'red' AS color;
SELECT 'Last Login' AS title, '2024-03-02 10:30' AS description, 'clock' AS icon;
SELECT
'Profile Page' AS title,
'View Full Profile' AS description,
'/profile.sql' AS link,
'external-link' AS icon;
Notes
The datagrid component is perfect for displaying structured metadata, user profiles, or any key-value information.
Use the active property to highlight the most important values in the grid.
Combine color with icons to create visually distinct status indicators.