Data table

Dense typed table with sortable columns, selection, search, filters, pagination, and rich cells.

Data table is the canonical product grid for Concrete. Use createDataTableColumns<Row>() to keep columns aligned to row data.

Typed cells stay compact while still supporting signals and microvisuals.

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Every state maps to the same component render route through the `state` query param.

Typed cells stay compact while still supporting signals and microvisuals.

Default

Dense table with status, delta, sparkline, and meter cells.

Typed cells stay compact while still supporting signals and microvisuals.

Selected

Selectable rows with toolbar actions.

Typed cells stay compact while still supporting signals and microvisuals.


Router contract	Shipping	Arihan		+18.6%7d		184

Filtered

Search and filter controls with pagination.

Typed cells stay compact while still supporting signals and microvisuals.


No rows

Empty

No-row state inside the same table shell.

Props

Name	Type	Default	Description
`columns *`	`readonly DataTableColumn<Row>[]`	-	Typed column definitions. Use createDataTableColumns<Row>() for best DX.
`rows *`	`readonly Row[]`	-	Typed row data with primitive or rich cell values.
`title`	`string`	-	Optional table title.
`caption`	`string`	-	Muted supporting copy.
`selectable`	`boolean`	`false`	Adds a checkbox selection column.
`selectedRowIds`	`readonly string[]`	`[]`	Controlled selected row ids.
`sort`	`DataTableSort`	-	Controlled sort state.
`filters`	`readonly DataTableFilter[]`	`[]`	Compact toolbar filter controls.
`searchValue`	`string`	`''`	Controlled search query.
`searchPlaceholder`	`string`	`Search rows`	Search input placeholder.
`pagination`	`DataTablePagination`	-	Optional page status and controls.
`toolbarActions`	`readonly DataTableToolbarAction[]`	-	Right-side table toolbar actions.
`getRowId`	`(row: Row, rowIndex: number) => string`	-	Custom stable row id resolver.
`onSortChange`	`(sort: DataTableSort \| null) => void`	-	Receives local sort changes.
`onFilterChange`	`(filterId: string, value: string) => void`	-	Receives filter selection changes.
`onPageChange`	`(page: number, pageSize: number) => void`	-	Receives pagination clicks.
`onRowSelectionChange`	`(selectedRowIds: readonly string[]) => void`	-	Receives row selection changes.
`onToolbarAction`	`(actionId: string, selectedRowIds: readonly string[]) => void`	-	Receives table toolbar action clicks.