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.

Get the DataTable contract in your project.