Undo / redo for grid edits

Live in demo 55-state-maintenance.

When

Maintain a history stack of cell edits; Ctrl+Z / Ctrl+Y replay backwards / forwards.

How

Key API surface:

• onCellValueChange records {rowId, field, before, after}
• Ctrl+Z replays inverse

See the demo source for the full implementation; this recipe pins the pattern + the surface so you can copy-paste it confidently. The doc page that explains the underlying feature in depth is linked from the recipes index.

More examples

Undo / redo (Ctrl+Z)

api.undo() / api.redo() + Ctrl+Z / Ctrl+Y / Ctrl+Shift+Z. 200-step bounded history; clearHistory after a successful save resets the baseline.

Undo across several edits

The stack is per grid and survives sorting - undo walks the edits, not the view. Change three cells, sort a column, then undo: the values come back in the order you set them.

<script lang="ts">
  import { SvGrid, type GridColumns, type SvGridApi } from '@svgrid/grid'

  type Person = { id: number; name: string; city: string; salary: number }

  const people: Person[] = [
    { id: 1, name: 'Ada Lovelace',   city: 'London',   salary: 142000 },
    { id: 2, name: 'Grace Hopper',   city: 'New York', salary: 168000 },
    { id: 3, name: 'Linus Torvalds', city: 'Portland', salary: 155000 },
  ]

  const columns: GridColumns<Person> = [
    { field: 'name',   header: 'Name',   width: 190, editorType: 'text' },
    { field: 'city',   header: 'City',   width: 150, editorType: 'text' },
    { field: 'salary', header: 'Salary', width: 140, editorType: 'number',
      format: { type: 'currency', currency: 'USD' } },
  ]

  let api = $state<SvGridApi<{}, Person> | null>(null)
  let edits = $state(0)
</script>

<div>
  <button type="button" onclick={() => api?.undo()}>Undo</button>
  <button type="button" onclick={() => api?.redo()}>Redo</button>
  <span>{edits} edit(s) made</span>
</div>

<SvGrid
  data={people}
  {columns}
  getRowId={(r) => String(r.id)}
  editable
  sortable
  onCellValueChange={() => (edits += 1)}
  onApiReady={(next) => (api = next)}
/>

See also

• Demo 55-state-maintenance source
• Demo 55-state-maintenance prompt sidecar - drop into an LLM context window
• Recipes index