data contract
DataTable
Interactive table with sort, filter, pagination, and row selection.
Variants
- default
- All features
- simple
- Sort only — no selection / filter
- compact
- Dense — for power users (32pt rows)
Sizes
- md
- lg
Slots
- toolbar
- Filters / search / view options above the table
- header
- Column headers with sort affordance
- rows
- pagination
- Pagination + page size below
Example
<DataTable data={rows} columns={columns} sort={sort} onSortChange={setSort} pageSize={20} />Usage rule
Sort affordance is a chevron next to the header label, color label.tertiary when inactive.
The full DataTable contract has 6 more rules, plus the do-not patterns. Get the full recipe.