State Persistence

Documentation

Sort and filter data, group, reorder and resize columns, change page numbers and page size. Once you are done, refresh the web page to see that the grid’s state is automatically persisted to continue working from where you stopped.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Copy to CodeSandBox

Apply

Reset

<template> <div> <div id="descContainer">Sort and filter data, group, reorder and resize columns, change page numbers and page size. Once you are done, <a @click="onRefreshClick">refresh</a> the web page to see that the grid’s state is automatically persisted to continue working from where you stopped.</div> <dx-data-grid id="gridContainer" :data-source="orders" :allow-column-resizing="true" :allow-column-reordering="true" :show-borders="true" key-expr="ID" > <dx-selection mode="single"/> <dx-filter-row :visible="true"/> <dx-group-panel :visible="true"/> <dx-state-storing :enabled="true" type="localStorage" storage-key="storage" /> <dx-pager :show-page-size-selector="true" :allowed-page-sizes="[5, 10, 20]" /> <dx-column :width="130" data-field="OrderNumber" caption="Invoice Number" /> <dx-column data-field="OrderDate" sort-order="desc" data-type="date" /> <dx-column data-field="SaleAmount" alignment="right" format="currency" /> <dx-column data-field="Employee"/> <dx-column data-field="CustomerStoreCity" caption="City" /> <dx-column :group-index="0" data-field="CustomerStoreState" caption="State" /> </dx-data-grid> </div> </template> <script> import { DxDataGrid, DxSelection, DxFilterRow, DxGroupPanel, DxStateStoring, DxPager, DxColumn } from 'devextreme-vue/data-grid'; import service from './data.js'; export default { components: { DxDataGrid, DxSelection, DxFilterRow, DxGroupPanel, DxStateStoring, DxPager, DxColumn }, data() { return { orders: service.getOrders() }; }, methods: { onRefreshClick() { window.location.reload(); } } }; </script> <style scoped> #gridContainer { height: 440px; margin-top: 30px; } #descContainer a { color: #f05b41; text-decoration: underline; cursor: pointer; } #descContainer a:hover { text-decoration: none; } </style>

import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });

<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"/> </div> </body> </html>

System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });