Table

columns: [{ key, header, render?(row), align? }]; rowKey (default id) names the unique field.

Name	Role	Bananas
Kevin	Banana boss	3
Stuart	Goggle polisher	12

Compact. compact tightens the cell padding for dense lists. rowProps(row) adds attributes such as className or aria-selected to a row, and isRowHidden(row) hides a row with the hidden attribute while keeping it mounted, so filtering does not reload its images or reset its inputs.

Name	Role	Bananas
Kevin	Banana boss	3
Stuart	Goggle polisher	12
Bob	Banana taster	1

Props

Table

columnsTableColumn[]
Column definitions. See the TableColumn table below.
rowsobject[]
Row data.
rowKeystring
Default: 'id'
Field holding each row’s unique key.
emptyReactNode
Default: 'No data'
Shown when there are no rows.
captionstring
Screen-reader caption.
compactboolean
Default: false
Tighter cell padding.
isRowHidden(row) => boolean
Hides a row with the hidden attribute but keeps it mounted, so filtering does not reload images or reset inputs.
rowProps(row) => HTMLAttributes<tr>
Extra attributes for a row, e.g. className or aria-selected.
classNamestring
Default: ''
Extra classes for the root element.

Table props
Prop	Type	Default	Description
`columns`	TableColumn[]	–	Column definitions. See the TableColumn table below.
`rows`	object[]	–	Row data.
`rowKey`	string	`'id'`	Field holding each row’s unique key.
`empty`	ReactNode	`'No data'`	Shown when there are no rows.
`caption`	string	–	Screen-reader caption.
`compact`	boolean	`false`	Tighter cell padding.
`isRowHidden`	(row) => boolean	–	Hides a row with the `hidden` attribute but keeps it mounted, so filtering does not reload images or reset inputs.
`rowProps`	(row) => HTMLAttributes<tr>	–	Extra attributes for a row, e.g. `className` or `aria-selected`.
`className`	string	`''`	Extra classes for the root element.

TableColumn

keystring
Unique key; also the row field shown when there is no render.
headerReactNode
Column heading.
render(row) => ReactNode
Custom cell content.
align'left' | 'center' | 'right'
Default: 'left'
Text alignment of the column.

TableColumn props
Prop	Type	Default	Description
`key`	string	–	Unique key; also the row field shown when there is no render.
`header`	ReactNode	–	Column heading.
`render`	(row) => ReactNode	–	Custom cell content.
`align`	'left' \| 'center' \| 'right'	`'left'`	Text alignment of the column.