Components

Table

Tables display sets of data across rows and columns for easy scanning and comparison.

Tables are used to organize and display data efficiently. The Table components are composable primitives that can be assembled to build any table layout, while DataTable provides a quick way to render tabular data from columns and data props.

Basic table

Compose Table, TableHead, TableBody, TableRow and TableCell to build a table from scratch.

Name	Status	Views
Homepage	Published	12,847
About Us	Draft	3,291
Contact	Published	1,082
Blog Post #1	Review	847

With badges

Name	Status	Views
Homepage	Published	12,847
About Us	Draft	3,291
Contact	Published	1,082
Blog Post #1	Review	847

Hover & striped

Pass hover to highlight rows on hover, or striped to apply alternating row backgrounds.

Name	Status	Views
Homepage	Published	12,847
About Us	Draft	3,291
Contact	Published	1,082
Blog Post #1	Review	847

Data table

DataTable accepts columns and data props and renders the table for you. Each column can define a custom render function for the cell content.

Name	Status	Views
Homepage	Published	12,847
About Us	Draft	3,291
Contact	Published	1,082
Blog Post #1	Review	847

API

See the documentation below for a complete reference to all of the props available to the Table components.

DataTable Props

Prop	Type	Default	Description
`columns`	`TableColumn[]`	—	Column definitions: key, header, optional align and render.
`data`	`T[]`	—	Array of row objects to render.
`getRowKey`	`(row: T, index: number) => React.Key`	—	Returns a unique key for each row.

TableColumn

Prop	Type	Default	Description
`key`	`keyof T`	—	The row property to read the cell value from.
`header`	`ReactNode`	—	Content rendered in the column header cell.
`align`	`'left' \| 'center' \| 'right'`	`'left'`	Text alignment for the header and cell.
`render`	`(value, row: T) => ReactNode`	—	Custom renderer for the cell content.

TableBadge Props

Prop	Type	Default	Description
`variant`	`'default' \| 'brand' \| 'accent' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'solid-brand' \| 'solid-success' \| 'solid-warning' \| 'solid-error' \| 'solid-info'`	`'default'`	The badge utility class applied to the cell.

Table Props

Prop	Type	Default	Description
`hover`	`boolean`	`false`	Highlights rows on hover.
`striped`	`boolean`	`false`	Applies alternating row backgrounds.

TableHeaderCell / TableCell Props

Prop	Type	Default	Description
`align`	`'left' \| 'center' \| 'right'`	`'left'`	Text alignment of the cell content.