data contract
DataTable
Interactive table with sort, filter, pagination, and row selection.
Variants
- default
- simple
- compact
Sizes
- md
- lg
Slots
- toolbar
- header
- rows
- pagination
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.