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 or call API methods to move backward and forward through that history.

The plugin is enabled by default.

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example1',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: `
10
    <hot-table
11
      [settings]="hotSettings" [data]="hotData">
12
    </hot-table>
13
  `,
14
})
15
export class AppComponent {
16

17
  readonly hotData = [
18
    ['Ana García',     'Engineering', 'Senior Engineer',  95000, '2026-03-14'],
19
    ['James Okafor',   'Marketing',   'Product Manager',  88000, '2026-07-01'],
20
    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, '2026-01-10'],
21
    ['Maria Santos',   'HR',          'HR Specialist',    71000, '2026-11-20'],
22
    ['David Kim',      'Engineering', 'Backend Dev',      85000, '2026-08-05'],
23
    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, '2026-02-14'],
24
    ['Ahmed Hassan',   'Finance',     'Controller',       92000, '2026-06-30'],
25
    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, '2026-09-12'],
26
    ['Carlos Mendez',  'Sales',       'Account Manager',  74000, '2026-04-25'],
27
  ];
28

29
  readonly hotSettings: GridSettings = {
30
    rowHeaders: true,
31
    colHeaders: true,
32
    stretchH: 'all',
33
    height: 'auto',
34
    autoWrapRow: true,
35
    autoWrapCol: true,
36
  };
37
}
38
/* end-file */
39

40

41
/* file: app.config.ts */
42
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
43
import { registerAllModules } from 'handsontable/registry';
44
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
45

46
// register Handsontable's modules
47
registerAllModules();
48

49
export const appConfig: ApplicationConfig = {
50
  providers: [
51
    provideZoneChangeDetection({ eventCoalescing: true }),
52
    {
53
      provide: HOT_GLOBAL_CONFIG,
54
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
55
    },
56
  ],
57
};
58
/* end-file */

1
<div>
2
    <app-example1></app-example1>
3
</div>

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 (beforeRowMove, beforeColumnMove)
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.

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.

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)