Data Grid

A spreadsheet surface with lettered columns, numbered rows, an active cell, range selection, in-cell editing and copy and paste. Built on TanStack Table and the Table primitive.

Base UI React Aria Radix UI

	A	B	C	D
1	Date	Vendor	Category	Amount
2	Oct 1	Chilliwack Office Supply	Office	$48.20
3	Oct 2	Telus	Phone	$95.00
4	Oct 4	Adobe	Software	$29.99
5	Oct 7	Petro-Canada	Travel	$71.35
6	Oct 9	Mount Cheam Coffee	Meals	$18.75
7	Oct 12	Figma	Software	$22.00
8	Oct 15	BC Hydro	Utilities	$112.48
9	Oct 18	Staples	Office	$36.10
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

D2:D9Sum: $433.87

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/data-grid.json

Usage

import { DataGrid, type GridCellChange } from "@/components/ui/data-grid"

const [cells, setCells] = React.useState<Record<string, string>>({})
 
const getRawValue = React.useCallback((row: number, col: number) => cells[`${row}:${col}`] ?? "", [cells])
const getCell = React.useCallback(
  (row: number, col: number) => {
    const raw = cells[`${row}:${col}`]
    return raw ? { content: raw } : null
  },
  [cells]
)
 
<DataGrid
  rowCount={100}
  columnCount={26}
  getCell={getCell}
  getRawValue={getRawValue}
  onCellsChange={(changes: GridCellChange[]) => {
    setCells((prev) => {
      const next = { ...prev }
      for (const { row, col, value } of changes) next[`${row}:${col}`] = value
      return next
    })
  }}
  frozenRows={1}
  className="h-96"
/>

Use Data Table for records: one row per item, with sorting, filters and pages. Use Data Grid when people work on cells: pick a cell, type, select a range, copy it into another app. The Sheets block is a full spreadsheet on it.

Keyboard and mouse

Move. Arrows, Tab and Shift Tab, Home and End, Page Up and Page Down. Ctrl or Cmd with an arrow jumps to the edge.
Select. Shift with an arrow or a click, or drag across cells. Click a letter or number to take the whole column or row, and the corner for everything. Ctrl A selects all.
Edit. Start typing to replace a cell, or press Enter, F2 or double click to edit what is there. Enter saves and moves down, Tab saves and moves right, Escape cancels.
Clipboard. Ctrl C, X and V copy, cut and paste ranges as tab separated text, so they round trip with Google Sheets and Excel. One copied value pasted over a range fills it. Delete clears the range.
Columns. Drag the edge of a column header to resize it, and double click the edge to reset it.

On touch, a tap selects a cell, a second tap edits it, and swipes scroll the grid.

Props

Data. rowCount and columnCount. getCell(row, col) returns what a cell shows: content, align, wrap, className and style, or null for empty. getRawValue returns what it edits and copies, such as a formula. Keep both stable with useCallback, since rows only repaint when they change.
Changes. onCellsChange gets every edit, paste and clear as one batch of { row, col, value }.
Selection. selection and onSelectionChange, or defaultSelection. The anchor is the active cell and focus is the other corner. gridRange, rangeName and cellName turn them into "B3:D9" style names.
Layout. columnSizing and onColumnSizingChange by column letter, defaultColumnWidth, rowHeight, zoom, frozenRows, frozenColumns, merges for horizontal merges keyed "row:col", and gridlines.
Editing extras. onDraftChange reports the draft while a cell is open, so a formula bar can follow it. getSuggestions shows a list under the editor, picked with the arrows and Tab. transformPaste and onCopyRange let you rewrite pasted values, like shifting formula references.
Ref. focus(), edit(initial), select(selection), copy(cut) and paste(text).

The grid scrolls on both axes inside its own frame, with the header row and row numbers pinned and the edges fading where there is more to see.

Countdown Data Table

On This Page

Installation Usage Data Grid or Data Table Keyboard and mouse Props