Table
A type-safe data table with custom cells, sortable headers, and expandable rows.
Basic table
createTable<Row>() returns a table bound to one row type, so every column callback is typed. Call it once at module scope, not during render.
getValue returns the content of a default cell. renderCell returns the whole <td>, so its classes are up to you.
| Name | Owner | Status | Updated |
|---|---|---|---|
| Visibility report | Jason | Ready | Today |
| Competitor brief | Maya | Draft | Yesterday |
| Citation review | Priya | Needs review | Monday |
Sortable columns
The consumer owns the sort. Set sortDirection on the sorted column so the header gets aria-sort.
| Status | |||
|---|---|---|---|
| Citation review | Priya | Monday | Needs review |
| Competitor brief | Maya | Yesterday | Draft |
| Visibility report | Jason | Today | Ready |
Expandable rows
Clicking a row, or pressing Enter or Space while it has focus, calls onToggleExpand. Keep the expanded keys in state and pass them to expandedRows. Use isRowExpandable to turn expansion off for some rows. Setting onRowClick replaces the expand toggle.
| Name | Owner | Status |
|---|---|---|
| Visibility report | Jason | Ready |
| Competitor brief | Maya | Draft |
| Citation review | Priya | Needs review |
Action cells
align applies to the header cell and to cells rendered from getValue. A cell from renderCell sets its own alignment. Button is a block-level flex container, so wrap it in a flex justify-end container to line it up with a right-aligned header.
| Name | Status | Actions |
|---|---|---|
| Visibility report | Ready | |
| Competitor brief | Draft | |
| Citation review | Needs review |
Table Properties
Rows to render.
Property or function that returns a stable row key.
Default: index
Accessible name for the table.
Id of the element that names the table.
Keys of the rows that are expanded.
Default: []
Called when a row is expanded or collapsed.
Returns false for rows that should not expand.
Called when a row is clicked. Replaces the expand toggle.
Shows loadingState, or skeleton rows when loadingState is not set.
Default: false
Content shown while loading.
Number of skeleton rows while loading, and of rows the empty state fills.
Default: 5
Content shown when data is empty. Defaults to No data found.
Centers emptyState in the space below the header instead of in the first row.
Default: false
comfortable fixes a 40px header row and 56px body rows.
Default: default
Typography of the header cells. Defaults to mini when density is comfortable.
Default: medium
Hides the header row.
Default: false
Uses a fixed table layout, so column widths do not follow content.
Default: false
Keeps the header pinned while the body scrolls.
Default: false
Keeps Table.Footer pinned to the bottom while the body scrolls.
Default: false
Removes the card border and background around the table.
Default: false
Renders the body rows yourself instead of from the columns.
Additional classes for the table element.
Additional classes for the wrapper.
Additional classes for the thead element.
Additional classes for every body row.
Table.Column Properties
Unique column identifier. Without getValue or renderCell, the cell shows row[id].
Header content.
Returns the cell content inside the default cell.
Renders the whole td for full control.
Renders the whole th for full control.
Cell content while isLoading. Defaults to a full-width skeleton.
Active sort direction. Sets aria-sort on the header cell so screen readers announce the sort. Set it only on the sorted column.
Text alignment of the header cell and of cells rendered from getValue.
Default: left
Additional classes for the header cell and the body cells.
Additional classes for the body cells.
Additional classes for the header cell.
Number of columns the header cell spans.
Table.ExpandableRow Properties
Content shown in one full-width row below an expanded row.
Returns one or more tr elements shown below an expanded row. Use instead of render.
Table.Footer Properties
Footer content, such as pagination.
Additional classes for the footer.