react-data-grid

react-data-grid is a virtualized data grid component for React, built to render large datasets efficiently by only mounting rows and columns visible within the viewport. It ships with frozen columns, multi-column sorting, row and column grouping, summary rows, cell editing, copy/paste, cell-fill dragging, and keyboard accessibility, all strictly typed with TypeScript and tree-shakeable with zero external runtime dependencies.

Originally derived from Prometheus Research’s react-grid and maintained by Comcast since 2015, it targets modern React (19.2+) with evergreen-browser and SSR support, light/dark mode via native color-scheme, and right-to-left layout support.

What You Get

• Row and column virtualization so only on-screen cells are rendered, keeping large datasets performant
• Built-in frozen columns, multi-column sorting, column spanning and grouping, and summary rows
• Cell editing, copy/paste, and drag-to-fill interactions with customizable renderers for every cell type
• Zero external runtime dependencies and tree-shaking support to keep bundle size minimal
• Keyboard accessibility, RTL layout support, and light/dark mode via native color-scheme

Common Use Cases

• Displaying large, sortable, editable datasets (admin panels, spreadsheets, back-office tools) without pagination
• Building spreadsheet-like editing UIs with copy/paste and fill-handle interactions
• Rendering grouped or hierarchical tabular data with summary/aggregate rows
• Embedding an accessible, keyboard-navigable data table in dashboards and internal tools

Under The Hood

Architecture - The grid is composed around a central DataGrid.tsx component that manages viewport state and delegates rendering to per-row/per-cell components (Row.tsx, Cell.tsx, HeaderCell.tsx, GroupRow.tsx, SummaryRow.tsx); a companion TreeDataGrid.tsx layers hierarchical/grouped rendering on top of the same primitives. Virtualization is implemented directly rather than delegated to a third-party windowing library, computing visible row/column ranges from scroll position and only rendering DOM nodes for cells intersecting the viewport, which is what keeps large-dataset scrolling smooth. Editors (editors/) and cell renderers (cellRenderers/) are pluggable per column via the Columns.tsx type definitions, and hooks (hooks/) encapsulate cross-cutting concerns like selection, keyboard navigation, and column resizing. Tech Stack - Pure TypeScript/React with react and react-dom 19.2 as the only peer dependencies and no runtime dependencies at all; styling ships as plain CSS (lib/styles.css) using native color-scheme for theming rather than a CSS-in-JS runtime. The build pipeline uses tsdown to produce the published lib/ output and Vite to serve the documentation/examples website. Code Quality - Tests run via Vitest across two projects (browser and node), including a visual test suite, and a failOnConsole.ts setup file that fails tests on unexpected console output, indicating a strict internal quality bar. TypeScript types for columns, rows, and renderers are expressed as generics, giving consumers strong compile-time guarantees about the shape of the data passed into the grid. API Design - The primary integration surface is a single <DataGrid columns={} rows={} /> component with a well-documented Column type for per-column configuration (renderers, editors, sorting, grouping), keeping the common path simple while still exposing deep customization through renderer/editor props for advanced cases; the maintained examples website doubles as living API documentation.