Skip to content
ZenGrid

Undo / Redo Edits

Enterprise

Introduction

Section titled “Introduction”

Every committed cell edit is recorded, so it can be undone and redone. The grid keeps that history for you; the premium undoRedo() helper adds the parts an app usually has to wire by hand — keyboard shortcuts (Ctrl/⌘+Z to undo, Ctrl+Y or Ctrl/⌘+Shift+Z to redo) and a single onChange callback to keep a toolbar’s buttons in sync:

import { undoRedo } from '@zengrid/enterprise';


const grid = new Zengrid(mount, { columns /* editable cells */ });


const history = undoRedo(grid, {
  onChange: (s) => {
    undoBtn.disabled = !s.canUndo;
    redoBtn.disabled = !s.canRedo;
  },
});


undoBtn.onclick = () => history.undo();
redoBtn.onclick = () => history.redo();
// Ctrl/⌘+Z and Ctrl+Y now work while the grid has focus.

Edit a few cells, then press Ctrl/⌘+Z — the value steps back; Ctrl+Y steps it forward again. Shortcuts are scoped to the grid’s viewport, so they never hijack the page’s own Ctrl+Z, and they stand aside while a cell editor is open (the editor keeps Ctrl+Z for its own text).

Helper options

Section titled “Helper options”

undoRedo(grid, options?):

Option Type Purpose
keyboard boolean Bind Ctrl/⌘+Z (undo) and Ctrl+Y / Ctrl/⌘+Shift+Z (redo). Default true — set false to bind your own keys.
target HTMLElement Element the shortcuts listen on (default: the grid viewport, so they only fire while the grid has focus).
onChange (state) => void Fires on every history change and once at attach — ideal for toolbar button state. state is { canUndo, canRedo, undoCount, redoCount }.

The returned handle exposes undo(), redo(), canUndo(), canRedo(), clear(), getState(), onChange(), and destroy() (unbinds everything).

History behaviour

Section titled “History behaviour”

How much history is kept, and whether rapid edits collapse into one step, is a core concern set on GridOptions.undoRedo — so it applies with or without the helper:

Option Type Purpose
enableCommandGrouping boolean Merge edits made in quick succession into a single undo step (default true). Set false so every edit is its own step.
groupingTimeWindow number Window (ms) within which edits group (default 1000).
maxHistorySize number Cap on remembered steps; older ones drop off (default 100).

Without the helper

Section titled “Without the helper”

The history itself is community and always on — reach it directly through grid.undoRedo (undo() / redo() / canUndo() / canRedo() / clear() / getUndoCount() / getRedoCount() / onChange()) to drive undo from your own buttons or key handler. The enterprise undoRedo() helper is the batteries-included layer on top: shortcuts + a toolbar hook in one call.

Try it live

Section titled “Try it live”

Double-click a Name/Role/Revenue cell, change it, press Enter. Then use Undo/Redo — the buttons enable/disable from onChange, and Ctrl/⌘+Z / Ctrl+Y work once you've clicked into the grid. Edit a few cells, then step all the way back and forward.

Next

Section titled “Next”
  • Validation — invalidEditMode and how a failing value is handled.
  • Batch Editing — apply and roll back many row changes as one transaction.