History and Undo/Redo

The History Plugin brings powerful undo and redo capabilities to your data grid, making it easier to manage user edits and maintain data integrity.

Tip

Keyboard shortcuts like Ctrl+Z (or Cmd+Z on macOS) for undo and Ctrl+Y (or Cmd+Y on macOS) / or Ctrl+Shift+Z (or Cmd+Shift+Z on macOS) for redo are supported out of the box.

You can customize its behavior by using the BEFORE_UNDO_EVENT and BEFORE_REDO_EVENT hooks.

Source code

TypeScript

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();

import { EventManagerPlugin, HistoryPlugin } from '@revolist/revogrid-pro';

import { currentTheme, useRandomData } from '../composables/useRandomData';
const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');
  grid.range = true;
  grid.source = createRandomData(100);
  // Define columns
  grid.columns = [
    {
      name: '🆔 ID',
      prop: 'id',
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ];

  // Define plugin
  grid.plugins = [EventManagerPlugin, HistoryPlugin];
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  document.querySelector(parentSelector)?.appendChild(grid);
}

React

src/components/history/History.tsx

import { useState, useMemo, useRef } from 'react';
import { RevoGrid, type DataType } from '@revolist/react-datagrid';
import { EventManagerPlugin, HistoryPlugin } from '@revolist/revogrid-pro';
import { useRandomData, currentTheme } from '../composables/useRandomData';
import React from 'react';

function History() {
  const { isDark } = currentTheme();
  const { createRandomData } = useRandomData();
  const gridRef = useRef<HTMLRevoGridElement>(null);
  const [source] = useState<DataType[]>(createRandomData(100));

  const columns = useMemo(
    () => [
      { name: '🆔 ID', prop: 'id' },
      { name: '🍎 Fruit', prop: 'name' },
      { name: '💰 Price', prop: 'price' },
    ],
    []
  );

  const plugins = useMemo(
    () => [EventManagerPlugin, HistoryPlugin],
    []
  );

  const theme = isDark() ? 'darkCompact' : 'compact';

  return (
    <RevoGrid
      ref={gridRef}
      columns={columns}
      source={source}
      plugins={plugins}
      range
      hide-attribution
      theme={theme}
    />
  );
}

export default History;

Vue

src/components/history/History.vue

<template>
  <div>
    <VGrid
      ref="grid"
      :theme="isDark ? 'darkCompact' : 'compact'"
      :columns="columns"
      :source="rows"
      :plugins="plugins"
      :range="true"
      :additionalData="{ stretch: 'all' }"
      hide-attribution
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { currentThemeVue, useRandomData } from '../composables/useRandomData';
import { VGrid } from '@revolist/vue3-datagrid';
import {
  cellFlashArrowTemplate,
  CellFlashPlugin,
  ColumnStretchPlugin,
  EventManagerPlugin,
  HistoryPlugin,
} from '@revolist/revogrid-pro';

const { createRandomData } = useRandomData();
const { isDark } = currentThemeVue();

const columns = ref([
  { name: '🆔 ID', prop: 'id' },
  { name: '🍎 Fruit', prop: 'name' },
  {
    name: '💰 Price',
    prop: 'price',
    flash: () => true,
    cellTemplate: cellFlashArrowTemplate(),
  },
]);

const plugins = ref([
  EventManagerPlugin,
  HistoryPlugin,
  ColumnStretchPlugin,
  CellFlashPlugin,
]);

const rows = ref(createRandomData(100));
</script>

Angular

import { Component, ViewEncapsulation, ViewChild, ElementRef } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { EventManagerPlugin, HistoryPlugin } from '@revolist/revogrid-pro';
import { currentTheme, useRandomData } from '../composables/useRandomData';

@Component({
  selector: 'history-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      #gridRef
      [theme]="theme"
      [columns]="columns"
      [source]="rows"
      [plugins]="plugins"
      [range]="true"
      [hideAttribution]="true"
      style="height: 400px; width: 600px"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class HistoryGridComponent {
  @ViewChild('gridRef', { static: true }) gridRef!: ElementRef<HTMLRevoGridElement>;
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';

  columns = [
    { name: '🆔 ID', prop: 'id' },
    { name: '🍎 Fruit', prop: 'name' },
    { name: '💰 Price', prop: 'price' },
  ];

  plugins = [EventManagerPlugin, HistoryPlugin];
  rows = useRandomData().createRandomData(100);
}

Key Features

• Undo/Redo Management: Automatically tracks user changes with the ability to undo/redo actions using keyboard shortcuts.
• Configurable Stack Size: Tracks up to 200 changes by default, ensuring optimal performance while retaining a comprehensive history of edits.
• Custom Event Hooks: Supports custom behavior via beforeundo and beforeredo events, allowing full control over the undo/redo process.

Key methods

The History Plugin provides four key methods to enhance control over undo/redo functionality:

• clear(): Resets both the undo and redo stacks, clearing all recorded changes.
• disable(disable = true): Temporarily disables the plugin, preventing changes from being recorded or undo/redo operations from being triggered.
• undo(): Reverts the last change recorded in the undo stack and moves it to the redo stack for potential reapplication.
• redo(): Reapplies the most recent change from the redo stack, moving it back to the undo stack for further management.

These methods give developers flexibility in managing user actions and tailoring the plugin’s behavior to specific application requirements.

Behind the Scenes

The plugin listens to edit events (onEditEvent) and tracks changes in undo and redo stacks. Keyboard shortcuts like Ctrl+Z for undo and Ctrl+Y (or Ctrl+Shift+Z) for redo are supported out of the box. You can customize its behavior by using the BEFORE_UNDO_EVENT and BEFORE_REDO_EVENT hooks.

Here’s a quick snippet showing how the plugin processes undo actions:

undo() {
  if (this.undoStack.length === 0) return;
  const lastChange = this.undoStack.pop();
  if (lastChange) {
    const event = this.emit(BEFORE_UNDO_EVENT, {
      data: lastChange.previousData,
      type: lastChange.type,
      lastChange,
    });
    if (!event.defaultPrevented) {
      const data = event.detail.data || lastChange.previousData;
      this.providers.data.setRangeData(data, event.detail.type || lastChange.type);
      this.redoStack.push(lastChange);
    }
  }
}

Try it Out!

Add the History Plugin to your RevoGrid instance and experience seamless undo/redo functionality. This plugin is especially useful in applications that handle complex data operations, ensuring users can easily revert or reapply changes as needed.