# Task Spreadsheet block

> Spreadsheet Task Grid With Cell Range Editing, Custom Cell Controls, and Undo

Virtualized spreadsheet task grid with cell ranges, clipboard paste, drag-to-fill, in-cell selects and date pickers, and an undo stack instead of a save bar. Built on ReUI DataGrid, Frame and Cascader. For launch runbooks and Airtable style tables.

- Type: Pro block
- Category: [Editing](https://reui.io/blocks/data-grid/editing.md)
- Page: https://reui.io/blocks/data-grid/editing/data-grid-editing-5
- 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_block("data-grid-editing-5")`
- Built with: Alert Dialog, Avatar, Badge, Button, Calendar, Cascader, Checkbox, Combobox, Context Menu, Data Grid, Dialog, Dropdown Menu, Empty, Field, Filters, Frame, Input, Input Group, Popover, Scroll Area, Select, Separator, Sheet, Skeleton, Textarea, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

Task rows with a right click menu, a detail sheet, columns added by field type and 25 row batches loaded on scroll

## Agent notes

- `TASKS` seeds `INITIAL_STORE` for the reducer in `LaunchRunbookGridView`; edits, creates and deletes stay in memory
- `fetchMore` fakes a page request with a `FETCH_DELAY_MS` timer that grows `loadedCount` by `PAGE_SIZE`; call your API there
- The `updated` column gives `DateCell` a no-op `onChange`, so a date picked there is dropped; make it read only or wire it

## When not to use

- A short list typed in cell by cell and saved together with Save and Discard: use [Product Inventory](https://reui.io/blocks/data-grid/editing/data-grid-editing-2.md) (`get_block("data-grid-editing-2")`)
- Stock or purchasing lines needing a summary footer and an on-demand filter row: use [Stock Reorder Plan](https://reui.io/blocks/data-grid/editing/data-grid-editing-6.md) (`get_block("data-grid-editing-6")`)

## 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)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/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/data-grid-editing-5
```

## About Editing blocks

### When to use

- Admin tables whose values are typed into cells or rows, validated, then saved or discarded
- Spreadsheet work over long lists: cell ranges, paste, drag to fill and undo
- Small catalogs such as labels or pricing plans, where one record is edited and saved at a time

### When not to use

- Cell editing added to a table you already build from parts in your own layout: use [Data Grid](https://reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Rows that are only browsed, filtered and paged, with no values changed in the cells: use the [Base blocks](https://reui.io/blocks/data-grid/base.md)
- A plain list reordered by drag, with no form to add or rename its items: use [Sortable](https://reui.io/components/sortable.md) (`get_component("sortable")`)

### Agent notes

- Every page.tsx renders an sr-only `h1` inside a centered `min-h-svh` main; remove that wrapper when the view sits in your own page
- Rows start from a data file constant held in `useState` or `useReducer`, and nothing reaches a server; call your API where each edit or save commits

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.