{"id":15178,"library":"react-data-grid","title":"React Data Grid","description":"react-data-grid is a high-performance, feature-rich data grid component for React applications, currently in `7.0.0-beta.59`. It is engineered for efficiency with large datasets through virtualization, rendering only visible rows and columns. The library offers extensive customization options, including frozen columns, multi-column sorting, row and column grouping, row selection, cell editing, and adaptable renderers. It ships with comprehensive TypeScript support, ensuring type safety across its API. `react-data-grid` supports React 19.2+, modern browsers, and server-side rendering, prioritizing bundle size efficiency with tree-shaking and no external runtime dependencies. The project maintains an active development pace with frequent beta releases, incorporating features like keyboard accessibility, light/dark modes, and RTL support, though a stable v7 release date is not yet scheduled.","status":"active","version":"7.0.0-beta.59","language":"javascript","source_language":"en","source_url":"https://github.com/Comcast/react-data-grid","tags":["javascript","react","data grid","typescript"],"install":[{"cmd":"npm install react-data-grid","lang":"bash","label":"npm"},{"cmd":"yarn add react-data-grid","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-data-grid","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for React component functionality.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components in the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"react-data-grid v7+ is published as ECMAScript modules (ESM) and is not directly compatible with CommonJS `require()` without a proper bundler setup.","wrong":"const DataGrid = require('react-data-grid').DataGrid;","symbol":"DataGrid","correct":"import { DataGrid } from 'react-data-grid';"},{"note":"Use `import type` for importing types like `Column` to ensure they are stripped from the JavaScript bundle.","wrong":"import { Column } from 'react-data-grid';","symbol":"Column","correct":"import type { Column } from 'react-data-grid';"},{"note":"The default styles must be imported separately. This import should typically be done once in your application's entry file or a global stylesheet.","symbol":"styles.css","correct":"import 'react-data-grid/lib/styles.css';"}],"quickstart":{"code":"import React from 'react';\nimport { DataGrid, type Column } from 'react-data-grid';\nimport 'react-data-grid/lib/styles.css';\n\ninterface Row {\n  id: number;\n  title: string;\n  status: 'todo' | 'in-progress' | 'done';\n  priority: 'low' | 'medium' | 'high';\n}\n\nconst initialRows: Row[] = Array.from({ length: 50 }, (_, i) => ({\n  id: i,\n  title: `Task ${i + 1}`,\n  status: i % 3 === 0 ? 'todo' : i % 3 === 1 ? 'in-progress' : 'done',\n  priority: i % 4 === 0 ? 'high' : i % 4 === 1 ? 'medium' : 'low'\n}));\n\nconst columns: readonly Column<Row>[] = [\n  { key: 'id', name: 'ID', width: 60, resizable: true },\n  { key: 'title', name: 'Title', resizable: true, sortable: true },\n  { key: 'status', name: 'Status', resizable: true, sortable: true },\n  { key: 'priority', name: 'Priority', resizable: true, sortable: true }\n];\n\nfunction MyDataGrid() {\n  const [rows, setRows] = React.useState(initialRows);\n\n  const onRowsChange = (updatedRows: Row[]) => {\n    setRows(updatedRows);\n  };\n\n  return (\n    <div style={{ height: 400, width: '100%' }}>\n      <DataGrid\n        columns={columns}\n        rows={rows}\n        onRowsChange={onRowsChange}\n        rowKeyGetter={(row) => row.id}\n        className=\"rdg-grid\"\n      />\n    </div>\n  );\n}\n\nexport default MyDataGrid;\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Update any `textEditor` prop usage in your column definitions to `renderTextEditor`.","message":"The `textEditor` prop in column definitions was renamed to `renderTextEditor` for improved clarity and consistency in `v7.0.0-beta.59`.","severity":"breaking","affected_versions":">=7.0.0-beta.59"},{"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`.","message":"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.","severity":"gotcha","affected_versions":">=7.0.0-beta.X"},{"fix":"Ensure your project's `react` and `react-dom` versions meet the `^19.2` requirement specified in the peer dependencies.","message":"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.","severity":"breaking","affected_versions":">=7.0.0-beta.X"},{"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.","message":"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`.","severity":"breaking","affected_versions":">=7.0.0-canary.48"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add `import 'react-data-grid/lib/styles.css';` to your application's entry file or a global CSS file.","cause":"The default stylesheet for `react-data-grid` was not imported.","error":"Module not found: Error: Can't resolve 'react-data-grid/lib/styles.css'"},{"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.","cause":"`react-data-grid` v7 is published as ESM, and direct `require()` calls in a CommonJS environment without proper transpilation/bundling can fail.","error":"TypeError: DataGrid is not a function (or similar `Cannot read properties of undefined (reading 'DataGrid')` when using CommonJS)"},{"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.","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.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm"}