Row operations

Row operations from two surfaces at once: the toolbar acts on the current row selection (falling back to the active cell's row), and the right-click context menu acts on the clicked row. The side panel prints the last onDataChange payload. Every row operation emits one change with source: "row-operation" and row-id-based insert/delete operations, which is what undo/redo and export consume.

pnpm dlx shadcn@latest add @gridcn/data-grid-row-ops-demo

What's in the demo

• Toolbar: Insert above / Insert below / Duplicate / Delete on the selected rows (insertRows(anchor, 1, position), duplicateRows(indices), deleteRows(indices))
• Right-click a row for the context menu's Insert/Duplicate/Delete items (needs createRow/duplicateRow on the provider, or those items are hidden)
• The Read-only toggle flips the provider's readOnly: every mutating surface disables
• Side panel: the last change's source and one line per operation (type → rowId)

The operation-shape contract

onDataChange={(next, change) => {
  // change.source === "row-operation" for insert/duplicate/delete
  // change.ops: id-keyed { type: "insert" | "delete", rowId, row, index }
}}

Operations are keyed by row id, not index, so the same change stays valid across sorts and filters. That's what makes undo/redo restore the exact previous state in one step.

Behavior reference

• Enable props: createRow / duplicateRow and what's hidden without them
• Default shortcuts: Ctrl/Cmd+Shift+F inserts below, Ctrl/Cmd+Shift+X duplicates
• Context menu: which items act on the whole selection
• Programmatic actions: the full action signatures

Related

• Action buttons: per-row Edit/Delete buttons in a pinned column
• Streaming: high-frequency updateCells batches