Data Grid

Grid for 100,000 rows: grouping, filters, inline editing. Pro · Data and metrics › Tables

A spreadsheet-grade data grid: virtualized rows (100k+), sticky header, resizable / reorderable / pinnable / hideable columns, multi-sort, column filters and quick search, grouping with aggregates, inline editing with validation, row selection with a summary, CSV export, and the full WAI-ARIA grid keyboard model.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add data-grid

npm install valyro-ui-pro

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

Props

Prop	Type	Default
`rows` *	`readonly T[]`		All rows; search, filters, sorting and grouping run on them in the browser. Edits never mutate them.
`columns` *	`readonly DataGridColumn<T>[]`		Column definitions: header, value type, cell renderer, editing, validation, sizing and aggregates.
`getRowId`	`(row: T, index: number) => string`		Stable row id. Defaults to `row.id`, then the row's index.
`label` *	`string`		Accessible name of the grid.
`height`	`number \| string`	`520`	Maximum height of the scrolling area; rows are virtualized inside it. With fewer rows the grid shrinks to fit them instead of trailing empty space.
`rowHeight`	`number`		Overrides the density's row height, in px.
`density`	`'compact' \| 'standard' \| 'comfortable'`		Controlled `density`; use with `onDensityChange`.
`defaultDensity`	`'compact' \| 'standard' \| 'comfortable'`	`'standard'`	Initial `density` when uncontrolled.
`onDensityChange`	`(density: DataGridDensity) => void`		Called with the new `density` when it changes.
`sort`	`GridSortModel`		Sort keys in priority order; Shift+click a header to add one.
`defaultSort`	`GridSortModel`	`[]`	Initial `sort` when uncontrolled.
`onSortChange`	`(sort: GridSortModel) => void`		Called with the new `sort` when it changes.
`filters`	`GridFilterModel`		Controlled `filters`; use with `onFiltersChange`.
`defaultFilters`	`GridFilterModel`	`{}`	Initial `filters` when uncontrolled.
`onFiltersChange`	`(filters: GridFilterModel) => void`		Called with the new `filters` when it changes.
`search`	`string`		Quick-search text.
`defaultSearch`	`string`	`''`	Initial `search` when uncontrolled.
`onSearchChange`	`(search: string) => void`		Called with the new `search` when it changes.
`groupBy`	`string[]`		Column keys to group rows by, outermost first.
`defaultGroupBy`	`string[]`	`[]`	Initial `groupBy` when uncontrolled.
`onGroupByChange`	`(groupBy: string[]) => void`		Called with the new `groupBy` when it changes.
`defaultGroupsExpanded`	`boolean`	`true`	Whether groups start expanded.
`selectable`	`boolean`	`false`	Adds a checkbox column (Shift+click selects a range; the header selects every filtered row).
`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.
`showSelectionSummary`	`boolean`	`true`	The footer swaps the row count for the selected count, the selection's aggregates and "Clear selection" while rows are selected (default true). Turn off when a BulkActionBar already shows them.
`columnVisibility`	`Record<string, boolean>`		`false` hides a column.
`defaultColumnVisibility`	`Record<string, boolean>`	`{}`	Initial `columnVisibility` when uncontrolled.
`onColumnVisibilityChange`	`(visibility: Record<string, boolean>) => void`		Called with the new `columnVisibility` when it changes.
`columnWidths`	`Record<string, number>`		Controlled `columnWidths`; use with `onColumnWidthsChange`.
`defaultColumnWidths`	`Record<string, number>`	`{}`	Initial `columnWidths` when uncontrolled.
`onColumnWidthsChange`	`(widths: Record<string, number>) => void`		Called with the new `columnWidths` when it changes.
`columnOrder`	`string[]`		Controlled `columnOrder`; use with `onColumnOrderChange`.
`defaultColumnOrder`	`string[]`		Initial `columnOrder` when uncontrolled.
`onColumnOrderChange`	`(order: string[]) => void`		Called with the new `columnOrder` when it changes.
`columnPinning`	`GridColumnPinning`		Controlled `columnPinning`; use with `onColumnPinningChange`.
`defaultColumnPinning`	`GridColumnPinning`		Initial `columnPinning` when uncontrolled.
`onColumnPinningChange`	`(pinning: GridColumnPinning) => void`		Called with the new `columnPinning` when it changes.
`reorderable`	`boolean`	`false`	Lets headers be dragged to reorder columns (the column menu can always move them).
`onRowsChange`	`(rows: T[]) => void`		Called with the new rows after an edit.
`onCellEdit`	`(edit: DataGridCellEdit<T>) => void`		Called once per committed cell change with the updated row, the column key and the old and new values.
`toolbar`	`boolean`	`true`	Shows the search, density, columns and export controls.
`exportFileName`	`string`		Shows an "Export CSV" button that downloads the filtered, sorted rows with the visible columns.
`toolbarActions`	`ReactNode`		Extra toolbar content, placed before the built-in controls.
`loading`	`boolean`	`false`	Skeleton rows replace the body and the footer summary; select-all and export are disabled.
`empty`	`ReactNode`		Replaces the empty state shown when there are no rows.
`locale`	`string`		Locale for numbers, dates and counters. Defaults to the `ThemeProvider` locale.
`labels`	`Partial<DataGridLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Data Table — Tables with search and sorting
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: Data Table · Next: Virtual List · All Data and metrics