Tutorial: Load and save

Load and save

Saving data using onChange callback

Use the onChange callback to track changes made in the table. In the example below, AJAX is used to load and save grid data. Note that this is just a mockup. Nothing is actually saved. You have to implement the server-side part by yourself.

Click "Load" to load data from server

Saving data locally

You can save any sort of data in local storage to preserve the table state after page reloads. In order to enable the data storage mechanism, the persistentState option must be set to true (you can set it either during the Handsontable initialization or using the updateSettings method).

When persistentState is enabled it exposes 3 hooks:

  • persistentStateSave (key: String, value: Mixed)

    Saves value under given key in browser local storage.

  • persistentStateLoad (key: String, valuePlaceholder: Object)

    Loads value, saved under given key, form browser local storage. The loaded value will be saved in valuePlaceholder.value (this is due to specific behaviour of PluginHooks.execute() method). If no value have been saved under key valuePlaceholder.value will be undefined.

  • persistentStateReset (key: String)

    Clears the value saved under key. If no key is given, all values associated with table will be cleared.

Why should I use persistentState rather than regular LocalStorage API?

The main reason behind using persistentState hooks rather than a regular LocalStorage API is that it ensures separation of data stored by multiple Handsontable instances. In other words, if you have two (or more) instances of Handsontable on one page, data saved by one instance will be inaccessible to the second instance. Those two instances can store data under the same key and no data would be overwritten.

In order for the data separation to work properly, make sure that each instance of Handsontable has a unique id.

Help us improve this page