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 history with React hooks (useStore/useStoreLater) 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 { useEffect, useRef, useState } from "react";
import { Button } from "@svar-ui/react-core";
import { Grid } from "@svar-ui/react-grid";
import { useStoreLater } from "@svar-ui/react-core";

export default function UndoRedoExample() {
  const apiRef = useRef(null);
  const history = useStoreLater(apiRef.current, "history");

  function handleUndo() {
    apiRef.current.exec("undo");
  }
  function handleRedo() {
    apiRef.current.exec("redo");
  }

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

      <Grid ref={apiRef} undo />
    </div>
  );
}

Related articles: