React Data Grid Undo and redo

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

In this article

• Overview
• Basic demo
• Related keyboard shortcuts
• Related API reference

Overview

This feature allows you to revert changes made in the data grid. It is very useful in a normal day-to-day routine, especially when the change is unintentional. This feature stacks the changes made with the user interface of the grid. Modifications done programmatically are omitted.

The basic methods are undo() and redo(). The undo() method rolls back the last performed action, and the redo() method restores it.

This feature is provided by the UndoRedo plugin, and is enabled by default.

TIP

Not all user-triggered actions are covered by this feature. See the below list of actions that won't be added to the history of changes:

• Sort
• Filter
• Move column
• Move row

Basic demo

Make some changes to the grid below and the use the Ctrl/Cmd + Z command to redo the previous state. Then, use Ctrl/Cmd + Y (or Ctrl/Cmd + Shift + Z) to restore it.

import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); export const ExampleComponent = () => { return ( <HotTable data={[ ['A1', 'B1', 'C1', 'D1', 'E1'], ['A2', 'B2', 'C2', 'D2', 'E2'], ['A3', 'B3', 'C3', 'D3', 'E3'], ['A4', 'B4', 'C4', 'D4', 'E4'], ['A5', 'B5', 'C5', 'D5', 'E5'], ['A6', 'B6', 'C6', 'D6', 'E6'], ['A7', 'B7', 'C7', 'D7', 'E7'], ['A8', 'B8', 'C8', 'D8', 'E8'], ['A9', 'B9', 'C9', 'D9', 'E9'], ]} rowHeaders={true} colHeaders={true} stretchH="all" height="auto" licenseKey="non-commercial-and-evaluation" /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.4/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script> <div id="example" class="hot "></div>

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['A1', 'B1', 'C1', 'D1', 'E1'],
        ['A2', 'B2', 'C2', 'D2', 'E2'],
        ['A3', 'B3', 'C3', 'D3', 'E3'],
        ['A4', 'B4', 'C4', 'D4', 'E4'],
        ['A5', 'B5', 'C5', 'D5', 'E5'],
        ['A6', 'B6', 'C6', 'D6', 'E6'],
        ['A7', 'B7', 'C7', 'D7', 'E7'],
        ['A8', 'B8', 'C8', 'D8', 'E8'],
        ['A9', 'B9', 'C9', 'D9', 'E9'],
      ]}
      rowHeaders={true}
      colHeaders={true}
      stretchH="all"
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

Related keyboard shortcuts

Windows	macOS	Action	Excel	Sheets
Ctrl + Z	Cmd + Z	Undo the last action	✓	✓
Ctrl + Y	Cmd + Y	Redo the last action	✓	✓
Ctrl + Shift + Z	Cmd + Shift + Z	Redo the last action	✓	✓

Related API reference

• Configuration options:
  • undo
• Core methods:
  • clearUndo()
  • isRedoAvailable()
  • isUndoAvailable()
  • redo()
  • undo()
• Hooks:
  • afterRedo
  • afterRedoStackChange
  • afterUndo
  • afterUndoStackChange
  • beforeRedo
  • beforeRedoStackChange
  • beforeUndo
  • beforeUndoStackChange
• Plugins:
  • UndoRedo