DataGrid

Open in Playground

Table with sorting (click a sortable header: ascending, descending, off), search, pagination and row selection. columns: [{ key, header, sortable?, render?(row), align?, accessor?(row) }]. Selection is uncontrolled with selectable, or controlled with selected and onSelectionChange.

Columns also take className, headerClassName, width, minWidth and hideBelow (sm, md or lg, hides the column on smaller screens). loading swaps the rows for skeletons and sets aria-busy. hideFooterWhenSinglePage hides the row count and pager when every row fits on one page.


Kevin 1	Bananas	0
Stuart 2	Gadgets	37
Bob 3	Pranks	74
Dave 4	Bananas	11
Carl 5	Gadgets	48

Name	Team	Email
Kevin	Bananas	kevin@minions.example
Stuart	Gadgets	stuart@minions.example
Bob	Pranks	bob@minions.example

Large result sets. virtualized renders only the rows in view (plus a few more) inside a scrolling area, so tens of thousands of rows stay fast. Give it a fixed rowHeight (default 40; cell content must fit on one line) and a height for the scroll area (default 400). The header stays visible, all rows scroll in one list instead of paging, and sorting, search and selection still cover every row, including those scrolled out of view. Pass pageSize as well if you also want a pager. Rows of different heights are not supported, and browsers limit how tall a scroll area can be (roughly 17 million px in Firefox, about 400,000 rows at the default row height), so for larger results load them in chunks.


Minion 1	Bananas	0
Minion 2	Gadgets	919
Minion 3	Pranks	838
Minion 4	Hugs	757
Minion 5	Bananas	676
Minion 6	Gadgets	595
Minion 7	Pranks	514
Minion 8	Hugs	433
Minion 9	Bananas	352
Minion 10	Gadgets	271
Minion 11	Pranks	190
Minion 12	Hugs	109
Minion 13	Bananas	28
Minion 14	Gadgets	947
Minion 15	Pranks	866

50000 rows

Dense tables. density="compact" tightens the padding of the cells, the header, the selection column and the loading skeletons, so more rows fit on screen. With virtualized the default rowHeight drops from 40 to 32; an explicit rowHeight still wins.


Kevin 1	Bananas	0
Stuart 2	Gadgets	37
Bob 3	Pranks	74
Dave 4	Bananas	11
Carl 5	Gadgets	48
Kevin 6	Pranks	85
Stuart 7	Bananas	22
Bob 8	Gadgets	59

Props

DataGrid

columnsDataGridColumn[]
Column definitions; accessor supplies the sort and search value; hideBelow (sm | md | lg) hides the column on smaller screens. See the DataGridColumn table below.
rowsobject[]
Row data.
rowKeystring
Default: 'id'
Field holding each row’s unique key.
pageSizenumber
Default: 10
Rows per page (the starting size when pageSizeOptions is set). When virtualized, paging only happens if this or pageSizeOptions is given.
virtualizedboolean
Default: false
Render only the rows in view, for thousands of rows. Needs a fixed row height; all rows scroll in one list with a sticky header.
density'comfortable' | 'compact'
Default: 'comfortable'
Row spacing: "compact" tightens the padding of the cells, header, selection column and loading skeletons for dense tables.
rowHeightnumber
Default: 40
Row height in px when virtualized (32 when density="compact"). Cell content must fit in it; it is not wrapped.
heightnumber
Default: 400
Height in px of the scrolling area when virtualized (shorter when there are few rows).
pageSizeOptionsnumber[]
Adds a "Per page" select with these sizes.
onPageSizeChange(size: number) => void
Called when the user picks a page size.
searchableboolean
Default: false
Show a search box.
selectableboolean
Default: false
Show row checkboxes.
selectedArray
Selected row keys (controlled).
onSelectionChange(keys) => void
Called when the selection changes.
emptyReactNode
Default: 'No results'
Shown when nothing matches.
captionstring
Screen-reader caption.
classNamestring
Default: ''
Extra classes for the root element.

DataGrid props
Prop	Type	Default	Description
`columns`	DataGridColumn[]	–	Column definitions; `accessor` supplies the sort and search value; `hideBelow` (`sm` \| `md` \| `lg`) hides the column on smaller screens. See the DataGridColumn table below.
`rows`	object[]	–	Row data.
`rowKey`	string	`'id'`	Field holding each row’s unique key.
`pageSize`	number	`10`	Rows per page (the starting size when `pageSizeOptions` is set). When `virtualized`, paging only happens if this or `pageSizeOptions` is given.
`virtualized`	boolean	`false`	Render only the rows in view, for thousands of rows. Needs a fixed row height; all rows scroll in one list with a sticky header.
`density`	'comfortable' \| 'compact'	`'comfortable'`	Row spacing: "compact" tightens the padding of the cells, header, selection column and loading skeletons for dense tables.
`rowHeight`	number	`40`	Row height in px when `virtualized` (32 when `density="compact"`). Cell content must fit in it; it is not wrapped.
`height`	number	`400`	Height in px of the scrolling area when `virtualized` (shorter when there are few rows).
`pageSizeOptions`	number[]	–	Adds a "Per page" select with these sizes.
`onPageSizeChange`	(size: number) => void	–	Called when the user picks a page size.
`searchable`	boolean	`false`	Show a search box.
`selectable`	boolean	`false`	Show row checkboxes.
`selected`	Array	–	Selected row keys (controlled).
`onSelectionChange`	(keys) => void	–	Called when the selection changes.
`empty`	ReactNode	`'No results'`	Shown when nothing matches.
`caption`	string	–	Screen-reader caption.
`className`	string	`''`	Extra classes for the root element.

DataGridColumn

keystring
Unique key; also the row field shown when there is no render.
headerReactNode
Column heading.
sortableboolean
Let the user sort by this column.
render(row) => ReactNode
Custom cell content.
align'left' | 'center' | 'right'
Default: 'left'
Text alignment of the column.
accessor(row) => unknown
Supplies the value used for sorting and search.
classNamestring
Extra classes for this column's body cells.
headerClassNamestring
Extra classes for this column's header cell.
widthnumber | string
Column width: a number (px) or any CSS length.
minWidthnumber | string
Smallest width of the column.
hideBelow'sm' | 'md' | 'lg'
Hide the column below this breakpoint, so wide tables fit on phones.

DataGridColumn props
Prop	Type	Default	Description
`key`	string	–	Unique key; also the row field shown when there is no render.
`header`	ReactNode	–	Column heading.
`sortable`	boolean	–	Let the user sort by this column.
`render`	(row) => ReactNode	–	Custom cell content.
`align`	'left' \| 'center' \| 'right'	`'left'`	Text alignment of the column.
`accessor`	(row) => unknown	–	Supplies the value used for sorting and search.
`className`	string	–	Extra classes for this column's body cells.
`headerClassName`	string	–	Extra classes for this column's header cell.
`width`	number \| string	–	Column width: a number (px) or any CSS length.
`minWidth`	number \| string	–	Smallest width of the column.
`hideBelow`	'sm' \| 'md' \| 'lg'	–	Hide the column below this breakpoint, so wide tables fit on phones.