Data display
Tables, the TanStack data table, lists, stats, and cards.
Card
Header, content, and footer parts on the card surface.
CardCardHeaderCardTitleCardDescriptionCardContentCardFooter
Table
The static table primitive: header, body, footer, and a caption.
TableTableHeaderTableBodyTableFooterTableHeadTableRowTableCellTableCaption
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | $250.00 |
| INV-002 | Pending | $150.00 |
| INV-003 | Unpaid | $350.00 |
| Total | $750.00 | |
DataTable
The TanStack-powered table: sortable headers, a text filter, column visibility, and pagination — from real sample rows.
DataTableDataTableColumnHeader
| Role | Status | |
|---|---|---|
| Ada Lovelace | Engineer | active |
| Alan Turing | Researcher | active |
| Grace Hopper | Admiral | invited |
Page 1 of 2
DataTable · loading, empty & error
The three states a table spends most of its life in. The loading rows are built from the same TableRow/TableCell as real rows, so they inherit the density and the table never re-flows when data lands.
DataTableSkeletonTableRows
Loading — rows match the real row height
| Role | Status | |
|---|---|---|
Empty
| Role | Status | |
|---|---|---|
| No people match this filter. | ||
Error — announced, not just coloured
| Role | Status | |
|---|---|---|
| Could not load people. Retry in a moment. | ||
List
Rich and dense list densities with leading media, descriptions, and trailing slots.
ListListItem
Rich
- Ada LovelaceEngineeractive
- Alan TuringResearcheractive
- Grace HopperAdmiralinvited
Dense
- Ada LovelaceEngineer
- Alan TuringResearcher
- Grace HopperAdmiral
- Katherine JohnsonMathematician
- Margaret HamiltonEngineer
Stat
KPI tiles with directional deltas (icon, not color alone) in a responsive group.
StatCardStatGroup
vs last month
MetricCell
A two-line metric for a table cell — the value over a small muted label. Both lines truncate (hover for the full label), so an outcome column can never grow the row.
MetricCell
| Campaign | Activity | Outcome |
|---|---|---|
| Q3 Outbound | 1616sent | 12replies |
| Founders wave | 240sent | 3replies |
| Dry run | 0sent | 0replies attributed to this campaign |
ContactCard
A person card with avatar, role, an action slot, and labelled detail fields.
ContactCardContactCardField
Pagination
Client-driven page controls wired to real state — prev / next / page-N move through a sample table, with an active page and a collapsed-range ellipsis.
PaginationPaginationContentPaginationItemPaginationLinkPaginationPreviousPaginationNextPaginationEllipsis
| Event | Actor | Action |
|---|---|---|
| EVT-001 | Ada Lovelace | created |
| EVT-002 | Alan Turing | updated |
| EVT-003 | Grace Hopper | archived |
| EVT-004 | Katherine Johnson | restored |
| EVT-005 | Margaret Hamilton | created |
Page 1 of 10