Undo / Redo

Track edit history and allow users to undo/redo changes.

How It Works

Yable ships a real UndoStack that records cell-edit actions and supports push/undo/redo with a configurable stack size. createTable() wires undo/redo into the table API when enableUndoRedo: true; UndoStack and createUndoRedoIntegration are also exported from @zvndev/yable-core for custom UI such as toolbar buttons or keyboard shortcuts.

React <Table> handles Ctrl/Cmd+Z, Ctrl+Y, and Ctrl/Cmd+Shift+Z when enableUndoRedo is on and focus is in the grid. For visible controls, render <UndoRedoControls /> inside <Table> or pass it the table instance directly:

const table = useTable({
  data,
  columns,
  enableUndoRedo: true,
})

return (
  <Table table={table}>
    <UndoRedoControls />
  </Table>
)

import { UndoStack } from '@zvndev/yable-core'

const stack = new UndoStack(50) // maxSize = 50 actions

stack.push({
  type: 'cell-edit',
  rowId: 'row-1',
  columnId: 'name',
  oldValue: 'Alice',
  newValue: 'Alice Johnson',
  timestamp: Date.now(),
})

const undone = stack.undo() // UndoAction | undefined — moves to redo stack
const redone = stack.redo() // UndoAction | undefined — moves back to undo stack

Pending-value "undo"

For transient, uncommitted edits, the editing system also lets you discard or commit pending values without touching the undo stack:

table.setPendingValue('row-1', 'name', 'New Name')
table.hasPendingChanges() // true
table.discardAllPending() // drop uncommitted edits
table.commitAllPending() // persist via onEditCommit

---