# Shadcn Editing blocks

> Inline create, edit, and delete cells for full CRUD workflows.

- Type: Pro blocks (Data Grid)
- Page: https://web.dev.reui.io/blocks/data-grid/editing
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/data-grid.md
- Blocks: 6
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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://web.dev.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://web.dev.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://web.dev.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

## 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), used by 5 of 6 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 5 of 6 blocks
- TanStack Virtual v3: [API reference](https://tanstack.com/virtual/v3/docs/api/virtualizer), [docs](https://tanstack.com/virtual/v3/docs/introduction), used by 1 of 6 blocks
- dnd kit v6: [API reference](https://dndkit.com/legacy/api-documentation/context-provider/dnd-context/), [docs](https://dndkit.com/legacy/introduction/getting-started/), used by 1 of 6 blocks (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 1 of 6 blocks
- React Hook Form v7: [API reference](https://react-hook-form.com/docs), [docs](https://react-hook-form.com/get-started), used by 1 of 6 blocks
- React Hook Form resolvers v5: [API reference](https://github.com/react-hook-form/resolvers#api), [docs](https://github.com/react-hook-form/resolvers), used by 1 of 6 blocks
- Zod v4: [API reference](https://zod.dev/api), [docs](https://zod.dev/), used by 1 of 6 blocks

## Blocks

- [Label Manager](https://web.dev.reui.io/blocks/data-grid/editing/data-grid-editing-1.md): Labels manager list with inline create and edit form, color picker, and drag-to-reorder rows. Best for a list of draggable label rows with one inline form to add or rename a label from 12 color swatches or a custom hex.
- [Product Inventory](https://web.dev.reui.io/blocks/data-grid/editing/data-grid-editing-2.md): Inline-editable product inventory data grid with per-cell validation and a dirty-state save bar. Best for product rows edited one cell at a time and saved in one batch, with a low stock flag at 10 units or fewer and a storefront switch.
- [Project Intake](https://web.dev.reui.io/blocks/data-grid/editing/data-grid-editing-3.md): Inline-editable project intake data grid with dirty-state Save and Discard bar. Best for intake requests with a 5 segment confidence meter, a due soon flag at 10 days or fewer, an approval switch and a priority filter.
- [Pricing Plan Editor](https://web.dev.reui.io/blocks/data-grid/editing/data-grid-editing-4.md): Pricing Plan Editor With Per-Row Edit Mode and Inline Validation. Best for plan rows that stay read only until Edit checks one out, locking every other row until it saves or cancels on its own.
- [Task Spreadsheet](https://web.dev.reui.io/blocks/data-grid/editing/data-grid-editing-5.md): Spreadsheet Task Grid With Cell Range Editing, Custom Cell Controls, and Undo. Best for task rows with a right click menu, a detail sheet, columns added by field type and 25 row batches loaded on scroll.
- [Stock Reorder Plan](https://web.dev.reui.io/blocks/data-grid/editing/data-grid-editing-6.md): Spreadsheet Reorder Plan With On-Demand Column Filter Row and Summary Footer. Best for stock lines with lettered columns, a bulk status change for checked rows, CSV or TSV export and keyboard undo and redo.

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