KQ-548 · SORT/TABLE

Sort Table

A table whose rows trade places. Sorting keeps every row's key and FLIPs it to its new seat on glide instead of re-painting the body, so a reorder is something the eye can follow; the header's arrow flips on snap and the sorted column tints. Headers are buttons inside th cells carrying aria-sort — the first press sorts ascending, the second reverses, the third clears back to the source order.

KQ-548 · SORT/TABLE

Basinworks properties

Salt Yard	Old Wharf	4	$3,310
Marlow Flats	Basin North	3	$2,840
Pier Nine	Harbourgate	2	$2,260
Alder Court	Basin North	2	$2,150
Kiln Row	Old Wharf	1	$1,725
Verge House	Harbourgate	1	$1,580

Sorted by Rent · descending

Install

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

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

Props

columns: SortColumn[]; default —; Columns, left to right; numeric ones sort by value and right-align in a mono tabular face.
rows: SortRow[]; default —; Rows as plain records, each carrying a stable key field the FLIP animation tracks.
sort / defaultSort: SortState | null; default —; Controlled or initial sort; null is the source order.
onSortChange: (sort: SortState | null) => void; default —; Fires with the new sort, or null when a third press clears it.
format: (value: string | number, column: SortColumn) => React.ReactNode; default —; Formats a cell — numbers should come through here rather than raw.
rowKey: string; default id; Row field holding the stable key; rows keep it across sorts so they travel rather than blink.
label: string; default —; Table caption, read by assistive technology and hidden on screen.

Prop	Type	Default	Description
columns	SortColumn[]	—	Columns, left to right; numeric ones sort by value and right-align in a mono tabular face.
rows	SortRow[]	—	Rows as plain records, each carrying a stable key field the FLIP animation tracks.
sort / defaultSort	SortState \| null	—	Controlled or initial sort; null is the source order.
onSortChange	(sort: SortState \| null) => void	—	Fires with the new sort, or null when a third press clears it.
format	(value: string \| number, column: SortColumn) => React.ReactNode	—	Formats a cell — numbers should come through here rather than raw.
rowKey	string	id	Row field holding the stable key; rows keep it across sorts so they travel rather than blink.
label	string	—	Table caption, read by assistive technology and hidden on screen.