Docs Components
Tableexperimental
The frame around data: a strong rule under the header, hairlines between rows, whole rows you can click. Status columns always use Badges, never colored text.
States
row-hover— Clickable rows (.is-clickable) tint 4% ink on hover; the whole row is the target — no icon-only affordances.sorted— aria-sort on the th; lucide chevron marks the sorted column. Unsorted columns reveal a chevrons-up-down hint on hover/focus only — headers stay quiet.
API
| Prop | Type | Description |
|---|---|---|
Table required | component | Wraps a native table in the scrolling plate frame. Children are ordinary thead/tbody. |
SortableTh | component | {label, direction: 'ascending'|'descending'|null, onSort}. Sets aria-sort on the th. |
Design specifications
- frame
color-border-strong / border-width-hairline / radius-md - header-rule
color-border-rule - row-border
color-border-hairline - header-font
type-label - cell-font
type-body-sm - cell-padding
space-3 space-4
Guidelines
- shouldNumeric columns use the .tabular utility and right alignment.
- mustIf a row opens an entity, the entire row is clickable and keyboard-reachable — never only an action icon.
- mustColumn headers are type.label; never restyle per table.