Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<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 or you can <a @click="onStateResetClick">reset</a>
the grid to its initial state.</div>
<DxDataGrid
id="gridContainer"
ref="dataGridRef"
:data-source="orders"
:key-expr="'ID'"
:allow-column-resizing="true"
:allow-column-reordering="true"
:width="'100%'"
:show-borders="true"
>
<DxSelection mode="single"/>
<DxFilterRow :visible="true"/>
<DxGroupPanel :visible="true"/>
<DxStateStoring
:enabled="true"
type="localStorage"
storage-key="storage"
/>
<DxPager
:show-page-size-selector="true"
:allowed-page-sizes="[5, 10, 20]"
/>
<DxColumn
:width="130"
data-field="OrderNumber"
caption="Invoice Number"
/>
<DxColumn
data-field="OrderDate"
sort-order="desc"
data-type="date"
/>
<DxColumn
data-field="SaleAmount"
alignment="right"
format="currency"
/>
<DxColumn data-field="Employee"/>
<DxColumn
data-field="CustomerStoreCity"
caption="City"
/>
<DxColumn
:group-index="0"
data-field="CustomerStoreState"
caption="State"
/>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import {
DxDataGrid, DxSelection, DxFilterRow, DxGroupPanel, DxStateStoring, DxPager, DxColumn,
} from 'devextreme-vue/data-grid';
import { orders } from './data.ts';
const dataGridRef = ref<DxDataGrid | null>(null);
const onRefreshClick = () => {
window.location.reload();
};
const onStateResetClick = () => {
dataGridRef.value!.instance!.state(null);
};
</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>
window.exports = window.exports || {};
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'*.ts': {
loader: 'demo-ts-loader',
},
'*.svg': {
loader: 'svg-loader',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
},
paths: {
'root:': '../../../../',
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',
'demo-ts-loader': 'root:utils/demo-ts-loader.js',
'svg-loader': 'root:utils/svg-loader.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@24.1.6/cjs',
'devextreme-vue': 'npm:devextreme-vue@24.1.6/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.13/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);
export type Order = {
ID: number;
OrderNumber: number;
OrderDate: Date;
SaleAmount: number;
Terms: string;
TotalAmount: number;
CustomerStoreState: string;
CustomerStoreCity: string;
Employee: string;
};
export const orders: Order[] = [{
ID: 1,
OrderNumber: 35703,
OrderDate: new Date(2014, 3, 10),
SaleAmount: 11800,
Terms: '15 Days',
TotalAmount: 12175,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
ID: 4,
OrderNumber: 35711,
OrderDate: new Date(2014, 0, 12),
SaleAmount: 16050,
Terms: '15 Days',
TotalAmount: 16550,
CustomerStoreState: 'California',
CustomerStoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
ID: 5,
OrderNumber: 35714,
OrderDate: new Date(2014, 0, 22),
SaleAmount: 14750,
Terms: '15 Days',
TotalAmount: 15250,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
ID: 7,
OrderNumber: 35983,
OrderDate: new Date(2014, 1, 7),
SaleAmount: 3725,
Terms: '15 Days',
TotalAmount: 3850,
CustomerStoreState: 'Colorado',
CustomerStoreCity: 'Denver',
Employee: 'Todd Hoffman',
}, {
ID: 9,
OrderNumber: 36987,
OrderDate: new Date(2014, 2, 11),
SaleAmount: 14200,
Terms: '15 Days',
TotalAmount: 14800,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
ID: 11,
OrderNumber: 38466,
OrderDate: new Date(2014, 2, 1),
SaleAmount: 7800,
Terms: '15 Days',
TotalAmount: 8200,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
ID: 14,
OrderNumber: 39420,
OrderDate: new Date(2014, 1, 15),
SaleAmount: 20500,
Terms: '15 Days',
TotalAmount: 9100,
CustomerStoreState: 'California',
CustomerStoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
ID: 15,
OrderNumber: 39874,
OrderDate: new Date(2014, 1, 4),
SaleAmount: 9050,
Terms: '30 Days',
TotalAmount: 19100,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
ID: 18,
OrderNumber: 42847,
OrderDate: new Date(2014, 1, 15),
SaleAmount: 20400,
Terms: '30 Days',
TotalAmount: 20800,
CustomerStoreState: 'Wyoming',
CustomerStoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
ID: 19,
OrderNumber: 43982,
OrderDate: new Date(2014, 4, 29),
SaleAmount: 6050,
Terms: '30 Days',
TotalAmount: 6250,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
ID: 29,
OrderNumber: 56272,
OrderDate: new Date(2014, 1, 6),
SaleAmount: 15850,
Terms: '30 Days',
TotalAmount: 16350,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
ID: 30,
OrderNumber: 57429,
OrderDate: new Date(2013, 11, 31),
SaleAmount: 11050,
Terms: '30 Days',
TotalAmount: 11400,
CustomerStoreState: 'Arizona',
CustomerStoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}, {
ID: 32,
OrderNumber: 58292,
OrderDate: new Date(2014, 4, 13),
SaleAmount: 13500,
Terms: '15 Days',
TotalAmount: 13800,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
ID: 36,
OrderNumber: 62427,
OrderDate: new Date(2014, 0, 27),
SaleAmount: 23500,
Terms: '15 Days',
TotalAmount: 24000,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
ID: 39,
OrderNumber: 65977,
OrderDate: new Date(2014, 1, 5),
SaleAmount: 2550,
Terms: '15 Days',
TotalAmount: 2625,
CustomerStoreState: 'Wyoming',
CustomerStoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
ID: 40,
OrderNumber: 66947,
OrderDate: new Date(2014, 2, 23),
SaleAmount: 3500,
Terms: '15 Days',
TotalAmount: 3600,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
ID: 42,
OrderNumber: 68428,
OrderDate: new Date(2014, 3, 10),
SaleAmount: 10500,
Terms: '15 Days',
TotalAmount: 10900,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
ID: 43,
OrderNumber: 69477,
OrderDate: new Date(2014, 2, 9),
SaleAmount: 14200,
Terms: '15 Days',
TotalAmount: 14500,
CustomerStoreState: 'California',
CustomerStoreCity: 'Anaheim',
Employee: 'Harv Mudd',
}, {
ID: 46,
OrderNumber: 72947,
OrderDate: new Date(2014, 0, 14),
SaleAmount: 13350,
Terms: '30 Days',
TotalAmount: 13650,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
ID: 47,
OrderNumber: 73088,
OrderDate: new Date(2014, 2, 25),
SaleAmount: 8600,
Terms: '30 Days',
TotalAmount: 8850,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Reno',
Employee: 'Clark Morgan',
}, {
ID: 50,
OrderNumber: 76927,
OrderDate: new Date(2014, 3, 27),
SaleAmount: 9800,
Terms: '30 Days',
TotalAmount: 10050,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
ID: 51,
OrderNumber: 77297,
OrderDate: new Date(2014, 3, 30),
SaleAmount: 10850,
Terms: '30 Days',
TotalAmount: 11100,
CustomerStoreState: 'Arizona',
CustomerStoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}, {
ID: 56,
OrderNumber: 84744,
OrderDate: new Date(2014, 1, 10),
SaleAmount: 4650,
Terms: '30 Days',
TotalAmount: 4750,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
ID: 57,
OrderNumber: 85028,
OrderDate: new Date(2014, 4, 17),
SaleAmount: 2575,
Terms: '30 Days',
TotalAmount: 2625,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Reno',
Employee: 'Clark Morgan',
}, {
ID: 59,
OrderNumber: 87297,
OrderDate: new Date(2014, 3, 21),
SaleAmount: 14200,
Terms: '30 Days',
TotalAmount: 0,
CustomerStoreState: 'Wyoming',
CustomerStoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
ID: 60,
OrderNumber: 88027,
OrderDate: new Date(2014, 1, 14),
SaleAmount: 13650,
Terms: '30 Days',
TotalAmount: 14050,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
ID: 65,
OrderNumber: 94726,
OrderDate: new Date(2014, 4, 22),
SaleAmount: 20500,
Terms: '15 Days',
TotalAmount: 20800,
CustomerStoreState: 'California',
CustomerStoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
ID: 66,
OrderNumber: 95266,
OrderDate: new Date(2014, 2, 10),
SaleAmount: 9050,
Terms: '15 Days',
TotalAmount: 9250,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
ID: 69,
OrderNumber: 98477,
OrderDate: new Date(2014, 0, 1),
SaleAmount: 23500,
Terms: '15 Days',
TotalAmount: 23800,
CustomerStoreState: 'Wyoming',
CustomerStoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
ID: 70,
OrderNumber: 99247,
OrderDate: new Date(2014, 1, 8),
SaleAmount: 2100,
Terms: '15 Days',
TotalAmount: 2150,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
ID: 78,
OrderNumber: 174884,
OrderDate: new Date(2014, 3, 10),
SaleAmount: 7200,
Terms: '30 Days',
TotalAmount: 7350,
CustomerStoreState: 'Colorado',
CustomerStoreCity: 'Denver',
Employee: 'Todd Hoffman',
}, {
ID: 81,
OrderNumber: 188877,
OrderDate: new Date(2014, 1, 11),
SaleAmount: 8750,
Terms: '30 Days',
TotalAmount: 8900,
CustomerStoreState: 'Arizona',
CustomerStoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}, {
ID: 82,
OrderNumber: 191883,
OrderDate: new Date(2014, 1, 5),
SaleAmount: 9900,
Terms: '30 Days',
TotalAmount: 10150,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
ID: 83,
OrderNumber: 192474,
OrderDate: new Date(2014, 0, 21),
SaleAmount: 12800,
Terms: '30 Days',
TotalAmount: 13100,
CustomerStoreState: 'California',
CustomerStoreCity: 'Anaheim',
Employee: 'Harv Mudd',
}, {
ID: 84,
OrderNumber: 193847,
OrderDate: new Date(2014, 2, 21),
SaleAmount: 14100,
Terms: '30 Days',
TotalAmount: 14350,
CustomerStoreState: 'California',
CustomerStoreCity: 'San Diego',
Employee: 'Harv Mudd',
}, {
ID: 85,
OrderNumber: 194877,
OrderDate: new Date(2014, 2, 6),
SaleAmount: 4750,
Terms: '30 Days',
TotalAmount: 4950,
CustomerStoreState: 'California',
CustomerStoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
ID: 86,
OrderNumber: 195746,
OrderDate: new Date(2014, 4, 26),
SaleAmount: 9050,
Terms: '30 Days',
TotalAmount: 9250,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
ID: 87,
OrderNumber: 197474,
OrderDate: new Date(2014, 2, 2),
SaleAmount: 6400,
Terms: '30 Days',
TotalAmount: 6600,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Reno',
Employee: 'Clark Morgan',
}, {
ID: 88,
OrderNumber: 198746,
OrderDate: new Date(2014, 4, 9),
SaleAmount: 15700,
Terms: '30 Days',
TotalAmount: 16050,
CustomerStoreState: 'Colorado',
CustomerStoreCity: 'Denver',
Employee: 'Todd Hoffman',
}, {
ID: 91,
OrderNumber: 214222,
OrderDate: new Date(2014, 1, 8),
SaleAmount: 11050,
Terms: '30 Days',
TotalAmount: 11250,
CustomerStoreState: 'Arizona',
CustomerStoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}];
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html lang="en">
<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=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" />
<script type="module">
import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js";
window.vueCompilerSFC = vueCompilerSFC;
</script>
<script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script>
<script src="https://unpkg.com/core-js@2.6.12/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.ts");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app" />
</div>
</body>
</html>
To enable state persistence, set stateStoring.enabled to true and specify the storageKey and type properties. Depending on the type, the state can be saved to a localStorage or sessionStorage. With localStorage, the state persists across browser sessions; with sessionStorage, it is reset after the current session. This demo uses localStorage.
Alternatively, you can implement the customSave and customLoad functions to save and load the state according to custom logic. In this case, set the type property to "custom".