react-data-grid

The DataGrid component is designed to handle large datasets efficiently while offering a rich set of features for customization and interactivity.

Table of Contents

• Features
• Links
• Installation
• Getting Started
• Styling and Customization
• Keyboard Shortcuts
• API Reference

Features

• React 19.2+ support
• Evergreen browsers and server-side rendering support
• Tree-shaking support with no external dependencies to keep your bundles slim
• Great performance thanks to virtualization: columns and rows outside the viewport are not rendered
• Strictly typed with TypeScript
• Keyboard accessibility
• Light and dark mode support out of the box via color-scheme
• Frozen columns: Freeze columns to keep them visible during horizontal scrolling.
• Column resizing
• Multi-column sorting
  • Click on a sortable column header to toggle between its ascending/descending sort order
  • Ctrl+Click / Meta+Click to sort an additional column
• Column spanning
• Column grouping
• Row selection
• Row grouping
• Summary rows
• Dynamic row heights
• No rows fallback
• Cell formatting
• Cell editing
• Cell copying / pasting
• Cell value dragging / filling
• Customizable renderers
• Right-to-left (RTL) support

Links

• Examples website
  • Source code
• Releases

Installation

Install react-data-grid using your favorite package manager:

# npm
npm install react-data-grid
# Vite+
vp add react-data-grid
# pnpm
pnpm add react-data-grid
# Yarn
yarn add react-data-grid
# Bun
bun add react-data-grid

Additionally, import the default styles in your application:

import 'react-data-grid/lib/styles.css';

react-data-grid is published as ECMAScript modules for evergreen browsers, bundlers, and server-side rendering.

Important
Vite 8+ uses Lightning CSS by default to minify CSS, and Lightning CSS has a bug minifying the light-dark() syntax. You can tweak the cssMinify or cssTarget settings as a workaround.

build: {
  cssMinify: 'esbuild', // requires the `esbuild` package to be installed
  // or
  cssTarget: 'esnext'
}

Getting Started

Here is a basic example of how to use react-data-grid in your React application:

import 'react-data-grid/lib/styles.css';

import { DataGrid, type Column } from 'react-data-grid';

interface Row {
  id: number;
  title: string;
}

const columns: readonly Column<Row>[] = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' }
];

const rows: readonly Row[] = [
  { id: 0, title: 'Example' },
  { id: 1, title: 'Demo' }
];

function App() {
  return <DataGrid columns={columns} rows={rows} />;
}

Styling and Customization

The DataGrid provides multiple ways to customize its appearance and behavior.

Light/Dark Themes

The DataGrid supports both light and dark color schemes out of the box using the light-dark() CSS function. The theme automatically adapts based on the user's system preference when color-scheme: light dark; is set.

To enforce a specific theme, we recommend setting the standard color-scheme CSS property on the :root:

:root {
  color-scheme: light; /* or 'dark', or 'light dark' for auto */
}

Alternatively, you can add the rdg-light or rdg-dark class to individual grids:

// Force light theme
<DataGrid className="rdg-light" columns={columns} rows={rows} />

// Force dark theme
<DataGrid className="rdg-dark" columns={columns} rows={rows} />

Forced Colors Mode

In forced colors mode, such as Windows contrast themes, the DataGrid uses system colors for the active cell, row selection, and the drag handle, so they follow the user's palette. Overriding --rdg-selection-color or --rdg-checkbox-focus-color in your own styles also overrides their forced colors values outside selected rows, so wrap such overrides in @media not (forced-colors: active).

CSS Variables

The DataGrid supports the following CSS variables for customization:

This is the beginning of the README. Read the rest at the original. Read the full README ↗