Data Display

Table

Config-driven data table with sorting, row selection, row expansion, a sticky header, and loading and empty states.

Example

			Status
INV-1000	Acme	$200	Paid
INV-1001	Globex	$337	Pending
INV-1002	Initech	$474	Overdue
INV-1003	Umbrella	$611	Paid
INV-1004	Stark	$748	Pending
INV-1005	Acme	$885	Overdue

Props

Prop	Type	Default	Description
`columns`	`TableColumn<Row>[]`	—	{ key, header, align?, sortable?, sortValue?, render?, width?, headerClassName?, cellClassName? }.
`rows`	`Row[]`	—	The data.
`getRowKey`	`(row, index) => string \| number`	—	Stable key — use an id field, not the index.
`aria-label`	`string`	—	Required.

columns

TableColumn<Row>[]

Default: —

{ key, header, align?, sortable?, sortValue?, render?, width?, headerClassName?, cellClassName? }.

rows

Row[]

Default: —

The data.

getRowKey

(row, index) => string | number

Default: —

Stable key — use an id field, not the index.

aria-label

string

Default: —

Required.

Prop	Type	Default	Description
`sortDescriptor / defaultSortDescriptor`	`{ column, direction } \| null`	null	Current / initial sort.
`onSortChange`	`(descriptor) => void`	—	Present → server-side sort; omit for client-side.

sortDescriptor / defaultSortDescriptor

{ column, direction } | null

Default: null

Current / initial sort.

onSortChange

(descriptor) => void

Default: —

Present → server-side sort; omit for client-side.

Prop	Type	Default	Description
`selectionMode`	`"none" \| "single" \| "multiple"`	none	Row selection.
`selectedKeys / defaultSelectedKeys / onSelectionChange`	`Iterable<Key> / …`	—	Controlled / uncontrolled selection.
`isRowSelectable`	`(row) => boolean`	—	Disable selection per row.

selectionMode

"none" | "single" | "multiple"

Default: none

Row selection.

selectedKeys / defaultSelectedKeys / onSelectionChange

Iterable<Key> / …

Default: —

Controlled / uncontrolled selection.

isRowSelectable

(row) => boolean

Default: —

Disable selection per row.

Prop	Type	Default	Description
`renderExpandedRow`	`(row) => ReactNode`	—	Adds the chevron expand-toggle column.
`expandedKeys / defaultExpandedKeys / onExpandedChange`	`Iterable<Key> / …`	—	Controlled expansion.

renderExpandedRow

(row) => ReactNode

Default: —

Adds the chevron expand-toggle column.

expandedKeys / defaultExpandedKeys / onExpandedChange

Iterable<Key> / …

Default: —

Controlled expansion.

Prop	Type	Default	Description
`isLoading / loadingRowCount`	`boolean / number`	false / 5	Skeleton rows while loading.
`emptyContent`	`ReactNode`	<EmptyState title="No data" />	Shown when rows is empty.
`onRowAction`	`(key, row) => void`	—	Makes rows clickable (click / Enter / Space).

isLoading / loadingRowCount

boolean / number

Default: false / 5

Skeleton rows while loading.

emptyContent

ReactNode

Default: <EmptyState title="No data" />

Shown when rows is empty.

onRowAction

(key, row) => void

Default: —

Makes rows clickable (click / Enter / Space).

Prop	Type	Default	Description
`stickyHeader / maxHeight`	`boolean / number \| string`	false / —	Sticky header + vertical scroll container.
`isCompact / isStriped / removeWrapper`	`boolean`	false	Density and framing.
`topContent / bottomContent`	`ReactNode`	—	Toolbar / pagination slots.

stickyHeader / maxHeight

boolean / number | string

Default: false / —

Sticky header + vertical scroll container.

isCompact / isStriped / removeWrapper

boolean

Default: false

Density and framing.

topContent / bottomContent

ReactNode

Default: —

Toolbar / pagination slots.

Prop	Type	Default	Description
`classNames`	`TableClassNames`	—	Per-slot class overrides.

classNames

TableClassNames

Default: —

Per-slot class overrides.