React Data Grid

React Data Grid

A polished, performant data table with inline editing, sorting, filtering, selection, and export.

Quick Start

npm install react-data-grid @tanstack/react-table

Usage

Basic table

import { DataGrid } from 'react-data-grid'

const columns = [
  { id: 'name', header: 'Name', accessorKey: 'name' },
  { id: 'email', header: 'Email', accessorKey: 'email' },
  { id: 'age', header: 'Age', accessorKey: 'age' },
]

const data = [
  { name: 'Alice', email: 'alice@example.com', age: 30 },
  { name: 'Bob', email: 'bob@example.com', age: 25 },
]

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

With all features

<DataGrid
  columns={columns}
  data={largeDataset}
  pageSize={50}
  sorting={true}
  filtering={true}
  selection="multi"
  inlineEditing={true}
  exportable={true}
  striped={true}
  darkMode={false}
  onRowClick={(row) => console.log('Clicked:', row)}
/>

Inline editing

Double-click any cell to edit. Supports text, number, and select editors.

const columns = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
    enableEditing: true,
  },
  {
    id: 'status',
    header: 'Status',
    accessorKey: 'status',
    enableEditing: true,
    cellEditor: ({ value, onSave, onCancel }) => (
      <select
        value={String(value)}
        onChange={(e) => onSave(e.target.value)}
        onBlur={(e) => onSave(e.target.value)}
        autoFocus
      >
        <option value="active">Active</option>
        <option value="inactive">Inactive</option>
        <option value="pending">Pending</option>
      </select>
    ),
  },
]

Export

import { exportToCSV, exportToExcel } from 'react-data-grid'

// Via toolbar buttons
<DataGrid columns={cols} data={data} exportable={true} />

// Or programmatically
exportToCSV(data, columns, 'my-export.csv')
exportToExcel(data, columns, 'my-export.xls')

API

DataGrid

ColumnDef