A token-driven data table with custom cell renderers, click handling, and empty states.

Import

import { DataTable } from "@sigil-ui/components";

Preview

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

DataTable