components / global
ui data table
UiDataTable is the shared core DS table primitive exported from @arieare/ds. It preserves the legacy wrapper contract for hand-authored table markup, adds typed columns-and-rows rendering for simpler screens, and includes helper subcomponents for sortable headers, styled cells, empty states, and stacked action groups. The DS preview uses the FS theme as the styling and capability reference because the current finance tables drove the first shared contract.
| field | value |
| group | global |
| import | @arieare/ds |
| source | packages/ds/src/components/ui/table.tsx
packages/ds/src/ui.css |
component tokens
| token | source | description |
--ui-table-bg / --ui-table-head-bg / --ui-table-row-line / --ui-table-row-hover-bg / --ui-table-empty-bg | @arieare/ds/tokens.css | Defines the shared table surface, header fill, row divider, hover, and empty-state background treatment. |
--ui-table-head-ink / --ui-table-cell-ink / --ui-table-cell-muted-ink / --ui-good-ink / --ui-danger-ink / --ui-table-sort-ink | @arieare/ds/tokens.css | Controls header, body, muted, sortable-indicator, and positive or negative numeric text colors inside the table. |
--ui-table-font / --ui-table-head-font / --ui-table-caption-font / --ui-table-head-letter-spacing | @arieare/ds/tokens.css | Component-level typography tokens for generated rows, header cells, captions, and uppercase tracking. |
--ui-focus-ring / --ui-control-border / --ui-surface-radius | @arieare/ds/tokens.css | Shapes focus styling, outer border treatment, and wrapper rounding for sortable headers and scroll shells. |
props
| prop | type | default | description |
size | "narrow" | "wide" | "wide" | Selects the shared table density preset and minimum width. |
columns | UiDataTableColumn<Row>[] | — | Optional data-driven column definitions with header, cell renderer, alignment, and controlled sort props. |
rows | Row[] | — | Optional row data rendered when using the data-driven mode. |
getRowKey | (row, index) => React.Key | — | Required in data-driven mode to produce stable row keys. |
columns[].sortable / sortDirection / onSort | boolean / "ascending" | "descending" | false / () => void | — | Controlled sorting contract for generated header cells. The component only renders the affordance; the consumer still sorts the data. |
emptyState / caption | ReactNode | — | Optional empty-row content and caption for generated table markup. |
rowClassName | string | ((row, index) => string | undefined) | — | Optional styling hook for generated body rows. |
tableClassName | string | — | Optional class applied to the generated inner table element. |
children | ReactNode | — | Legacy/manual mode: provide a complete table tree directly when you need full markup control. |
...div attributes | HTMLAttributes<HTMLDivElement> | — | Forwards standard div attributes and className to the wrapper. |