Data List
A low-density list layout with thumbnails, metadata, and actions — ideal for playlists, file browsers, or feed-style content. Composes with Toolbar.
Playlist Example
Midnight City
M83 · Hurry Up, We're Dreaming
Intro
The xx · xx
Reckoner
Radiohead · In Rainbows
Svefn-g-englar
Sigur Rós · Ágætis byrjun
Mycelium
Tipper · Jettison Mind Hatch
Teardrop
Massive Attack · Mezzanine
Nara
alt-J · This Is All Yours
Everything In Its Right Place
Radiohead · Kid A
Usage
Use DataList for lower-density content where each item needs a visual anchor (thumbnail), primary/secondary text, and optional actions.
Common patterns include playlists, file browsers, notification feeds, contact lists, and search results.
DataList accepts a toolbar slot just like DataTable for consistent search and actions.
For dense tabular data with sortable columns, use DataTable instead.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| DataList | div | — | Root container with border and toolbar slot |
| toolbar | ReactNode | — | Toolbar content rendered above the list (on DataList) |
| DataListItem | div | — | Single row with hover state. Accepts active prop |
| DataListThumbnail | div | — | Square thumbnail with src, alt, or fallback content |
| DataListContent | div | — | Flex-1 wrapper for title and description |
| DataListTitle | p | — | Primary text, truncated by default |
| DataListDescription | p | — | Secondary text, truncated, muted |
| DataListMeta | div | — | Right-aligned metadata (counts, timestamps, duration) |
| DataListActions | div | — | Container for action buttons (icon buttons, dropdowns) |