Ansora data table

primitivedata

Install

pnpm dlx shadcn@4.23.0 add @ansora/data-table

Examples

Usage

The empty state (emptyLabel) is a required prop with no default — the text always comes from you, in your language. label is required too: it names the table and its scroll region (the accessible name a screen reader announces for both), so a bare <DataTable columns={…} data={…} emptyLabel="…" /> does not compile. Right alignment and tabular numerals are turned on per column through meta: { align: "right" }; without it a numeric column stays left-aligned, because nothing is inferred from the type of the data. Type your columns as DataTableColumn<Row>[] (exported next to DataTable), not as a bare TanStack ColumnDef: TanStack Table v9 puts the table's feature set first in every type, and the alias carries this table's — including the type of meta, which is declared on the table rather than by augmenting TanStack's global ColumnMeta, so installing this component changes no other table in your project.

DataTable owns its own focusable, named scroll region (tabIndex={0} role="group" aria-label={label}) — it does not delegate that to SectionCard. Composing it inside @ansora/section-card, do NOT also pass SectionCard a scroll prop: that would nest a second scroll wrapper around the one this component already brings, and the outer, focusable one would not be the element that actually scrolls. SectionCard's scroll is for children that do not already own one — this one does.

Files

• registry/ansora/components/data-table.tsx → @components/ansora/data-table.tsx

Dependencies

• @ansora/base
• https://ui.shadcn.com/r/styles/base-nova/table.json
• @tanstack/react-table@^9 (npm)