Data

Data table

Records in rows: a caption, column headers scoped to their columns, the naming column as row headers, figures aligned to the end in tabular figures.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { DataTable } from "@nibapp/ui/components/data-table";

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

DataTable

A table of records: a caption, column headers scoped to their columns, the naming column as row headers, and figures aligned to the end of their columns (the right in English, the left in a right-to-left language) in tabular figures. Columns say how each cell renders.

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	sm Inside a card or a pane: a detail under something larger. lg A page's own table (a plan comparison): roomy cells, the outer columns off the edges, banded groups.
caption (required)	ReactNode	—	What the table holds, read first by assistive technology.
hideCaption	boolean	false	The caption is for assistive technology only (a heading above already says it).
columns (required)	readonly DataTableColumn<Row>[]	—
rowKey (required)	(row: Row) => string	—
rowHeader (required)	string	—	The key of the column that names each row: its cells are the row headers.
rowClassName	(row: Row) => string \| undefined	—	Classes for a row (a failed request's danger tone), from the row.
rowTitle	(row: Row) => string \| undefined	—	A row's tooltip, from the row.
fixed	boolean	false
stickyHeader	boolean	false
hideHeader	boolean	false
inset	boolean	false
headClassName	string	—	Classes for the header row's group (a sticky header's background, when it isn't the surface).
groupClassName	string	—	Classes for each group's heading cell (a band of its own colour).
footer	readonly Row[]	—	Rows under the body, in a `<tfoot>`: a total. The same columns render them, the naming column's cells are their row headers, and they are set in the medium weight.

Also takes the props of a <table> element, except children, and ( | { readonly rows: readonly Row[]; readonly groups?: never } | { readonly groups: readonly DataTableGroup<Row>[]; readonly rows?: never } ).