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

class

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.
TEXT

description

A short paragraph displayed below the title.
TEXT

description_md

A short paragraph displayed below the title - formatted using markdown.
TEXT

icon

Name of an icon to display on the left side of the title.
ICON

id

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).
TEXT

image_url

URL of an image to display on the left side of the title.
URL

title

Text header at the top of the data grid.
TEXT

Row-level parameters

title

REQUIRED. Name of the piece of information.
TEXT

active

Whether this item in the grid is considered "active". Active items are displayed more prominently.
BOOLEAN

color

If set to a color name, the value will be displayed in a pill of that color.
COLOR

description

Value to display below the name.
TEXT

footer

Muted text to display below the value.
TEXT

icon

An icon name (from tabler-icons.io) to display on the left side of the value.
ICON

image_url

URL of a small image (such as an avatar) to display on the left side of the value.
URL

link

A target URL to which the user should be taken when they click on the value.
URL

tooltip

A tooltip to display when the user passes their mouse over the value.
TEXT

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

Ophir Lojkine

Member since 2021

Pseudo
Pseudo lovasoa
Status
Active
Email Status
Validated
Personal page
ophir.dev

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;

Result

Website Ideas

Search engine
Google Owned by Alphabet Inc.
Encyclopedia
Wikipedia Owned by the Wikimedia Foundation

See also: other components

alert authentication big_number breadcrumb button card carousel chart code columns cookie csv datagrid debug divider dynamic foldable form hero html http_header json list map redirect rss shell status_code steps tab table text timeline title tracking