Persist the State of the Native Grid
There are two often scenarios in the real-life projects in which you may need to store and restore a specific state of the Native Grid component:
- To save the Grid's current state, including its
data
,columns(columns order, width, locked, and hidden states)
, appliedfilters
,groupings
,expanded rows
, etc., and restore it precisely the same way when the user returns to the same page. - To give your users the option to customize specific configurations in the Grid in a way they prefer, store these preferences and apply them every time the Grid is loaded.
The following example shows how you can persist configurations that cover both of the listed above scenarios.
Grid State Persistance Implementation
The key points in the implementation of the above example are as follows:
-
The Save and Restore buttons located above the Grid.
Each of these buttons calls respectively the
saveState
andgetState
methods that save and load the different Grid configs.<KButton class="buttons" @click="saveState">Save Grid State</KButton> <KButton class="buttons" @click="getState">Reload Grid State</KButton>
-
The Grid configuration.
Each of the different Grid configurations is defined by a separate data property. The value of each property controls the behavior of the component. To be able to
save
andrestore
the state of the Grid, we work exactly with these configurations.<Grid :style="{ height: '700px' }" :sortable="sortable" :filterable="filterable" :groupable="groupable" :reorderable="reorderable" :pageable="{ buttonCount: 4, pageSizes: true }" :data-items="dataResult" :skip="skip" :take="take" :sort="sort" :group="group" :filter="filter" :columns="columns" :detail="detailComponent" :expand-field="'expanded'" ...... > ...... </Grid>
-
The
saveState
method.This method gets the different Grid properties and configurations that we want to save, puts them in an object and saves this object in the local storage of your browser.
For scenarios where the Grid configurations are stored in a
database
, instead of the localStorage.setItem() method, you should implement a custom logic that saves the gridState object to your database.saveState: function () { const gridState = {}; gridState.data = [...this.ordersCopy]; gridState.sortable = this.sortable; gridState.filterable = this.filterable; gridState.groupable = this.groupable; gridState.skip = this.skip; gridState.take = this.take; gridState.group = this.group; gridState.sort = this.sort; gridState.filter = this.filter; gridState.currentLocale = this.currentLocale; localStorage.setItem('gridState', JSON.stringify(gridState)); }
In the above snippet, you will notice that the two scenarios mentioned at the beginning of the article are covered - together with the sorting, filtering, grouping and other Grid configurations, we are also saving the
currentLocale
configuration option. -
The
getState
method.As its name talks, this method gets the saved data from the local storage and using the updateState method, loads the saved data back.
For scenarios where the Grid configurations are stored in a
database
, instead of the localStorage.getItem() method, you should implement a custom logic that gets the gridState object from your database.getState: function () { const gridState = JSON.parse(localStorage.getItem('gridState')); if (gridState !== null) { this.restoredData = gridState.data; this.sortable = gridState.sortable; this.filterable = gridState.filterable; this.groupable = gridState.groupable; this.skip = gridState.skip; this.take = gridState.take; this.group = gridState.group; this.sort = gridState.sort; this.filter = gridState.filter; this.currentLocale = gridState.currentLocale; this.updateState(); } }