Undo and redo

Revert and restore your changes, using the undo and redo features.

Overview

The UndoRedo plugin records supported grid operations and stores them in undo and redo stacks.

You can use keyboard shortcuts, the context menu, or API methods to move backward and forward through that history.

The plugin is enabled by default. When the context menu is enabled, its default items include Undo and Redo.

Basic demo

Make a few edits in the grid.

Press Ctrl/⌘+Z to undo your last action.

Press Ctrl/⌘+Y (or Ctrl/⌘+Shift+Z) to redo it.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
// Register all Handsontable's modules.
4
registerAllModules();
5
const container = document.querySelector('#example');
6
new Handsontable(container, {
7
    data: [
8
        ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],
9
        ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],
10
        ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],
11
        ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],
12
        ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],
13
        ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],
14
        ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],
15
        ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],
16
        ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],
17
    ],
18
    rowHeaders: true,
19
    colHeaders: true,
20
    stretchH: 'all',
21
    height: 'auto',
22
    autoWrapRow: true,
23
    autoWrapCol: true,
24
    licenseKey: 'non-commercial-and-evaluation',
25
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example')!;
8

9
new Handsontable(container, {
10
  data: [
11
    ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],
12
    ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],
13
    ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],
14
    ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],
15
    ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],
16
    ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],
17
    ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],
18
    ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],
19
    ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],
20
  ],
21
  rowHeaders: true,
22
  colHeaders: true,
23
  stretchH: 'all',
24
  height: 'auto',
25
  autoWrapRow: true,
26
  autoWrapCol: true,
27
  licenseKey: 'non-commercial-and-evaluation',
28
});

What UndoRedo tracks

UndoRedo tracks operations that emit dedicated hooks and register an action in the plugin.

The built-in tracked actions include:

Cell value changes (beforeChange)
Row and column insertion/removal (afterCreateRow, afterCreateCol, beforeRemoveRow, beforeRemoveCol)
Column sorting (beforeColumnSort)
Filtering (beforeFilter)
Row and column moving (afterRowMove, afterColumnMove)
Cell moving and copying (beforeMoveCells, afterMoveCells), when the moveCells option is enabled
Merge and unmerge (beforeMergeCells, afterUnmergeCells)
Alignment changes (beforeCellAlignment)

Batch edits and multi-cell changes

For data edits, UndoRedo records only effective changes:

Entries nullified by other beforeChange hooks are skipped.
If a single cell changed, UndoRedo restores selection to that cell.
If multiple cells changed in one operation, UndoRedo restores the full selection range.

When you undo a data-change action, Handsontable can also remove rows or columns that were created as a side effect of that edit, and then restore the previous selection.

An undo puts each value back on the row you edited, even when that row moved or is no longer visible. If a filter or row trimming hides the row after your edit, Handsontable writes the value straight to the source data. Three things follow from that:

The beforeChange, afterChange, and modifyData hooks do not run for those values. afterSetSourceDataAtCell and modifySourceData run instead, so a listener that vetoes, rewrites, or normalizes edited values has to cover the source hooks as well.
The write does not re-run the filter, so the row stays hidden until you filter again.
Handsontable identifies the row by its position in the source data, not by a stable ID. If you remove rows without going through the undo stack, an undo recorded before that removal can land on a neighboring row.

Hooks and stack lifecycle

UndoRedo exposes hooks for both stack updates and action execution:

Stack update hooks: beforeUndoStackChange, afterUndoStackChange, beforeRedoStackChange, and afterRedoStackChange.
Action hooks: beforeUndo, afterUndo, beforeRedo, and afterRedo.

You can return false from beforeUndoStackChange, beforeUndo, or beforeRedo to block recording or execution.

Calling loadData() clears both stacks. Calling updateData() does not, so an undo that runs after it can restore values from the previous dataset. Call clear() yourself if you don’t want that. Disabling the plugin or destroying the grid also clears both stacks.

Programmatic control

Use the plugin instance to inspect and control history:

1
const undoRedo = hot.getPlugin('undoRedo');
2

3
if (undoRedo.isUndoAvailable()) {
4
  undoRedo.undo();
5
}
6

7
if (undoRedo.isRedoAvailable()) {
8
  undoRedo.redo();
9
}
10

11
undoRedo.clear();

Registering a custom undoable action

Use done() to add an action to the undo stack that isn’t tracked by default, such as a direct setCellMeta() update.

Call done() with a function that returns an action object. The action object needs an undo() method and a redo() method, each receiving the Handsontable instance and a callback to call once the operation finishes.

1
function setCellBackgroundColor(row, col, className) {
2
  const undoRedo = hot.getPlugin('undoRedo');
3
  const previousClassName = hot.getCellMeta(row, col).className;
4

5
  undoRedo.done(() => ({
6
    actionType: 'cellBackgroundColor',
7
    undo(instance, callback) {
8
      instance.setCellMeta(row, col, 'className', previousClassName);
9
      instance.render();
10
      callback();
11
    },
12
    redo(instance, callback) {
13
      instance.setCellMeta(row, col, 'className', className);
14
      instance.render();
15
      callback();
16
    },
17
  }), 'cellBackgroundColor');
18

19
  hot.setCellMeta(row, col, 'className', className);
20
  hot.render();
21
}

After you call setCellBackgroundColor(), pressing Ctrl/⌘+Z reverts the color change, and pressing Ctrl/⌘+Y reapplies it.

Known limitations

UndoRedo does not record every possible operation.

The following operations are not tracked by default:

Column resizing and row resizing
Hiding columns and hiding rows
Trimming rows
Generic cell metadata changes that don’t register an UndoRedo action (for example, most direct setCellMeta() updates)
Merges applied from the mergeCells setting. UndoRedo tracks the merges and unmerges that run through the context menu, the merge keyboard shortcut, and the plugin’s merge() and unmerge() methods.
Rows and columns that Handsontable adds on its own to satisfy minRows, minCols, minSpareRows, or minSpareCols. These carry the auto source, which UndoRedo skips. It also skips the UndoRedo.undo and UndoRedo.redo sources, so its own operations never re-enter the stack.