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/lite';

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

Changing cell styles

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

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

// Range
actionManager.execute(
  createSetRangeStyleAction(grid.worksheet, 0, 0, 4, 3, { backgroundColor: '#dbeafe' })
);

Changing column widths / row heights

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

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

Cell merging

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

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

Borders

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

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

Inserting / deleting rows and columns

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

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

Showing / hiding rows and columns

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

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

Sorting

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

actionManager.execute(new SortColumnAction(grid.worksheet, 0, 'asc'));

Grouping

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

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

Paste and clear

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

actionManager.execute(new ClearRangeAction(grid.worksheet, 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(grid.worksheet, 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,
});