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 computed() 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 setup>
  import { Button } from "@svar-ui/vue-core";
  import { Grid } from "@svar-ui/vue-grid";
  import { ref, computed } from "vue";

  const api = ref(null);
  const history = computed(() => api.value?.getReactiveState().history);

  function handleUndo() {
    api.value.exec("undo");
  }
  function handleRedo() {
    api.value.exec("redo");
  }
</script>

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

  <Grid ref="api" :undo="true" />
</template>

Related sample: Undo/redo

Related articles: