{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-data-grid"],"cli":null},"imports":["import { DataGrid } from 'react-data-grid';","import type { Column } from 'react-data-grid';","import 'react-data-grid/lib/styles.css';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}