React Data Grid PersistentState
Description
Save the state of column sorting, column positions and column sizes in local storage to preserve table state between page reloads.
In order to enable data storage mechanism, Options#persistentState option must be set to true.
When persistentState is enabled it exposes 3 hooks:
- Hooks#persistentStateSave - Saves value under given key in browser local storage.
- Hooks#persistentStateLoad - Loads value, saved under given key, from browser local storage. The loaded
value will be saved in
saveTo.value. - Hooks#persistentStateReset - Clears the value saved under key. If no key is given, all values associated with table will be cleared.
Note: The main reason behind using persistentState hooks rather than 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 won't be accessible by the second instance.
Those two instances can store data under the same key and no data would be overwritten.
Important: In order for the data separation to work properly, make sure that each instance of Handsontable has a unique id.
Options
persistentState
Source code (opens new window)persistentState.persistentState : boolean
The persistentState option configures the PersistentState plugin.
You can set the persistentState to one of the following:
| Setting | Description |
|---|---|
false (default) | Disable the PersistentState plugin |
true | Enable the PersistentState plugin |
Read more:
Default: false
Example
// enable the `PersistentState` plugin
persistentState: true,
Methods
destroy
Source code (opens new window)persistentState.destroy()
Destroys the plugin instance.
disablePlugin
Source code (opens new window)persistentState.disablePlugin()
Disables the plugin functionality for this Handsontable instance.
enablePlugin
Source code (opens new window)persistentState.enablePlugin()
Enables the plugin functionality for this Handsontable instance.
isEnabled
Source code (opens new window)persistentState.isEnabled() ⇒ boolean
Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit
hook and if it returns true then the PersistentState#enablePlugin method is called.
loadValue
Source code (opens new window)persistentState.loadValue(key, saveTo)
Loads the value from local storage.
| Param | Type | Description |
|---|---|---|
| key | string | Storage key. |
| saveTo | object | Saved value from local storage. |
resetValue
Source code (opens new window)persistentState.resetValue(key)
Resets the data or all data from local storage.
| Param | Type | Description |
|---|---|---|
| key | string | [optional] Storage key. |
saveValue
Source code (opens new window)persistentState.saveValue(key, value)
Saves the data to local storage.
| Param | Type | Description |
|---|---|---|
| key | string | Storage key. |
| value | Mixed | Value to save. |
updatePlugin
Source code (opens new window)persistentState.updatePlugin()
Updates the plugin's state.
This method is executed when updateSettings() is invoked with any of the following configuration options:
← NestedRows Search →