Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
DataGrid
✓ import { DataGrid } from 'react-data-grid';
✗ const DataGrid = require('react-data-grid').DataGrid;
react-data-grid v7+ is published as ECMAScript modules (ESM) and is not directly compatible with CommonJS `require()` without a proper bundler setup.
Column
✓ import type { Column } from 'react-data-grid';
✗ import { Column } from 'react-data-grid';
Use `import type` for importing types like `Column` to ensure they are stripped from the JavaScript bundle.
styles.css
✓ import 'react-data-grid/lib/styles.css';
The default styles must be imported separately. This import should typically be done once in your application's entry file or a global stylesheet.
This quickstart demonstrates a basic functional React Data Grid component with columns, initial rows, and state management for row changes. It includes necessary imports for the `DataGrid` component, `Column` type, and default styles. The example showcases a simple grid with sorting and resizing enabled on columns, making it runnable and illustrative for common usage patterns.
import React from 'react';
import { DataGrid, type Column } from 'react-data-grid';
import 'react-data-grid/lib/styles.css';
interface Row {
id: number;
title: string;
status: 'todo' | 'in-progress' | 'done';
priority: 'low' | 'medium' | 'high';
}
const initialRows: Row[] = Array.from({ length: 50 }, (_, i) => ({
id: i,
title: `Task ${i + 1}`,
status: i % 3 === 0 ? 'todo' : i % 3 === 1 ? 'in-progress' : 'done',
priority: i % 4 === 0 ? 'high' : i % 4 === 1 ? 'medium' : 'low'
}));
const columns: readonly Column<Row>[] = [
{ key: 'id', name: 'ID', width: 60, resizable: true },
{ key: 'title', name: 'Title', resizable: true, sortable: true },
{ key: 'status', name: 'Status', resizable: true, sortable: true },
{ key: 'priority', name: 'Priority', resizable: true, sortable: true }
];
function MyDataGrid() {
const [rows, setRows] = React.useState(initialRows);
const onRowsChange = (updatedRows: Row[]) => {
setRows(updatedRows);
};
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
columns={columns}
rows={rows}
onRowsChange={onRowsChange}
rowKeyGetter={(row) => row.id}
className="rdg-grid"
/>
</div>
);
}
export default MyDataGrid;
Debug
Known issues
breakingThe `textEditor` prop in column definitions was renamed to `renderTextEditor` for improved clarity and consistency in `v7.0.0-beta.59`.fixUpdate any `textEditor` prop usage in your column definitions to `renderTextEditor`.
affects: >=7.0.0-beta.59
gotchaWhen using `rolldown-vite` for CSS minification, there's a known bug with `lightningcss` (the default minifier) that affects `light-dark` syntax. This can lead to incorrect styling.fixAs a workaround, configure `rolldown-vite` to use `esbuild` for CSS minification by adding `cssMinify: 'esbuild'` to your `build` options in `vite.config.ts`.
affects: >=7.0.0-beta.X
breakingVersion 7 of `react-data-grid` has a peer dependency on `React 19.2+`. Using older versions of React may lead to compatibility issues or unexpected behavior.fixEnsure your project's `react` and `react-dom` versions meet the `^19.2` requirement specified in the peer dependencies.
affects: >=7.0.0-beta.X
breakingSeveral props related to filtering were removed in `v7.0.0-canary.48`, including `headerFiltersHeight`, `filters`, `onFiltersChange`, and `enableFilterRow`, along with `Column.filterRenderer` and exports like `FilterRendererProps`, `Filters`.fixRefactor your filtering logic as these built-in filtering props are no longer supported. You might need to implement custom header renderers for filtering or manage filtering logic externally.
affects: >=7.0.0-canary.48
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'react-data-grid/lib/styles.css'
The default stylesheet for `react-data-grid` was not imported.
fixAdd `import 'react-data-grid/lib/styles.css';` to your application's entry file or a global CSS file.
TypeError: DataGrid is not a function (or similar `Cannot read properties of undefined (reading 'DataGrid')` when using CommonJS)
`react-data-grid` v7 is published as ESM, and direct `require()` calls in a CommonJS environment without proper transpilation/bundling can fail.
fixEnsure your project is configured for ESM imports (e.g., using Babel or a modern bundler like Webpack/Vite that handles ESM). Use `import { DataGrid } from 'react-data-grid';` syntax. Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
This error often occurs when you have multiple versions of React installed, or if `react-data-grid` is using a different React instance than your application.
fixCheck your `package.json` and `yarn.lock`/`package-lock.json` for duplicate React installations. Use `npm dedupe` or `yarn why react` to identify and resolve conflicts, ensuring only one React version is used.
Upgrade
Version history
7.0.0-beta.59latest on npm
Audit
Dependencies
reactrequiredPeer dependency required for React component functionality.
react-domrequiredPeer dependency for rendering React components in the DOM.