Undo/Redo Plugin

The Undo/Redo plugin tracks all cell edits and lets users revert or replay changes with familiar keyboard shortcuts (Ctrl+Z / Ctrl+Y). It maintains an in-memory history stack with configurable depth—perfect for data entry workflows where mistakes happen.

⚠️ Required Dependency: This plugin requires EditingPlugin to be loaded first. UndoRedo tracks the edit history that EditingPlugin creates.

Installation

import '@toolbox-web/grid/features/editing';
import '@toolbox-web/grid/features/undo-redo';

Basic Usage

Enable both features and history tracking is automatic—every cell edit is recorded, and users can navigate back and forth through the edit history.

import { queryGrid } from '@toolbox-web/grid';

const grid = queryGrid('tbw-grid');
grid.gridConfig = {
  columns: [
    { field: 'name', header: 'Name', editable: true },
    { field: 'price', header: 'Price', type: 'number', editable: true },
    { field: 'quantity', header: 'Quantity', type: 'number', editable: true },
  ],
  features: {
    editing: 'dblclick',
    undoRedo: { maxHistorySize: 50 },
  },
};

import '@toolbox-web/grid-react/features/editing';
import '@toolbox-web/grid-react/features/undo-redo';
import { DataGrid } from '@toolbox-web/grid-react';

function MyGrid({ data }) {
  return (
    <DataGrid
      rows={data}
      columns={[
        { field: 'name', header: 'Name', editable: true },
        { field: 'price', header: 'Price', type: 'number', editable: true },
        { field: 'quantity', header: 'Quantity', type: 'number', editable: true },
      ]}
      editing={{ editOn: 'dblclick' }}
      undoRedo={{ maxHistorySize: 50 }}
    />
  );
}

<script setup>
import '@toolbox-web/grid-vue/features/editing';
import '@toolbox-web/grid-vue/features/undo-redo';
import { TbwGrid, TbwGridColumn } from '@toolbox-web/grid-vue';

const data = [
  { name: 'Widget', price: 9.99, quantity: 10 },
  { name: 'Gadget', price: 19.99, quantity: 5 },
];
</script>

<template>
  <TbwGrid
    :rows="data"
    editing="dblclick"
    :undo-redo="{ maxHistorySize: 50 }"
  >
    <TbwGridColumn field="name" header="Name" editable />
    <TbwGridColumn field="price" header="Price" type="number" editable />
    <TbwGridColumn field="quantity" header="Quantity" type="number" editable />
  </TbwGrid>
</template>

// Feature imports - enable the [editing] and [undoRedo] inputs
import '@toolbox-web/grid-angular/features/editing';
import '@toolbox-web/grid-angular/features/undo-redo';

import { Component } from '@angular/core';
import { Grid } from '@toolbox-web/grid-angular';
import type { ColumnConfig } from '@toolbox-web/grid';

@Component({
  selector: 'app-my-grid',
  imports: [Grid],
  template: `
    <tbw-grid
      [rows]="rows"
      [columns]="columns"
      [editing]="true"
      [undoRedo]="{ maxHistorySize: 50 }"
      style="height: 400px; display: block;">
    </tbw-grid>
  `,
})
export class MyGridComponent {
  rows = [...];

  columns: ColumnConfig[] = [
    { field: 'name', header: 'Name', editable: true },
    { field: 'price', header: 'Price', type: 'number', editable: true },
    { field: 'quantity', header: 'Quantity', type: 'number', editable: true },
  ];
}

Demo

Edit cells by double-clicking, then use Ctrl+Z / Ctrl+Y to undo/redo. Adjust the max history size with the control.

UNDO/REDO

Max history size Maximum undo steps to keep

<tbw-grid style="height: 350px;"></tbw-grid>

import '@toolbox-web/grid';
import { queryGrid } from '@toolbox-web/grid';
import '@toolbox-web/grid/features/editing';
import '@toolbox-web/grid/features/undo-redo';

const columns = [
  { field: 'id', header: 'ID', type: 'number' },
  { field: 'name', header: 'Name', editable: true },
  { field: 'quantity', header: 'Quantity', type: 'number', editable: true },
  { field: 'price', header: 'Price', type: 'number', editable: true },
];
const sampleData = [
  { id: 1, name: 'Widget A', quantity: 10, price: 25.99 },
  { id: 2, name: 'Widget B', quantity: 5, price: 49.99 },
  { id: 3, name: 'Widget C', quantity: 20, price: 15.0 },
];

const grid = queryGrid('tbw-grid')!;

function rebuild(maxHistorySize = 100) {
  grid.gridConfig = {
    columns,
    features: { editing: true, undoRedo: { maxHistorySize } },
  };
  grid.rows = [...sampleData];
}

rebuild();

Configuration Options

See UndoRedoConfig for the full list of options and defaults.

Keyboard Shortcuts

Shortcut	Action
`Ctrl+Z` / `Cmd+Z`	Undo
`Ctrl+Y` / `Cmd+Y` / `Cmd+Shift+Z`	Redo

Programmatic API

const plugin = grid.getPluginByName('undoRedo');

plugin.undo();
plugin.redo();
const canUndo = plugin.canUndo();
const canRedo = plugin.canRedo();
plugin.clearHistory();

Compound Actions (Transactions)

When a user edit cascades programmatic changes to other fields, group them into a single undo step so Ctrl+Z reverts everything at once:

grid.on('cell-commit', () => {
  const undoRedo = grid.getPluginByName('undoRedo');
  undoRedo.beginTransaction();

  // Record cascaded updates manually
  const oldTotal = row.total;
  undoRedo.recordEdit(rowIndex, 'total', oldTotal, newTotal);
  grid.updateRow(rowId, { total: newTotal });

  // End after the auto-recorded original edit is captured
  queueMicrotask(() => undoRedo.endTransaction());
});

Method	Description
`beginTransaction()`	Start buffering edits into a compound group
`endTransaction()`	Finalize and push the compound as a single undo step
`recordEdit()`	Manually record a cell edit (buffered during txn)

Events

Double-click a cell to edit, then undo/redo.

Event Log:

undo / redo

Fired after an undo or redo action is applied:

grid.on('undo', ({ action, type }) => {
  console.log(`${type}: reverted ${action.field} on row ${action.rowIndex}`);
});

grid.on('redo', ({ action, type }) => {
  console.log(`${type}: reapplied ${action.field} on row ${action.rowIndex}`);
});

See UndoRedoDetail for the full event payload type.