- React 18.0+ support
- Evergreen browsers and server-side rendering support
- Tree-shaking support and only one npm dependency to keep your bundles slim
- Great performance thanks to virtualization: columns and rows outside the viewport are not rendered
- Strictly typed with TypeScript
- Keyboard accessibility
- Light and dark mode support out of the box. The light or dark themes can be enforced using the
rdg-light
orrdg-dark
classes. - Frozen columns
- Column resizing
- Multi-column sorting
- Click on a sortable column header to toggle between its ascending/descending sort order
- Ctrl+Click / Meta+Click to sort an additional column
- Column spanning
- Column grouping
- Row selection
- Row grouping
- Summary rows
- Dynamic row heights
- No rows fallback
- Cell formatting
- Cell editing
- Cell copy / pasting
- Cell value dragging / filling
- Customizable Renderers
- Right-to-left (RTL) support. We recommend using Firefox as Chrome has a bug with frozen columns, and the
:dir
pseudo class is not supported
npm install react-data-grid
react-data-grid
is published as ECMAScript modules for evergreen browsers / bundlers, and CommonJS for server-side rendering / Jest.
import 'react-data-grid/lib/styles.css';
import DataGrid from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' }
];
const rows = [
{ id: 0, title: 'Example' },
{ id: 1, title: 'Demo' }
];
function App() {
return <DataGrid columns={columns} rows={rows} />;
}
See Column
.
An array describing the grid's columns.
columns
array will trigger a re-render for the whole grid, avoid changing it as much as possible for optimal performance.
An array of rows, the rows data can be of any type.
An optional array of summary rows, usually used to display total values for example.
A function returning a unique key/identifier per row. rowKeyGetter
is required for row selection to work.
import DataGrid from 'react-data-grid';
interface Row {
id: number;
name: string;
}
function rowKeyGetter(row: Row) {
return row.id;
}
function MyGrid() {
return <DataGrid columns={columns} rows={rows} rowKeyGetter={rowKeyGetter} />;
}
đź’ˇ While optional, setting this prop is recommended for optimal performance as the returned value is used to set the key
prop on the row elements.
A function receiving row updates.
The first parameter is a new rows array with both the updated rows and the other untouched rows.
The second parameter is an object with an indexes
array highlighting which rows have changed by their index, and the column
where the change happened.
import { useState } from 'react';
import DataGrid from 'react-data-grid';
function MyGrid() {
const [rows, setRows] = useState(initialRows);
return <DataGrid columns={columns} rows={rows} onRowsChange={setRows} />;
}
Default: 35
pixels
Either a number defining the height of row in pixels, or a function returning dynamic row heights.
Default: 35
pixels
A number defining the height of the header row.
Default: 35
pixels
A number defining the height of summary rows.
Triggered when the selected cell is changed.
Arguments:
args.rowIdx
:number
- row indexargs.row
:R
- row object of the currently selected cellargs.column
:CalculatedColumn<TRow, TSummaryRow>
- column object of the currently selected cell
This prop can be used to override the internal renderers. The prop accepts an object of type
interface Renderers<TRow, TSummaryRow> {
renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;
renderRow?: Maybe<(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;
renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;
noRowsFallback?: Maybe<ReactNode>;
}
For example, the default <Row />
component can be wrapped via the renderRow
prop to add context providers or tweak props
import DataGrid, { RenderRowProps, Row } from 'react-data-grid';
function myRowRenderer(key: React.Key, props: RenderRowProps<Row>) {
return (
<MyContext.Provider key={key} value={123}>
<Row {...props} />
</MyContext.Provider>
);
}
function MyGrid() {
return <DataGrid columns={columns} rows={rows} renderers={{ renderRow: myRowRenderer }} />;
}
renderRow
.
This property sets the text direction of the grid, it defaults to 'ltr'
(left-to-right). Setting direction
to 'rtl'
has the following effects:
- Columns flow from right to left
- Frozen columns are pinned on the right
- Column resize handle is shown on the left edge of the column
- Scrollbar is moved to the left
See renderers
See RenderRowProps
The ref
prop is supported.
See FormatterProps
R
,TRow
: Row typeSR
,TSummaryRow
: Summary row typeK
: Row key type