Skip to main content

Executing undo or redo actions

Actions that can be redone or undone: add-row, update-row, update-cell, delete-row, move-item, collapse-column, resize-column, hide-column.

info

The undo/redo functionality doesn't work in the tree mode.

To perform steps back and forward in history, you need to:

  • Set the undo property to true to enable the possibility to perform undo/redo actions
  • Apply the required action: undo or redo

Example​

To control undo/redo button states:

  • Use getReactiveState().history with React hooks (useState/useEffect or useMemo) to reactively track undo/redo availability
  • Disable buttons based on history.undo and history.redo

The example below shows how to disable the undo and redo buttons when no actions are available:

import { useState, useEffect } from "react";
import { Button } from "@svar-ui/react-core";
import { Grid } from "@svar-ui/react-grid";

function App() {
  const [api, setApi] = useState(null);
  const [history, setHistory] = useState(null);

  useEffect(() => {
    if (!api) return;

    // getReactiveState().history is a reactive structure in the Grid API.
    // Subscribe to updates if the history object exposes a subscription mechanism.
    const hist = api.getReactiveState().history;

    // If the history exposes a subscribe method (e.g. observable/store), use it:
    if (hist?.subscribe) {
      const unsubscribe = hist.subscribe((h) => setHistory(h));
      return () => unsubscribe();
    }

    // Otherwise, take a snapshot or set directly.
    setHistory(hist);
  }, [api]);

  function handleUndo() {
    api?.exec("undo");
  }

  function handleRedo() {
    api?.exec("redo");
  }

  return (
    <div>
      <div className="buttons">
        <Button onClick={handleUndo} disabled={!history || !history.undo}>
          Undo
        </Button>
        <Button onClick={handleRedo} disabled={!history || !history.redo}>
          Redo
        </Button>
      </div>

      {/* Use a callback ref to get the Grid API instance */}
      <Grid ref={setApi} undo />
    </div>
  );
}

Related sample: Undo/redo

Related articles: