Tutorial: Load and save

Load and save

Saving data using afterChange callback

Use the afterChange 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 listed below:

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