Tables
RecordsTable
A sortable, optionally selectable data table with a mobile card view fallback, column header sort indicators, and a selected-count badge.
Preview:1280px
4 records
NameAda Lovelace
RoleEngineer
StatusActive
Joined2023-01-15
NameAlan Turing
RoleResearcher
StatusActive
Joined2023-03-20
NameGrace Hopper
RoleEngineer
StatusInactive
Joined2022-11-01
NameJohn von Neumann
RoleArchitect
StatusActive
Joined2024-06-30
| Name | Role | Status | Joined | |
|---|---|---|---|---|
| Ada Lovelace | Engineer | Active | 2023-01-15 | |
| Alan Turing | Researcher | Active | 2023-03-20 | |
| Grace Hopper | Engineer | Inactive | 2022-11-01 | |
| John von Neumann | Architect | Active | 2024-06-30 |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | TableColumn[] | - | Column definitions including key, label, and sortable flag. |
| data | Record<string, unknown>[] | - | Row data; each row must have an id field. |
| selectable | boolean | false | Enable row checkboxes and select-all header. |
| onSort | (key, direction) => void | - | Fired when a sortable column header is clicked. |
| onSelect | (ids: string[]) => void | - | Fired with selected row IDs when selection changes. |