# React Data Grid

> [View this product on lib-pro](https://lib-pro-3f8437.gitlab.io/libs/react-data-grid) · The data table your framework should have shipped with.

**Outcome:** Cut your admin UI from 3 weeks to 3 days.

A polished, performant data table component. Sorting, filtering, pagination, inline editing, row selection, drag-to-reorder, export to CSV/Excel. Built on TanStack Table but saves you weeks of UI work.

**Price:** £15 — lifetime · **Category:** React Library · **Tech:** React 18+, TypeScript, TanStack Table, Tailwind CSS

| Metric | Value |
|--------|-------|
| Rows at 60fps | 100k+ |
| Time to first grid | 10 min |
| Export formats | 3 |

## Quick start

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

- # Drop into your routes
- npm run dev
- # Try sort, filter, edit, export

## Code preview

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

interface User {
  id: string
  name: string
  email: string
  role: 'admin' | 'member'
  createdAt: string
}

const columns: Column<User>[] = [
  { id: 'name', header: 'Name', sortable: true, editable: true },
  { id: 'email', header: 'Email', sortable: true, editable: true },
  { id: 'role', header: 'Role', filter: true },
  { id: 'createdAt', header: 'Joined', type: 'date' },
]

export default function UsersTable({ rows }: { rows: User[] }) {
  return (
    <DataGrid
      columns={columns}
      rows={rows}
      onRowEdit={saveToServer}
      selectable
      exportable
    />
  )
}
```

## Use cases

### 1. Admin user management

List, search, filter, edit, bulk-delete, export — every admin action, in one grid, no glue code.

**Outcome:** The 'users' page takes an afternoon.

### 2. Customer-facing dashboards

Show the user their own data — transactions, projects, tickets — with inline edits and instant save.

**Outcome:** Dashboards that don't feel like spreadsheets.

### 3. Internal ops & finance

100k+ row datasets with server-side pagination, sort, and filter. Export to Excel for the CFO.

**Outcome:** The reports your CFO keeps asking for.

### 4. Data explorers

Type-safe column definitions, custom cell renderers, column groups. Build a Notion-grade data UI.

**Outcome:** Stop writing the same table component twice.

## Built for

- Frontend engineers building admin UI
- Full-stack devs who hate writing tables
- Teams standardising on TanStack Table
- Anyone shipping a CRUD app

## Highlights

### 100k rows, no jank

Row virtualization is on by default. Scroll a 100k-row table on a mid-range laptop and watch the frame rate hold.

### Click to edit anything

Cells are editable out of the box. Hook `onRowEdit` to your server and you've got a CRUD UI in five minutes.

### Export built in

CSV, Excel, PDF — all one click, all respecting the current sort & filter. The reports your PM keeps asking for are already there.

## What's in the box

- `DataGrid component` — the main grid
- `useDataGrid hook` — for custom UIs
- `Type-safe Column API` — full TypeScript inference
- `CSV / Excel / PDF export` — respects sort + filter
- `Inline edit handlers` — cell + row level
- `Server-side data adapter` — TanStack Query, SWR, or fetch
- `Column groups & pinning` — left/right, resizable
- `Full source + docs` — no obfuscation

## Works with

- **React 18+** (peer dep)
- **TanStack Table 8+** (peer dep)
- **TanStack Query** (server data)
- **SWR / fetch** (server data)
- **Vite / Next.js / Remix** (tested)
- **Tailwind CSS** (styling)

## Features

- Virtualized rows for 100k+ datasets
- Inline cell editing (click to edit)
- Column sorting, filtering, resizing, reordering
- Row selection (single & multi)
- Pagination & infinite scroll
- Export to CSV, Excel, PDF
- Dark mode & responsive
- Type-safe column definitions

## FAQ

### Does it work without TanStack Table?

No — TanStack Table is a peer dep. It's the best headless table library for React and it's tiny. We do the UI heavy-lifting on top of it.

### Can I bring my own server-side data fetching?

Yes. Pass a `fetcher` prop and the grid handles pagination, sort, and filter params for you. Bring TanStack Query, SWR, or fetch — your call.

### Does it support column groups and pinned columns?

Yes — `columnGroups`, `pinned: 'left' | 'right'`, and resizable handles are all first-class. The API matches the conventions of spreadsheet tools.

### What about Excel-style formulas?

No. This is a data grid, not a spreadsheet. If you need formula evaluation, use a dedicated library alongside.