The datagrid component
Display small pieces of information in a clear and readable way. Each item has a name and is associated with a value.
Top-level parameters
| name | required | type | description |
|---|---|---|---|
| class | TEXT |
class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0. | |
| description | TEXT |
A short paragraph displayed below the title. | |
| description_md | TEXT |
A short paragraph displayed below the title - formatted using markdown. | |
| icon | Name of an icon to display on the left side of the title. | ||
| id | TEXT |
id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url). | |
| image_url | URL |
URL of an image to display on the left side of the title. | |
| title | TEXT |
Text header at the top of the data grid. |
Row-level parameters
| name | required | type | description |
|---|---|---|---|
| title | REQUIRED | TEXT |
Name of the piece of information. |
| active | BOOLEAN |
Whether this item in the grid is considered "active". Active items are displayed more prominently. | |
| color | If set to a color name, the value will be displayed in a pill of that color. | ||
| description | TEXT |
Value to display below the name. | |
| footer | TEXT |
Muted text to display below the value. | |
| icon | An icon name (from tabler-icons.io) to display on the left side of the value. | ||
| image_url | URL |
URL of a small image (such as an avatar) to display on the left side of the value. | |
| link | URL |
A target URL to which the user should be taken when they click on the value. | |
| tooltip | TEXT |
A tooltip to display when the user passes their mouse over the value. |
Example 1
Just some sections of information.
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;Result
Language
SQL
Creation date
1974
Language family
Query language
Example 2
A beautiful data grid with nice colors and icons.
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;Result
Ophir Lojkine
Member since 2021
Example 3
Using a picture in the data grid card header.
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;