Undo / Redo

ReoGrid Web tracks edit history and supports undo/redo through keyboard shortcuts and a programmatic API.

Keyboard shortcuts

ActionManager API

Control undo/redo programmatically through the ActionManager.

const { actionManager } = grid;

// Undo
actionManager.undo();

// Redo
actionManager.redo();

// Check state
actionManager.canUndo(); // boolean
actionManager.canRedo(); // boolean

// Clear history
actionManager.clear();

Monitoring undo/redo state

actionManager.onUndoRedoChange(() => {
  console.log('canUndo:', actionManager.canUndo());
  console.log('canRedo:', actionManager.canRedo());
});

Cell operations via Actions

When operations are executed through the ActionManager, they automatically support undo/redo.

Changing cell values

import { SetCellInputAction } from '@reogrid/pro';

actionManager.execute(
  new SetCellInputAction(0, 0, 'Hello')
);

Changing cell styles

import { SetCellStyleAction, createSetRangeStyleAction } from '@reogrid/pro';

// Single cell
actionManager.execute(
  new SetCellStyleAction(0, 0, { bold: true })
);

// Range — the factory takes a name and an explicit cell list
const cells: Array<{ row: number; column: number }> = [];
for (let row = 0; row <= 4; row++) {
  for (let column = 0; column <= 3; column++) {
    cells.push({ row, column });
  }
}

actionManager.execute(
  createSetRangeStyleAction('Set range style', cells, { backgroundColor: '#dbeafe' })
);

Changing column widths / row heights

import { SetColumnWidthAction, SetRowHeightAction } from '@reogrid/pro';

actionManager.execute(new SetColumnWidthAction(0, 200));
actionManager.execute(new SetRowHeightAction(0, 40));

Cell merging

import { MergeCellsAction, UnmergeCellsAction } from '@reogrid/pro';

actionManager.execute(new MergeCellsAction(0, 0, 0, 4));
actionManager.execute(new UnmergeCellsAction(0, 0, 0, 4));

Borders

import { SetRangeBorderAction } from '@reogrid/pro';

actionManager.execute(
  new SetRangeBorderAction(0, 0, 4, 3, {
    style: 'solid',
    color: '#000',
  })
);

Inserting / deleting rows and columns

import {
  InsertRowsAction, DeleteRowsAction,
  InsertColumnsAction, DeleteColumnsAction,
} from '@reogrid/pro';

actionManager.execute(new InsertRowsAction(2, 3));
actionManager.execute(new DeleteRowsAction(2, 3));
actionManager.execute(new InsertColumnsAction(1, 2));
actionManager.execute(new DeleteColumnsAction(1, 2));

Showing / hiding rows and columns

import { SetRowHiddenAction, SetColumnHiddenAction } from '@reogrid/pro';

actionManager.execute(new SetRowHiddenAction([2, 3], true));
actionManager.execute(new SetColumnHiddenAction([1], false));

Sorting

import { SortColumnAction } from '@reogrid/pro';

actionManager.execute(new SortColumnAction({ column: 0, order: 'asc' }));

Grouping

import {
  GroupRowsAction, UngroupRowsAction,
  GroupColumnsAction, UngroupColumnsAction,
} from '@reogrid/pro';

actionManager.execute(new GroupRowsAction(1, 4));
actionManager.execute(new UngroupRowsAction(1, 4));

Paste and clear

import { PasteAction, ClearRangeAction } from '@reogrid/pro';

actionManager.execute(new ClearRangeAction(0, 0, 4, 3));

Available Actions

Protected cell checking

actionManager.execute() automatically checks cell protection. Changes to protected cells are rejected and false is returned.

const success = actionManager.execute(
  new SetCellInputAction(0, 0, 'new value')
);
if (!success) {
  console.log('Operation blocked by cell protection');
}

Undo capacity

By default, up to 30 undo steps are retained. This can be changed with the undoCapacity option in createReogrid().

const grid = createReogrid({
  workspace: '#grid',
  undoCapacity: 100,
});