Data Table
A token-driven data table with custom cell renderers, click handling, and empty states.
Preview
Import
import { DataTable } from "@sigil-ui/components";Usage
<DataTable
columns={[
{ key: "name", header: "Name" },
{ key: "status", header: "Status" },
]}
data={[{ name: "Project Alpha", status: "Active" }]}
/>Each column accepts either key (Sigil convention) or accessorKey (TanStack convention) — they're treated as aliases.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | DataTableColumn<T>[] | — | Column definitions. |
data | T[] | — | Row data. |
emptyMessage | string | "No results." | Shown when data is empty. |
onRowClick | (row: T, index: number) => void | — | Click handler that adds cursor-pointer to rows. |
rowClassName | string | (row, index) => string | — | Per-row className override. |
getRowId | (row: T, index: number) => string | — | Stable React key for each row. |
DataTableColumn<T>
| Field | Type | Description |
|---|---|---|
key | string | Column id and default property accessor. |
accessorKey | string | Alias for key. |
header | ReactNode | Header label. |
cell | (row, index) => ReactNode | Optional custom cell renderer. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-text / --s-text-muted | Cell text colors |
--s-border / --s-border-muted | Row separators (inherited from Table) |
--s-surface | Hover row background (inherited from TableRow) |
--s-radius-md | Frame radius |