LAYOUT / COMPONENT 38

Table

React component

Compare structured records with sorting, selection, and pagination.

Try it out

Use the live controls or open the Code tab to view and copy the example.

Collections
		Status
Essentials	24	Published
Studio favorites	12	Draft
Spring collection	36	Published

API reference

Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.

Prop	Type	Description
`label`Required	`string`	A meaningful visible or accessible label.
`columns`Required	`TableColumn<T>[]`	Typed column definitions, renderers and optional sort accessors.
`rows`Required	`T[]`	Records to render. The library does not fetch data.
`rowKey`Required	`(row: T) => string`	Returns a stable unique key for each record.
`loading`	`boolean \| undefined`	Standard React / HTML attribute passed to the underlying element.
`emptyMessage`	`string \| undefined`Default: `"No results found."`	See the typed definition and working example for this option.
`sort`	`{ column: string; direction: "ascending" \| "descending"; } \| undefined`	See the typed definition and working example for this option.
`onSortChange`	`((sort: { column: string; direction: "ascending" \| "descending"; }) => void) \| undefined`	See the typed definition and working example for this option.
`selected`	`string[] \| undefined`Default: `[]`	See the typed definition and working example for this option.
`onSelectionChange`	`((ids: string[]) => void) \| undefined`	Receives all selected row keys.
`pagination`	`{ hasPrevious: boolean; hasNext: boolean; onPrevious: () => void; onNext: () => void; label: string; } \| undefined`	External page state and navigation callbacks.
`filters`	`ReactNode`	See the typed definition and working example for this option.

Accessibility & interaction

Generic typed columns, client sorting and controlled selection. Pagination is callback-driven. Tables scroll horizontally on small screens. Virtualization and editable spreadsheet cells are not included.

Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.

Variants & implementation notes

Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.