DataTable
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Sortable#
Loading…
Selectable#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| data * | readonly T[] | — | |
| columns * | readonly DataTableColumn<T>[] | — | |
| rowKey * | (row: T) => string | — | Returns a stable id for `row`. Required for selection + React keys. |
| sort | DataTableSort | null | undefined | — | Controlled sort state. |
| defaultSort | DataTableSort | null | undefined | — | |
| onSortChange | ((sort: DataTableSort | null) => void) | undefined | — | |
| selectable | boolean | undefined | — | Show the leading checkbox column. |
| selected | ReadonlySet<string> | undefined | — | Controlled selection. |
| defaultSelected | readonly string[] | undefined | — | |
| onSelectionChange | ((selection: ReadonlySet<string>) => void) | undefined | — | |
| emptyState | ReactNode | — | Rendered when `data` is empty. |
| stickyHeader | boolean | undefined | — | Sticky table header (requires the table to live in a scroll container). |
| caption | ReactNode | — | Caption for screen readers. |
| className | string | undefined | — | |
| ref | Ref<HTMLTableElement> | undefined | — |