Component

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.
data
DOM renderImage render
Data tableDefault

Evaluation runs

Typed cells stay compact while still supporting signals and microvisuals.

Router contractShipping
+18.6%7d
Tool routerFeatured
+9.2%7d
Memory recallReview
+0.8%7d
Policy evalBlocked
-4.4%7d

Playground

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

Loading playground

Rendered matrix

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

Default

Readable preview table with status, delta, and meter cells.

Evaluation runs

Typed cells stay compact while still supporting signals and microvisuals.

Router contractShipping
+18.6%7d
Tool routerFeatured
+9.2%7d
Memory recallReview
+0.8%7d
Policy evalBlocked
-4.4%7d
Page 1 / 10 selected
Render state

Wide

Full-width table with owner, trend, and cost cells.

Evaluation runs

Typed cells stay compact while still supporting signals and microvisuals.

Router contractShippingArihan
+18.6%7dSparkline184
Memory recallReviewJordan
+0.8%7dSparkline92
Tool routerFeaturedTom
+9.2%7dSparkline138
Policy evalBlockedDexter
-4.4%7dSparkline211
Page 1 / 10 selected
Render state

Selected

Selectable rows with toolbar actions.

Evaluation runs

Typed cells stay compact while still supporting signals and microvisuals.

Router contractShipping
+18.6%7d
Memory recallReview
+0.8%7d
Tool routerFeatured
+9.2%7d
Policy evalBlocked
-4.4%7d
Page 1 / 12 selected
Render state

Filtered

Search and filter controls with pagination.

Evaluation runs

Typed cells stay compact while still supporting signals and microvisuals.

Router contractShipping
+18.6%7d
Page 1 / 10 selected
Render state

Paginated

Second page with pager boundary controls visible.

Evaluation runs

Typed cells stay compact while still supporting signals and microvisuals.

Tool routerFeatured
+9.2%7d
Policy evalBlocked
-4.4%7d
Page 2 / 20 selected
Render state

Empty

No-row state inside the same table shell.

Evaluation runs

Typed cells stay compact while still supporting signals and microvisuals.

No rows
Page 1 / 10 selected
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
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.
titlestring-Optional table title.
captionstring-Muted supporting copy.
selectablebooleanfalseAdds a checkbox selection column.
selectedRowIdsreadonly string[][]Controlled selected row ids.
sortDataTableSort-Controlled sort state.
filtersreadonly DataTableFilter[][]Compact toolbar filter controls.
searchValuestring''Controlled search query.
searchPlaceholderstringSearch rowsSearch input placeholder.
paginationDataTablePagination-Optional page status and controls.
toolbarActionsreadonly 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.