Data Table

Tables with search and sorting. Free, MIT · Data and metrics › Tables

Installation

npx valyro-cli@latest add data-table

npx shadcn@latest add https://valyro.xyz/r/data-table.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { DataTable } from 'valyro-ui';

Props

Prop	Type	Default
`data`	`readonly T[]`		All rows; search, sorting and pagination run on this array in the browser. Or rows as children (see `children`).
`columns`	`readonly DataTableColumn<T>[]`		Column definitions: header, value accessor, cell renderer, sorting, alignment and width.
`children`	`ReactNode`		The compound form instead of `data` and `columns`: a `DataTable.Header` of `DataTable.Column`s and a `DataTable.Body` of `DataTable.Row`s with a `DataTable.Cell` per column. Search, sorting and selection work on the cells' `value` (or their text); `onRowClick` gets a DataTableRowData.
`getRowId`	`(row: T, index: number) => string`		Stable id for selection and keys. Defaults to `row.id`, then the row's index in `data`.
`label`	`string`		Accessible name of the table.
`searchable`	`boolean`	`false`	Shows a search field that filters rows across all columns.
`pageSize`	`number`		Rows per page. Omit to show every row.
`sort`	`SortState \| null`		Controlled `sort`; use with `onSortChange`.
`defaultSort`	`SortState \| null`	`null`	Initial `sort` when uncontrolled.
`onSortChange`	`(sort: SortState \| null) => void`		Called with the new `sort` when it changes.
`selectable`	`boolean`	`false`	Adds a checkbox column.
`selected`	`string[]`		Controlled `selected`; use with `onSelectedChange`.
`defaultSelected`	`string[]`	`[]`	Initial `selected` when uncontrolled.
`onSelectedChange`	`(ids: string[]) => void`		Called with the new `selected` when it changes.
`onRowClick`	`(row: T) => void`		Makes rows clickable and focusable; Enter on a focused row calls it too.
`loading`	`boolean`	`false`	Skeleton rows (`pageSize` or 5) replace the body, and the select-all and paging buttons are disabled.
`density`	`'comfortable' \| 'compact'`	`'comfortable'`	Row height and text size: `compact` has tighter cells and smaller text.
`maxHeight`	`CSSProperties['maxHeight']`		Limits the height; the body scrolls under a pinned header.
`virtualize`	`boolean`	`false`	Renders only the rows scrolled into view, for thousands of rows without pagination. Needs `maxHeight`; rows should share one height (the first rendered row is measured).
`stickyFirstColumn`	`boolean`	`true`	Keeps the first column (and the checkbox column) in view while scrolling sideways.
`empty`	`ReactNode`		Replaces the default empty state.
`locale`	`string`		Locale for default number/date cells and counters. Defaults to the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<DataTableLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Compound parts

DataTable.Header (DataTableHeader), DataTable.Column (DataTableColumnPart), DataTable.Body (DataTableBody), DataTable.Row (DataTableRow), DataTable.Cell (DataTableCell)

Related components

Data Grid — Grid for 100,000 rows: grouping, filters, inline editing
Virtual List — Virtual list for 100,000 rows
Bulk Action Bar — Actions for selected rows, with keyboard shortcuts
List Block — List with images or icons, descriptions and values
Description List — Key–value list: stacked, inline or a grid with icons
Tree View — Tree structures
Accordion — Collapsible sections
Sortable — Drag-and-drop sorting
JSON Viewer — JSON viewer
Timeline — Event timeline
Card — All-purpose cards
Item Card — Row card: icon, title, description and a control on the right

Previous: Filter Toolbar · Next: Data Grid · All Data and metrics