# Shadcn Spreadsheet Editing

> Data grid with spreadsheet editing

- Type: example, free and open source (MIT)
- Component: [Data Grid](https://reui.io/components/data-grid.md)
- Page: https://reui.io/components/data-grid/c-data-grid-31
- Docs (Base UI): https://reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://reui.io/docs/components/radix/data-grid.md
- MCP: `get_example("c-data-grid-31")`
- Registry item: https://reui.io/r/styles/base-nova/c-data-grid-31.json
- Uses: Alert Dialog, Avatar, Badge, Button, Calendar, Card, Combobox, Context Menu, Data Grid, Popover, Select, Toast

## Best for

A product sheet with range selection, a fill handle, paste, built-in and custom cell editors and a right-click menu

## Agent notes

- Persist cell edits in `updateRows`, which paste, fill and every editor reach; `handleRowCreate`, `duplicateRow` and `deleteRow` call `setData` directly
- `autoResetPageIndex` stays false so a commit on page 2 does not snap back to page 1 each time `setData` replaces the rows

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), through shadcn Calendar

## Install

```bash
npx shadcn@latest add @reui/c-data-grid-31
```

## About Shadcn Data Grid

### When to use

- Admin and back office tables that sort, filter, paginate and select rows
- Spreadsheet style editing with cell selection, clipboard and inline edits
- Large record sets that need virtualized rows, columns or infinite scroll

### When not to use

- A short static list of rows with no sorting or paging: use [Table](https://reui.io/components/table.md) (`get_component("table")`)
- Records moved as cards between status columns: use [Kanban](https://reui.io/components/kanban.md) (`get_component("kanban")`)
- A folder or category hierarchy with no columns of data: use [Tree](https://reui.io/components/tree.md) (`get_component("tree")`)

### Agent notes

- With `manualPagination`, pass the server total to `useTable` as `rowCount` as well as `recordCount`, or the page buttons never render
- Give `useTable` a stable `getRowId` whenever rows can be pinned, reordered or virtualized
- Swap `DataGridTable` for `DataGridTableVirtual` when rows need virtualization or infinite scroll

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.