DataTable
Carbon-spec data table re-implemented on TanStack Table (headless, MIT) for state management. Supports: - Sortable columns - Column filtering (per-column or global) - Multi-row selection (with batch actions toolbar) - Sticky header - Virtualized rows via TanStack Virtual (for million-row workloads) - Three sizes (sm/md/lg) - Loading + empty states
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { DataTable } from "@avala/design"; <DataTable size="md">DataTable</DataTable>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
patterns-datatable--defaultOpen in Storybook →
When to use
- Tabular data: rows of heterogeneous fields, often with sort, filter, batch-action, or selection.
- Datasets up to ~1M rows — virtualisation is on by default for >500 rows.
- Anywhere you'd reach for an HTML
<table>*plus* sort, filter, or selection.
When not to use
- Two-column key-value list with no sort / filter → use `StructuredList`.
- Cards-grid layout where each row is a rich card → use `Tile` variants.
- Read-only display under ~10 rows where the chrome cost outweighs the benefit → use a simple
<ul>or `StructuredList`.