Saving data

Save data after each change to the data set, using Handsontable’s API hooks. Preserve the table’s state by saving data to the local storage.

Save changes using a callback

To track changes made in your data grid, use Handsontable’s afterChange hook.

The example below handles data by using fetch. Note that this is just a mockup, and nothing is actually saved. You need to implement the server-side part by yourself.

1
<script setup lang="ts">
2
import { ref, useTemplateRef } from 'vue';
3
import { HotTable } from '@handsontable/vue3';
4
import { registerAllModules } from 'handsontable/registry';
5
import type { GridSettings } from 'handsontable/settings';
6
import type { CellChange, ChangeSource } from 'handsontable/common';
7

8
registerAllModules();
9

10
const hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');
11
const output = ref('Click "Load" to load data from server');
12
const isAutosave = ref(false);
13

14
function autosaveClickCallback(event: Event) {
15
  const checked = (event.target as HTMLInputElement).checked;
16

17
  isAutosave.value = checked;
18
  output.value = checked
19
    ? 'Changes will be autosaved'
20
    : 'Changes will not be autosaved';
21
}
22

23
function loadClickCallback() {
24
  const hot = hotRef.value?.hotInstance;
25

26
  fetch('/docs/scripts/json/load.json').then((response) => {
27
    response.json().then((data: { data: unknown[][] }) => {
28
      hot?.loadData(data.data);
29
      output.value = 'Data loaded';
30
    });
31
  });
32
}
33

34
function saveClickCallback() {
35
  const hot = hotRef.value?.hotInstance;
36

37
  fetch('/docs/scripts/json/save.json', {
38
    method: 'POST',
39
    mode: 'no-cors',
40
    headers: { 'Content-Type': 'application/json' },
41
    body: JSON.stringify({ data: hot?.getData() }),
42
  }).then(() => {
43
    output.value = 'Data saved';
44
    console.log('The POST request is only used here for the demo purposes');
45
  });
46
}
47

48
function afterChange(change: CellChange[] | null, source: ChangeSource) {
49
  if (source === 'loadData') {
50
    return;
51
  }
52

53
  if (!isAutosave.value) {
54
    return;
55
  }
56

57
  fetch('/docs/scripts/json/save.json', {
58
    method: 'POST',
59
    mode: 'no-cors',
60
    headers: { 'Content-Type': 'application/json' },
61
    body: JSON.stringify({ data: change }),
62
  }).then(() => {
63
    output.value = `Autosaved (${change?.length} cell${(change?.length || 0) > 1 ? 's' : ''})`;
64
    console.log('The POST request is only used here for the demo purposes');
65
  });
66
}
67

68
const hotSettings = ref<GridSettings>({
69
  startRows: 8,
70
  startCols: 6,
71
  rowHeaders: true,
72
  colHeaders: true,
73
  height: 'auto',
74
  autoWrapRow: true,
75
  autoWrapCol: true,
76
  licenseKey: 'non-commercial-and-evaluation',
77
  afterChange,
78
});
79
</script>
80

81
<template>
82
  <div id="example1">
83
    <div class="example-controls-container">
84
      <div class="controls">
85
        <button id="load" class="button button--primary button--blue" @click="loadClickCallback">
86
          Load data
87
        </button>
88
        <button id="save" class="button button--primary button--blue" @click="saveClickCallback">
89
          Save data
90
        </button>
91
        <label>
92
          <input
93
            type="checkbox"
94
            name="autosave"
95
            id="autosave"
96
            :checked="isAutosave"
97
            @click="autosaveClickCallback"
98
          />
99
          Autosave
100
        </label>
101
      </div>
102
      <output class="console" id="output">{{ output }}</output>
103
    </div>
104
    <HotTable ref="hotRef" :settings="hotSettings" />
105
  </div>
106
</template>

Save data locally

To persist table state (e.g. column order, column widths, row order) across page reloads, use the browser’s localStorage API or sessionStorage in your application. Listen to the appropriate hooks (e.g. afterColumnMove, afterRowMove, afterColumnResize) and save or restore state as needed.

The afterChange hook does not fire for structural changes such as row moves. To save a new row order, listen to afterRowMove and read the current order with getData(). For more on how moves affect the data model, see Row moving.

If your save logic writes several confirmed values back to the grid at once (for example, after a batch save completes), wrap those writes in batch() so the grid re-renders only once.