Table · Pagination Composition

A table, not a data grid: it renders rows and sorts by a column. No virtualisation, no column resizing, no inline editing — those are product features, and a design system that grows them becomes a framework nobody can leave.

Usage

const [sort, setSort] = useState<SortState | null>({ column: 'issued', direction: 'desc' });
<Table  label="Invoices"  columns={columns}  rows={rows}  rowKey={(row) => row.id}  sort={sort}  onSortChange={setSort}  empty={<Empty title="No invoices yet" />}/>
<Pagination page={page} pageSize={20} total={137} onPageChange={setPage} />

Sorting has three states

Clicking a new column sorts ascending, clicking again flips it, and clicking a third time clears the sort. That third state matters: "put it back the way the server gave it to me" is something people look for, and two-state sorting hides it.

The state lives on the header as aria-sort, not only in the icon — a screen reader announces the sort without seeing the arrow.

Pagination

<Pagination page={page} pageSize={10} total={300} onPageChange={setPage} />

The page list always keeps the first and last page reachable, and a single skipped page is spelled out rather than hidden behind an ellipsis that costs the same width. An empty set reads 0–0 of 0 rather than 1–0.

Props