@wizeworks/silicaui-table

Silica UI's <DataTable> — TanStack Table wrapped in the Silica table CSS. Sorting, row selection, and pagination as simple boolean/number props over TanStack's typed column-def API.

Install

pnpm add @wizeworks/silicaui-table @wizeworks/silicaui-react
pnpm add -D @wizeworks/silicaui tailwindcss

Usage

import { DataTable, createColumnHelper } from "@wizeworks/silicaui-table";

interface Row {
  name: string;
  status: "active" | "invited";
}

const columns = [
  createColumnHelper<Row>().accessor("name", { header: "Name" }),
  createColumnHelper<Row>().accessor("status", { header: "Status" }),
];

<DataTable data={rows} columns={columns} sortable selectable pagination={10} zebra />

<DataTable> props

| Prop | Type | Default | | --- | --- | --- | | data | TData[] — row data | — | | columns | DataTableColumn<TData>[] — TanStack accessorKey/header/cell shape | — | | sortable | boolean — click a header to cycle asc → desc → none | true | | selectable | boolean — adds a leading row-selection checkbox column | false | | pagination | boolean \| number — a number sets the page size, true uses 10, false shows everything | false | | zebra | boolean — zebra striping | false | | hover | boolean — row hover highlight | true | | stickyHeader | boolean — sticky header while the body scrolls | false |

Also re-exports createColumnHelper and the ColumnDef/CellContext/Row types from @tanstack/react-table, so you can build typed columns without a direct TanStack install.

Links

• silicaui.com — website & docs

• GitHub repo

• Issues

• @wizeworks/silicaui-react — the component layer this package extends