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 $derived() 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:

<script>
  import { Button } from "wx-svelte-core";
  import { Grid } from "wx-svelte-grid";
  
  let api = $state();
  let history = $derived(api?.getReactiveState().history);
  
  function handleUndo() {
    api.exec("undo");
  }
  function handleRedo() {
    api.exec("redo");
  }
</script>

<div class="buttons">
  <Button onclick={handleUndo} disabled={history && !$history.undo}>Undo</Button>
  <Button onclick={handleRedo} disabled={history && !$history.redo}>Redo</Button>
</div>

<Grid bind:this={api} undo />

Related articles: