KQ-823 · TABLE/BUILD

Table Build

A generated table that is usable before it is finished. The header lands first, each heading dropping into its seat on snap, and rows cascade in as they arrive on glide; rows are keyed by id with a position layout animation, so sorting while the table fills glides the rows present to their new seats and later rows slot straight into sorted place. Headings are native buttons with aria-sort: Tab between them, Enter or Space cycles ascending, descending, none.

KQ-823 · TABLE/BUILD

Idle · press build

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/table-build

Props

columns: TableBuildColumn[]; default —; Column key, heading, whether it is numeric, and an optional format for the printed cell.
rows: TableBuildRow[]; default —; Every row the table will have, each with an id, in arrival order.
arrived: number; default 0; Rows that have arrived so far.
generating: boolean; default false; The build is open: the header shows and aria-busy is set.
sort / defaultSort: TableBuildSort | null; default null; Controlled or initial sort: a column key and "asc" or "desc".
onSortChange: (sort: TableBuildSort | null) => void; default —; Fires from the heading button that changed the sort.
caption: string; default —; Names the table; rendered as its caption.
model: string; default —; An invented model name beside the caption.
onComplete: () => void; default —; Fires once when the last-arriving row has finished landing.

Prop	Type	Default	Description
columns	TableBuildColumn[]	—	Column key, heading, whether it is numeric, and an optional format for the printed cell.
rows	TableBuildRow[]	—	Every row the table will have, each with an id, in arrival order.
arrived	number	0	Rows that have arrived so far.
generating	boolean	false	The build is open: the header shows and aria-busy is set.
sort / defaultSort	TableBuildSort \| null	null	Controlled or initial sort: a column key and "asc" or "desc".
onSortChange	(sort: TableBuildSort \| null) => void	—	Fires from the heading button that changed the sort.
caption	string	—	Names the table; rendered as its caption.
model	string	—	An invented model name beside the caption.
onComplete	() => void	—	Fires once when the last-arriving row has finished landing.