React Data Grid

Common errors

• Module not found: Error: Can't resolve 'react-data-grid/lib/styles.css'

  cause The default stylesheet for `react-data-grid` was not imported.
  fix Add `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)

  cause `react-data-grid` v7 is published as ESM, and direct `require()` calls in a CommonJS environment without proper transpilation/bundling can fail.
  fix Ensure 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.

  cause 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.
  fix Check 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.

Warnings

• breaking The `textEditor` prop in column definitions was renamed to `renderTextEditor` for improved clarity and consistency in `v7.0.0-beta.59`.
  Fix: Update any `textEditor` prop usage in your column definitions to `renderTextEditor`.
• gotcha When 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.
  Fix: As a workaround, configure `rolldown-vite` to use `esbuild` for CSS minification by adding `cssMinify: 'esbuild'` to your `build` options in `vite.config.ts`.
• breaking Version 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.
  Fix: Ensure your project's `react` and `react-dom` versions meet the `^19.2` requirement specified in the peer dependencies.
• breaking Several 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`.
  Fix: Refactor 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.

Install

• npm install react-data-grid npm
• yarn add react-data-grid yarn
• pnpm add react-data-grid pnpm

Imports

• DataGrid
  wrong:

  const DataGrid = require('react-data-grid').DataGrid;

  correct:

  import { DataGrid } from 'react-data-grid';

  react-data-grid v7+ is published as ECMAScript modules (ESM) and is not directly compatible with CommonJS `require()` without a proper bundler setup.
• Column
  wrong:

  import { Column } from 'react-data-grid';

  correct:

  import type { 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.

Quickstart

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;