React Data Grid (Grafana Fork)

React Data Grid is a feature-rich, TypeScript-first grid component for React 19 applications, maintained by Grafana as a fork of the original react-data-grid project. It renders only the rows and columns visible in the viewport, so grids with thousands of rows stay smooth, while still supporting frozen columns, multi-column sorting, row and column grouping, inline cell editing, and Excel-style copy/paste and drag-to-fill.

The component ships as a single tree-shakeable dependency (clsx is its only runtime dependency), with a zero-runtime CSS-in-JS styling layer, full keyboard navigation and accessibility support, right-to-left layout support, and light/dark theming built in via CSS classes.

What You Get

• A <DataGrid> component with typed Column<R, SR> definitions, plus a <TreeDataGrid> variant for hierarchical/grouped rows with expand-collapse and per-group summary rows
• Row and column virtualization out of the box, so only on-screen cells are rendered regardless of dataset size
• Inline cell editing via a built-in textEditor and an EditCell component, plus support for fully custom cell/header renderers
• Frozen columns, multi-column sorting, row selection, summary rows (top/bottom pinned), and dynamic per-row heights
• Keyboard-first interaction: roving tab index, full keyboard navigation, cell/row selection shortcuts, copy/paste, and Excel-style drag-to-fill

Common Use Cases

• Rendering large, sortable/filterable tabular dashboard panels where native HTML tables are too slow
• Editable, spreadsheet-like admin or back-office grids for bulk-reviewing and updating many rows
• Data-review workflows that lean on row grouping, summary rows, and multi-column sort to triage large result sets
• Embedded reporting UIs that need frozen columns to keep key fields visible across wide, many-column datasets

Under The Hood

Architecture The DataGrid component (in src/DataGrid.tsx) acts as an orchestration layer: it wires together dedicated hooks for calculated columns (useCalculatedColumns), viewport virtualization (useViewportColumns, useViewportRows), grid sizing (useGridDimensions), and keyboard focus (useRovingTabIndex), then delegates rendering to focused presentational components (Row, HeaderRow, GroupRow, SummaryRow, Cell, EditCell). A separate TreeDataGrid.tsx layers hierarchical/grouped-row behavior on top of the base grid rather than modifying it directly, and cross-cutting concerns like row selection are threaded through React context (RowSelectionChangeContext, DataGridDefaultRenderersContext). Selection state (SELECT vs EDIT modes) is modeled as a small discriminated union inline in the grid component. The result is solid separation of concerns, though the core orchestration file itself is large and still carries meaningful complexity.

Tech Stack Written in strict TypeScript targeting React 19, with clsx as the library’s only runtime dependency. Styling uses zero-runtime CSS-in-JS via Linaria (@linaria/core, @wyw-in-js), compiled to real CSS at build time and layered with native CSS cascade layers. The package is bundled with Rolldown (a Rust-based Rollup successor) into ESM-only output with generated type declarations, and its demo/docs website is built separately with Vite and TanStack Router. Testing runs on Vitest with @vitest/browser and Playwright for real browser-rendered component tests.

Code Quality The repository has an extensive test suite (over 30 dedicated test files) covering virtualization, keyboard navigation, row selection, copy/paste, drag-fill, sorting, RTL layout, tree grouping, and server-side rendering safety, executed as real browser tests rather than shallow unit tests. CI runs Biome, tsc type-checking, ESLint with zero tolerated warnings, Prettier formatting checks, a production build, a website build, and the full test suite with coverage uploaded to Codecov on every push and pull request — a strict, fully typed, lint-gated pipeline.

API Design The public API is declarative and prop-driven: consumers pass typed columns and rows, override any rendering layer through a Renderers object (renderCell, renderHeaderCell, renderRow) without forking the library, and reach for an imperative DataGridHandle ref only for scrollToCell/selectCell escape hatches. Virtualization, frozen columns, and keyboard accessibility come enabled without extra configuration, favoring a small number of well-typed props over a large plugin or configuration system. As a maintained fork of the established react-data-grid project rather than a new design, its API choices build on proven patterns instead of introducing new ones.