State Persistence - Vue Pivot Grid

<template> <div id="pivotgrid-demo"> <div class="desc-container">Expand, filter, sort and perform other operations on the PivotGrid’s columns and rows. <a @click="onRefreshClick">Refresh</a> the web page and note that the PivotGrid’s state is automatically persisted. </div> <DxButton id="reset" text="Reset the PivotGrid's State" @click="() => gridDataSource.state({})" /> <DxPivotGrid id="sales" :allow-sorting-by-summary="true" :allow-sorting="true" :allow-filtering="true" :allow-expand-all="true" :height="570" :show-borders="true" :data-source="gridDataSource" :on-context-menu-preparing="onContextMenuPreparing" > <DxFieldChooser :enabled="true"/> <DxFieldPanel :visible="true"/> <DxStateStoring :enabled="true" type="localStorage" storage-key="dx-widget-gallery-pivotgrid-storing" /> </DxPivotGrid> </div> </template> <script setup lang="ts"> import DxPivotGrid, { DxFieldChooser, DxFieldPanel, DxStateStoring, type DxPivotGridTypes, } from 'devextreme-vue/pivot-grid'; import DxButton from 'devextreme-vue/button'; import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; import { sales } from './data.ts'; const gridDataSource = new PivotGridDataSource({ fields: [{ caption: 'Region', width: 120, dataField: 'region', area: 'row', sortBySummaryField: 'sales', }, { caption: 'City', dataField: 'city', width: 150, area: 'row', }, { dataField: 'date', dataType: 'date', area: 'column', }, { groupName: 'date', groupInterval: 'year', }, { groupName: 'date', groupInterval: 'quarter', }, { dataField: 'sales', dataType: 'number', summaryType: 'sum', format: 'currency', area: 'data', }], store: sales, }); function onRefreshClick() { window.location.reload(); } function onContextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) { const dataSource = e.component.getDataSource(); const sourceField: Record<string, any> | undefined = e.field; if (sourceField) { if (!sourceField.groupName || sourceField.groupIndex === 0) { e.items?.push({ text: 'Hide field', onItemClick() { let fieldIndex: number; const dataSourceField: Record<string, any> = sourceField.groupName ? dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex] : sourceField; fieldIndex = dataSourceField.index; dataSource.field(fieldIndex, { area: null, }); dataSource.load(); }, }); } if (sourceField.dataType === 'number') { const setSummaryType = function(args: Record<string, any>) { dataSource.field(sourceField.index, { summaryType: args.itemData.value, }); dataSource.load(); }; const menuItems: Record<string, any>[] = []; e.items?.push({ text: 'Summary Type', items: menuItems }); ['Sum', 'Avg', 'Min', 'Max'].forEach((summaryType) => { const summaryTypeValue = summaryType.toLowerCase(); menuItems.push({ text: summaryType, value: summaryType.toLowerCase(), onItemClick: setSummaryType, selected: e.field?.summaryType === summaryTypeValue, }); }); } } } </script> <style scoped> #pivotgrid-demo > .dx-button { margin: 10px 0; } #pivotgrid-demo .desc-container a { color: #f05b41; text-decoration: underline; cursor: pointer; } #pivotgrid-demo .desc-container a:hover { text-decoration: none; } </style>

export type Sale = { id: number; region: string; country: string; city: string; sales: number; date: string; }; export const sales: Sale[] = [{ id: 1, region: 'North America', country: 'USA', city: 'New York', sales: 1740, date: '2013/01/06', }, { id: 2, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 850, date: '2013/01/13', }, { id: 3, region: 'North America', country: 'USA', city: 'Denver', sales: 2235, date: '2013/01/07', }, { id: 4, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1965, date: '2013/01/03', }, { id: 5, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 880, date: '2013/01/10', }, { id: 6, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 5260, date: '2013/01/17', }, { id: 7, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 2790, date: '2013/01/21', }, { id: 8, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 3140, date: '2013/01/01', }, { id: 9, region: 'Europe', country: 'GBR', city: 'London', sales: 6175, date: '2013/01/24', }, { id: 10, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 4575, date: '2013/01/11', }, { id: 11, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 3680, date: '2013/01/12', }, { id: 12, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 8400, date: '2013/01/05', }, { id: 13, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 1325, date: '2013/01/14', }, { id: 14, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 3920, date: '2013/01/05', }, { id: 15, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2220, date: '2013/01/15', }, { id: 16, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 940, date: '2013/01/01', }, { id: 17, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1630, date: '2013/01/10', }, { id: 18, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2910, date: '2013/01/23', }, { id: 19, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 2600, date: '2013/01/14', }, { id: 20, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 4340, date: '2013/01/26', }, { id: 21, region: 'Europe', country: 'GBR', city: 'London', sales: 6650, date: '2013/01/24', }, { id: 22, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 490, date: '2013/01/22', }, { id: 23, region: 'North America', country: 'USA', city: 'New York', sales: 3390, date: '2013/01/25', }, { id: 24, region: 'North America', country: 'USA', city: 'New York', sales: 5160, date: '2013/02/20', }, { id: 25, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 5750, date: '2013/02/12', }, { id: 26, region: 'North America', country: 'USA', city: 'Denver', sales: 2805, date: '2013/02/13', }, { id: 27, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 2505, date: '2013/02/09', }, { id: 28, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 930, date: '2013/02/04', }, { id: 29, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 1240, date: '2013/02/03', }, { id: 30, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 315, date: '2013/02/04', }, { id: 31, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2870, date: '2013/02/18', }, { id: 32, region: 'Europe', country: 'GBR', city: 'London', sales: 5150, date: '2013/02/18', }, { id: 33, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 2725, date: '2013/02/20', }, { id: 34, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 2840, date: '2013/02/04', }, { id: 35, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 1200, date: '2013/02/03', }, { id: 36, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 4550, date: '2013/02/08', }, { id: 37, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 6040, date: '2013/02/17', }, { id: 38, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2205, date: '2013/02/08', }, { id: 39, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 990, date: '2013/02/20', }, { id: 40, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 700, date: '2013/02/11', }, { id: 41, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2325, date: '2013/02/15', }, { id: 42, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 930, date: '2013/02/21', }, { id: 43, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 1560, date: '2013/02/04', }, { id: 44, region: 'North America', country: 'USA', city: 'New York', sales: 1740, date: '2013/03/04', }, { id: 45, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 3575, date: '2013/03/20', }, { id: 46, region: 'North America', country: 'USA', city: 'Denver', sales: 4500, date: '2013/03/04', }, { id: 47, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1605, date: '2013/03/17', }, { id: 48, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 800, date: '2013/03/21', }, { id: 49, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 640, date: '2013/03/08', }, { id: 50, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 735, date: '2013/03/19', }, { id: 51, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2520, date: '2013/03/20', }, { id: 52, region: 'Europe', country: 'GBR', city: 'London', sales: 6675, date: '2013/03/18', }, { id: 53, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 3625, date: '2013/03/25', }, { id: 54, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 1200, date: '2013/03/07', }, { id: 55, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 2700, date: '2013/03/19', }, { id: 56, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 5950, date: '2013/03/24', }, { id: 57, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 5120, date: '2013/03/08', }, { id: 58, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 1980, date: '2013/03/17', }, { id: 59, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1110, date: '2013/03/08', }, { id: 60, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 980, date: '2013/03/21', }, { id: 61, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 5460, date: '2013/03/19', }, { id: 62, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 3800, date: '2013/03/12', }, { id: 63, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2610, date: '2013/03/04', }, { id: 64, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 2010, date: '2013/03/23', }, { id: 65, region: 'North America', country: 'USA', city: 'New York', sales: 7680, date: '2013/04/15', }, { id: 66, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 1325, date: '2013/04/07', }, { id: 67, region: 'North America', country: 'USA', city: 'Denver', sales: 2835, date: '2013/04/10', }, { id: 68, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 3660, date: '2013/04/10', }, { id: 69, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 390, date: '2013/04/12', }, { id: 70, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 4420, date: '2013/04/08', }, { id: 71, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 1755, date: '2013/04/13', }, { id: 72, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2580, date: '2013/04/15', }, { id: 73, region: 'Europe', country: 'GBR', city: 'London', sales: 850, date: '2013/04/01', }, { id: 74, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 2825, date: '2013/04/10', }, { id: 75, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 540, date: '2013/04/06', }, { id: 76, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 1110, date: '2013/04/16', }, { id: 77, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 6850, date: '2013/04/19', }, { id: 78, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 1940, date: '2013/04/23', }, { id: 79, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 1980, date: '2013/04/21', }, { id: 80, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 3090, date: '2013/04/03', }, { id: 81, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1640, date: '2013/04/24', }, { id: 82, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 3585, date: '2013/04/01', }, { id: 83, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1770, date: '2013/04/01', }, { id: 84, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 4005, date: '2013/04/04', }, { id: 85, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2870, date: '2013/04/02', }, { id: 86, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 960, date: '2013/04/20', }, { id: 87, region: 'North America', country: 'USA', city: 'New York', sales: 8640, date: '2013/05/14', }, { id: 88, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 5450, date: '2013/05/24', }, { id: 89, region: 'North America', country: 'USA', city: 'Denver', sales: 2535, date: '2013/05/07', }, { id: 90, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1155, date: '2013/05/20', }, { id: 91, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 3140, date: '2013/05/18', }, { id: 92, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 2260, date: '2013/05/19', }, { id: 93, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 1215, date: '2013/05/23', }, { id: 94, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1210, date: '2013/05/08', }, { id: 95, region: 'Europe', country: 'GBR', city: 'London', sales: 875, date: '2013/05/25', }, { id: 96, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 5400, date: '2013/05/03', }, { id: 97, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 5940, date: '2013/05/25', }, { id: 98, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 9210, date: '2013/05/22', }, { id: 99, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 7950, date: '2013/05/12', }, { id: 100, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 3740, date: '2013/05/24', }, { id: 101, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 990, date: '2013/05/02', }, { id: 102, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 3190, date: '2013/05/03', }, { id: 103, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 2430, date: '2013/05/11', }, { id: 104, region: 'North America', country: 'USA', city: 'New York', sales: 7380, date: '2013/06/15', }, { id: 105, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 4475, date: '2013/06/08', }, { id: 106, region: 'North America', country: 'USA', city: 'Denver', sales: 1290, date: '2013/06/10', }, { id: 107, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 2250, date: '2013/06/10', }, { id: 108, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 350, date: '2013/06/22', }, { id: 109, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 5480, date: '2013/06/24', }, { id: 110, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 2355, date: '2013/06/10', }, { id: 111, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1960, date: '2013/06/23', }, { id: 112, region: 'Europe', country: 'GBR', city: 'London', sales: 4125, date: '2013/06/06', }, { id: 113, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 7925, date: '2013/06/12', }, { id: 114, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 1120, date: '2013/06/22', }, { id: 115, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 5130, date: '2013/06/10', }, { id: 116, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 2475, date: '2013/06/10', }, { id: 117, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 2100, date: '2013/06/06', }, { id: 118, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 3570, date: '2013/06/10', }, { id: 119, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 550, date: '2013/06/02', }, { id: 120, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 2850, date: '2013/06/26', }, { id: 121, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 1460, date: '2013/06/17', }, { id: 122, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 960, date: '2013/06/17', }, { id: 123, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1520, date: '2013/06/03', }, { id: 124, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 6750, date: '2013/06/21', }, { id: 125, region: 'North America', country: 'USA', city: 'New York', sales: 7260, date: '2013/07/14', }, { id: 126, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 2450, date: '2013/07/11', }, { id: 127, region: 'North America', country: 'USA', city: 'Denver', sales: 3540, date: '2013/07/02', }, { id: 128, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1950, date: '2013/07/03', }, { id: 129, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 360, date: '2013/07/07', }, { id: 130, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 4500, date: '2013/07/03', }, { id: 131, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 4575, date: '2013/07/21', }, { id: 132, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2310, date: '2013/07/18', }, { id: 133, region: 'Europe', country: 'GBR', city: 'London', sales: 7500, date: '2013/07/04', }, { id: 134, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 3575, date: '2013/07/23', }, { id: 135, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 760, date: '2013/07/01', }, { id: 136, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 3480, date: '2013/07/23', }, { id: 137, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 4875, date: '2013/07/11', }, { id: 138, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 4980, date: '2013/07/19', }, { id: 139, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2580, date: '2013/07/04', }, { id: 140, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 2650, date: '2013/07/16', }, { id: 141, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1190, date: '2013/07/02', }, { id: 142, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 960, date: '2013/07/26', }, { id: 143, region: 'North America', country: 'USA', city: 'New York', sales: 3600, date: '2013/08/08', }, { id: 144, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 2250, date: '2013/08/01', }, { id: 145, region: 'North America', country: 'USA', city: 'Denver', sales: 1275, date: '2013/08/02', }, { id: 146, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 3885, date: '2013/08/14', }, { id: 147, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 1900, date: '2013/08/05', }, { id: 148, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 2300, date: '2013/08/09', }, { id: 149, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 2895, date: '2013/08/15', }, { id: 150, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 350, date: '2013/08/20', }, { id: 151, region: 'Europe', country: 'GBR', city: 'London', sales: 4200, date: '2013/08/22', }, { id: 152, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 7175, date: '2013/08/14', }, { id: 153, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 4420, date: '2013/08/24', }, { id: 154, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 6990, date: '2013/08/22', }, { id: 155, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 2125, date: '2013/08/05', }, { id: 156, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 2220, date: '2013/08/16', }, { id: 157, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 1575, date: '2013/08/23', }, { id: 158, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1880, date: '2013/08/12', }, { id: 159, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 710, date: '2013/08/25', }, { id: 160, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 390, date: '2013/08/20', }, { id: 161, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 4635, date: '2013/08/04', }, { id: 162, region: 'North America', country: 'USA', city: 'Denver', sales: 4350, date: '2013/08/19', }, { id: 163, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 6020, date: '2013/08/02', }, { id: 164, region: 'North America', country: 'USA', city: 'New York', sales: 3660, date: '2013/08/19', }, { id: 165, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 4525, date: '2013/08/24', }, { id: 166, region: 'North America', country: 'USA', city: 'New York', sales: 4410, date: '2013/09/12', }, { id: 167, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 1725, date: '2013/09/07', }, { id: 168, region: 'North America', country: 'USA', city: 'Denver', sales: 2715, date: '2013/09/14', }, { id: 169, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 2820, date: '2013/09/08', }, { id: 170, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2310, date: '2013/09/12', }, { id: 171, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 780, date: '2013/09/08', }, { id: 172, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 2370, date: '2013/09/19', }, { id: 173, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1410, date: '2013/09/09', }, { id: 174, region: 'Europe', country: 'GBR', city: 'London', sales: 1825, date: '2013/09/23', }, { id: 175, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 4075, date: '2013/09/06', }, { id: 176, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 1020, date: '2013/09/04', }, { id: 177, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 2820, date: '2013/09/08', }, { id: 178, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 3050, date: '2013/09/04', }, { id: 179, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 5080, date: '2013/09/25', }, { id: 180, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 1125, date: '2013/09/13', }, { id: 181, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 850, date: '2013/09/24', }, { id: 182, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1440, date: '2013/09/19', }, { id: 183, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1950, date: '2013/09/02', }, { id: 184, region: 'North America', country: 'USA', city: 'New York', sales: 6390, date: '2013/10/11', }, { id: 185, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 4625, date: '2013/10/02', }, { id: 186, region: 'North America', country: 'USA', city: 'Denver', sales: 3510, date: '2013/10/24', }, { id: 187, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 2730, date: '2013/10/15', }, { id: 188, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2070, date: '2013/10/15', }, { id: 189, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 2320, date: '2013/10/18', }, { id: 190, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 4260, date: '2013/10/24', }, { id: 191, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 840, date: '2013/10/18', }, { id: 192, region: 'Europe', country: 'GBR', city: 'London', sales: 7300, date: '2013/10/24', }, { id: 193, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 5950, date: '2013/10/11', }, { id: 194, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 3220, date: '2013/10/25', }, { id: 195, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 4470, date: '2013/10/05', }, { id: 196, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 3675, date: '2013/10/23', }, { id: 197, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 4260, date: '2013/10/01', }, { id: 198, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 4245, date: '2013/10/26', }, { id: 199, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1470, date: '2013/10/01', }, { id: 200, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1810, date: '2013/10/02', }, { id: 201, region: 'North America', country: 'USA', city: 'New York', sales: 600, date: '2013/10/23', }, { id: 202, region: 'North America', country: 'USA', city: 'New York', sales: 7500, date: '2013/11/03', }, { id: 203, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 4625, date: '2013/11/02', }, { id: 204, region: 'North America', country: 'USA', city: 'Denver', sales: 2625, date: '2013/11/09', }, { id: 205, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1440, date: '2013/11/15', }, { id: 206, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2420, date: '2013/11/15', }, { id: 207, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 4180, date: '2013/11/15', }, { id: 208, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 3720, date: '2013/11/25', }, { id: 209, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2730, date: '2013/11/08', }, { id: 210, region: 'Europe', country: 'GBR', city: 'London', sales: 3775, date: '2013/11/17', }, { id: 211, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 3525, date: '2013/11/15', }, { id: 212, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 5320, date: '2013/11/08', }, { id: 213, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 7050, date: '2013/11/14', }, { id: 214, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 4200, date: '2013/11/18', }, { id: 215, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 4960, date: '2013/11/04', }, { id: 216, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2280, date: '2013/11/13', }, { id: 217, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 590, date: '2013/11/11', }, { id: 218, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 810, date: '2013/11/12', }, { id: 219, region: 'Europe', country: 'GBR', city: 'London', sales: 2625, date: '2013/11/07', }, { id: 220, region: 'North America', country: 'USA', city: 'New York', sales: 8280, date: '2013/12/01', }, { id: 221, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 5650, date: '2013/12/19', }, { id: 222, region: 'North America', country: 'USA', city: 'Denver', sales: 2760, date: '2013/12/14', }, { id: 223, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 2670, date: '2013/12/03', }, { id: 224, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2520, date: '2013/12/20', }, { id: 225, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 4080, date: '2013/12/21', }, { id: 226, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 4140, date: '2013/12/22', }, { id: 227, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 390, date: '2013/12/04', }, { id: 228, region: 'Europe', country: 'GBR', city: 'London', sales: 1400, date: '2013/12/19', }, { id: 229, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 7275, date: '2013/12/22', }, { id: 230, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 4100, date: '2013/12/20', }, { id: 231, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 7290, date: '2013/12/05', }, { id: 232, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 625, date: '2013/12/22', }, { id: 233, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 4460, date: '2013/12/12', }, { id: 234, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 3825, date: '2013/12/13', }, { id: 235, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 2850, date: '2013/12/17', }, { id: 236, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 2780, date: '2013/12/07', }, { id: 237, region: 'North America', country: 'USA', city: 'New York', sales: 840, date: '2013/12/18', }, { id: 238, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 2970, date: '2013/12/23', }, { id: 239, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 945, date: '2013/12/06', }, { id: 240, region: 'North America', country: 'USA', city: 'Denver', sales: 2625, date: '2013/12/04', }, { id: 241, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 390, date: '2013/12/01', }, { id: 242, region: 'North America', country: 'USA', city: 'New York', sales: 7710, date: '2014/01/18', }, { id: 243, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 7975, date: '2014/01/10', }, { id: 244, region: 'North America', country: 'USA', city: 'Denver', sales: 3285, date: '2014/01/13', }, { id: 245, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 2580, date: '2014/01/22', }, { id: 246, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2160, date: '2014/01/26', }, { id: 247, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 1100, date: '2014/01/25', }, { id: 248, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 4425, date: '2014/01/21', }, { id: 249, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1360, date: '2014/01/22', }, { id: 250, region: 'Europe', country: 'GBR', city: 'London', sales: 3250, date: '2014/01/14', }, { id: 251, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 5550, date: '2014/01/21', }, { id: 252, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 2860, date: '2014/01/25', }, { id: 253, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 3450, date: '2014/01/24', }, { id: 254, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 5425, date: '2014/01/11', }, { id: 255, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 4860, date: '2014/01/12', }, { id: 256, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 4695, date: '2014/01/16', }, { id: 257, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 610, date: '2014/01/05', }, { id: 258, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1580, date: '2014/01/15', }, { id: 259, region: 'North America', country: 'USA', city: 'New York', sales: 3780, date: '2014/02/18', }, { id: 260, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 5400, date: '2014/02/21', }, { id: 261, region: 'North America', country: 'USA', city: 'Denver', sales: 630, date: '2014/02/18', }, { id: 262, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 3960, date: '2014/02/04', }, { id: 263, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2010, date: '2014/02/25', }, { id: 264, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 5000, date: '2014/02/01', }, { id: 265, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 1995, date: '2014/02/20', }, { id: 266, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 860, date: '2014/02/12', }, { id: 267, region: 'Europe', country: 'GBR', city: 'London', sales: 2150, date: '2014/02/10', }, { id: 268, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 4050, date: '2014/02/06', }, { id: 269, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 2960, date: '2014/02/18', }, { id: 270, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 3390, date: '2014/02/03', }, { id: 271, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 4425, date: '2014/02/15', }, { id: 272, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 1180, date: '2014/02/23', }, { id: 273, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 360, date: '2014/02/08', }, { id: 274, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 2310, date: '2014/02/13', }, { id: 275, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1770, date: '2014/02/20', }, { id: 276, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 3060, date: '2014/02/26', }, { id: 277, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 1750, date: '2014/02/12', }, { id: 278, region: 'North America', country: 'USA', city: 'New York', sales: 2280, date: '2014/03/09', }, { id: 279, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 7600, date: '2014/03/25', }, { id: 280, region: 'North America', country: 'USA', city: 'Denver', sales: 1035, date: '2014/03/23', }, { id: 281, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1245, date: '2014/03/01', }, { id: 282, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2860, date: '2014/03/19', }, { id: 283, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 440, date: '2014/03/19', }, { id: 284, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 4665, date: '2014/03/02', }, { id: 285, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2270, date: '2014/03/15', }, { id: 286, region: 'Europe', country: 'GBR', city: 'London', sales: 5000, date: '2014/03/09', }, { id: 287, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 5100, date: '2014/03/23', }, { id: 288, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 2120, date: '2014/03/11', }, { id: 289, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 9510, date: '2014/03/19', }, { id: 290, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 7600, date: '2014/03/21', }, { id: 291, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 5420, date: '2014/03/15', }, { id: 292, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 1980, date: '2014/03/05', }, { id: 293, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1820, date: '2014/03/07', }, { id: 294, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1670, date: '2014/03/21', }, { id: 295, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 4800, date: '2014/03/08', }, { id: 296, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 2925, date: '2014/03/03', }, { id: 297, region: 'North America', country: 'USA', city: 'New York', sales: 2940, date: '2014/04/11', }, { id: 298, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 3525, date: '2014/04/13', }, { id: 299, region: 'North America', country: 'USA', city: 'Denver', sales: 2475, date: '2014/04/22', }, { id: 300, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 3315, date: '2014/04/08', }, { id: 301, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 3140, date: '2014/04/07', }, { id: 302, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 2520, date: '2014/04/01', }, { id: 303, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 1200, date: '2014/04/10', }, { id: 304, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2060, date: '2014/04/21', }, { id: 305, region: 'Europe', country: 'GBR', city: 'London', sales: 7875, date: '2014/04/02', }, { id: 306, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 1450, date: '2014/04/07', }, { id: 307, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 2640, date: '2014/04/22', }, { id: 308, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 4500, date: '2014/04/05', }, { id: 309, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 5050, date: '2014/04/11', }, { id: 310, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 2940, date: '2014/04/02', }, { id: 311, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2880, date: '2014/04/14', }, { id: 312, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1050, date: '2014/04/19', }, { id: 313, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1850, date: '2014/04/02', }, { id: 314, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 3160, date: '2014/04/01', }, { id: 315, region: 'Europe', country: 'GBR', city: 'London', sales: 875, date: '2014/04/04', }, { id: 316, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 1380, date: '2014/04/21', }, { id: 317, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 3060, date: '2014/04/06', }, { id: 318, region: 'North America', country: 'USA', city: 'New York', sales: 6690, date: '2014/05/19', }, { id: 319, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 4525, date: '2014/05/15', }, { id: 320, region: 'North America', country: 'USA', city: 'Denver', sales: 4665, date: '2014/05/10', }, { id: 321, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 4530, date: '2014/05/18', }, { id: 322, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 1330, date: '2014/05/08', }, { id: 323, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 1720, date: '2014/05/20', }, { id: 324, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 3750, date: '2014/05/16', }, { id: 325, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1290, date: '2014/05/10', }, { id: 326, region: 'Europe', country: 'GBR', city: 'London', sales: 4925, date: '2014/05/14', }, { id: 327, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 4300, date: '2014/05/22', }, { id: 328, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 5740, date: '2014/05/08', }, { id: 329, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 1440, date: '2014/05/21', }, { id: 330, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 5975, date: '2014/05/25', }, { id: 331, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 4440, date: '2014/05/05', }, { id: 332, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2310, date: '2014/05/24', }, { id: 333, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 2250, date: '2014/05/06', }, { id: 334, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 2320, date: '2014/05/14', }, { id: 335, region: 'North America', country: 'USA', city: 'New York', sales: 5190, date: '2014/06/26', }, { id: 336, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 925, date: '2014/06/04', }, { id: 337, region: 'North America', country: 'USA', city: 'Denver', sales: 3240, date: '2014/06/20', }, { id: 338, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 3180, date: '2014/06/23', }, { id: 339, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 780, date: '2014/06/13', }, { id: 340, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 4680, date: '2014/06/08', }, { id: 341, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 2475, date: '2014/06/25', }, { id: 342, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1920, date: '2014/06/20', }, { id: 343, region: 'Europe', country: 'GBR', city: 'London', sales: 7500, date: '2014/06/25', }, { id: 344, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 5025, date: '2014/06/26', }, { id: 345, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 2400, date: '2014/06/08', }, { id: 346, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 5430, date: '2014/06/03', }, { id: 347, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 4475, date: '2014/06/19', }, { id: 348, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 1420, date: '2014/06/20', }, { id: 349, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2670, date: '2014/06/25', }, { id: 350, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1930, date: '2014/06/02', }, { id: 351, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 580, date: '2014/06/25', }, { id: 352, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1620, date: '2014/06/12', }, { id: 353, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 4530, date: '2014/06/02', }, { id: 354, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 6025, date: '2014/06/23', }, { id: 355, region: 'North America', country: 'USA', city: 'New York', sales: 3540, date: '2014/07/21', }, { id: 356, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 3000, date: '2014/07/01', }, { id: 357, region: 'North America', country: 'USA', city: 'Denver', sales: 3240, date: '2014/07/26', }, { id: 358, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 2265, date: '2014/07/22', }, { id: 359, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 400, date: '2014/07/09', }, { id: 360, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 1460, date: '2014/07/08', }, { id: 361, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 1620, date: '2014/07/18', }, { id: 362, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2400, date: '2014/07/25', }, { id: 363, region: 'Europe', country: 'GBR', city: 'London', sales: 5275, date: '2014/07/04', }, { id: 364, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 4475, date: '2014/07/03', }, { id: 365, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 3980, date: '2014/07/21', }, { id: 366, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 5700, date: '2014/07/18', }, { id: 367, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 5575, date: '2014/07/01', }, { id: 368, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 2160, date: '2014/07/02', }, { id: 369, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 960, date: '2014/07/09', }, { id: 370, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1280, date: '2014/07/04', }, { id: 371, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1040, date: '2014/07/02', }, { id: 372, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1760, date: '2014/07/25', }, { id: 373, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 4080, date: '2014/07/07', }, { id: 374, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1000, date: '2014/07/21', }, { id: 375, region: 'North America', country: 'USA', city: 'New York', sales: 1770, date: '2014/08/23', }, { id: 376, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 2700, date: '2014/08/09', }, { id: 377, region: 'North America', country: 'USA', city: 'Denver', sales: 2175, date: '2014/08/03', }, { id: 378, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 3375, date: '2014/08/11', }, { id: 379, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2040, date: '2014/08/01', }, { id: 380, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 3000, date: '2014/08/21', }, { id: 381, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 3900, date: '2014/08/16', }, { id: 382, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1370, date: '2014/08/20', }, { id: 383, region: 'Europe', country: 'GBR', city: 'London', sales: 5700, date: '2014/08/01', }, { id: 384, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 1275, date: '2014/08/22', }, { id: 385, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 4060, date: '2014/08/13', }, { id: 386, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 4560, date: '2014/08/20', }, { id: 387, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 7575, date: '2014/08/20', }, { id: 388, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 700, date: '2014/08/25', }, { id: 389, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2400, date: '2014/08/16', }, { id: 390, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1390, date: '2014/08/15', }, { id: 391, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1320, date: '2014/08/09', }, { id: 392, region: 'North America', country: 'USA', city: 'Denver', sales: 1680, date: '2014/08/09', }, { id: 393, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 1500, date: '2014/08/11', }, { id: 394, region: 'North America', country: 'USA', city: 'New York', sales: 6150, date: '2014/09/21', }, { id: 395, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 3675, date: '2014/09/02', }, { id: 396, region: 'North America', country: 'USA', city: 'Denver', sales: 2250, date: '2014/09/05', }, { id: 397, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 3585, date: '2014/09/10', }, { id: 398, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 1470, date: '2014/09/01', }, { id: 399, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 2260, date: '2014/09/02', }, { id: 400, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 3765, date: '2014/09/03', }, { id: 401, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1640, date: '2014/09/04', }, { id: 402, region: 'Europe', country: 'GBR', city: 'London', sales: 4475, date: '2014/09/09', }, { id: 403, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 5975, date: '2014/09/04', }, { id: 404, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 1100, date: '2014/09/16', }, { id: 405, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 9210, date: '2014/09/09', }, { id: 406, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 3700, date: '2014/09/01', }, { id: 407, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 3620, date: '2014/09/19', }, { id: 408, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 4275, date: '2014/09/01', }, { id: 409, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 2370, date: '2014/09/03', }, { id: 410, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1870, date: '2014/09/10', }, { id: 411, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 2070, date: '2014/09/25', }, { id: 412, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 5025, date: '2014/09/19', }, { id: 413, region: 'North America', country: 'USA', city: 'New York', sales: 1080, date: '2014/10/15', }, { id: 414, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 1400, date: '2014/10/22', }, { id: 415, region: 'North America', country: 'USA', city: 'Denver', sales: 4260, date: '2014/10/01', }, { id: 416, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 2745, date: '2014/10/01', }, { id: 417, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2920, date: '2014/10/23', }, { id: 418, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 3520, date: '2014/10/11', }, { id: 419, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 4035, date: '2014/10/20', }, { id: 420, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1730, date: '2014/10/05', }, { id: 421, region: 'Europe', country: 'GBR', city: 'London', sales: 975, date: '2014/10/06', }, { id: 422, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 5700, date: '2014/10/06', }, { id: 423, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 5080, date: '2014/10/18', }, { id: 424, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 1230, date: '2014/10/11', }, { id: 425, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 600, date: '2014/10/08', }, { id: 426, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 3700, date: '2014/10/08', }, { id: 427, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 3375, date: '2014/10/11', }, { id: 428, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1500, date: '2014/10/17', }, { id: 429, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 370, date: '2014/10/05', }, { id: 430, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2340, date: '2014/10/16', }, { id: 431, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 1080, date: '2014/10/08', }, { id: 432, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 2775, date: '2014/10/21', }, { id: 433, region: 'North America', country: 'USA', city: 'New York', sales: 4380, date: '2014/11/09', }, { id: 434, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 5500, date: '2014/11/21', }, { id: 435, region: 'North America', country: 'USA', city: 'Denver', sales: 1920, date: '2014/11/24', }, { id: 436, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 765, date: '2014/11/24', }, { id: 437, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 370, date: '2014/11/18', }, { id: 438, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 3500, date: '2014/11/25', }, { id: 439, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 825, date: '2014/11/09', }, { id: 440, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 490, date: '2014/11/23', }, { id: 441, region: 'Europe', country: 'GBR', city: 'London', sales: 7075, date: '2014/11/20', }, { id: 442, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 1350, date: '2014/11/25', }, { id: 443, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 1440, date: '2014/11/15', }, { id: 444, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 1110, date: '2014/11/03', }, { id: 445, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 1150, date: '2014/11/23', }, { id: 446, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 2040, date: '2014/11/20', }, { id: 447, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 3090, date: '2014/11/24', }, { id: 448, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1940, date: '2014/11/24', }, { id: 449, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 3090, date: '2014/11/16', }, { id: 450, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 4900, date: '2014/11/05', }, { id: 451, region: 'North America', country: 'USA', city: 'Denver', sales: 3465, date: '2014/11/07', }, { id: 452, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1110, date: '2014/11/20', }, { id: 453, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 1650, date: '2014/11/02', }, { id: 454, region: 'North America', country: 'USA', city: 'New York', sales: 5280, date: '2014/12/04', }, { id: 455, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 3075, date: '2014/12/02', }, { id: 456, region: 'North America', country: 'USA', city: 'Denver', sales: 690, date: '2014/12/07', }, { id: 457, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1305, date: '2014/12/15', }, { id: 458, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 1970, date: '2014/12/01', }, { id: 459, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 3760, date: '2014/12/18', }, { id: 460, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 1920, date: '2014/12/22', }, { id: 461, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1360, date: '2014/12/12', }, { id: 462, region: 'Europe', country: 'GBR', city: 'London', sales: 2525, date: '2014/12/06', }, { id: 463, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 5575, date: '2014/12/20', }, { id: 464, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 5560, date: '2014/12/10', }, { id: 465, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 2820, date: '2014/12/10', }, { id: 466, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 4000, date: '2014/12/12', }, { id: 467, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 5820, date: '2014/12/02', }, { id: 468, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 1275, date: '2014/12/12', }, { id: 469, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1310, date: '2014/12/01', }, { id: 470, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 2180, date: '2014/12/26', }, { id: 471, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 4470, date: '2014/12/17', }, { id: 472, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2990, date: '2014/12/15', }, { id: 473, region: 'Europe', country: 'GBR', city: 'London', sales: 7650, date: '2014/12/18', }, { id: 474, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 780, date: '2014/12/02', }, { id: 475, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2970, date: '2014/12/13', }, { id: 476, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 1155, date: '2014/12/05', }, { id: 477, region: 'North America', country: 'USA', city: 'New York', sales: 4470, date: '2015/01/10', }, { id: 478, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 1125, date: '2015/01/21', }, { id: 479, region: 'North America', country: 'USA', city: 'Denver', sales: 645, date: '2015/01/17', }, { id: 480, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 675, date: '2015/01/05', }, { id: 481, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2840, date: '2015/01/05', }, { id: 482, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 2660, date: '2015/01/04', }, { id: 483, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 4560, date: '2015/01/12', }, { id: 484, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2880, date: '2015/01/20', }, { id: 485, region: 'Europe', country: 'GBR', city: 'London', sales: 500, date: '2015/01/02', }, { id: 486, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 3925, date: '2015/01/07', }, { id: 487, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 5660, date: '2015/01/18', }, { id: 488, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 4830, date: '2015/01/13', }, { id: 489, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 3075, date: '2015/01/22', }, { id: 490, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 3120, date: '2015/01/14', }, { id: 491, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 3525, date: '2015/01/23', }, { id: 492, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1930, date: '2015/01/09', }, { id: 493, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 2890, date: '2015/01/02', }, { id: 494, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 1545, date: '2015/01/17', }, { id: 495, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 3630, date: '2015/01/20', }, { id: 496, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 4035, date: '2015/01/14', }, { id: 497, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 345, date: '2015/01/06', }, { id: 498, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 7000, date: '2015/01/07', }, { id: 499, region: 'North America', country: 'USA', city: 'New York', sales: 3060, date: '2015/02/13', }, { id: 500, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 6425, date: '2015/02/04', }, { id: 501, region: 'North America', country: 'USA', city: 'Denver', sales: 615, date: '2015/02/22', }, { id: 502, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1755, date: '2015/02/07', }, { id: 503, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 1540, date: '2015/02/21', }, { id: 504, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 2820, date: '2015/02/24', }, { id: 505, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 4305, date: '2015/02/10', }, { id: 506, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 1520, date: '2015/02/26', }, { id: 507, region: 'Europe', country: 'GBR', city: 'London', sales: 4725, date: '2015/02/18', }, { id: 508, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 6750, date: '2015/02/16', }, { id: 509, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 5540, date: '2015/02/07', }, { id: 510, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 9300, date: '2015/02/03', }, { id: 511, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 3700, date: '2015/02/26', }, { id: 512, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 740, date: '2015/02/01', }, { id: 513, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 4755, date: '2015/02/23', }, { id: 514, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 2570, date: '2015/02/20', }, { id: 515, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 2860, date: '2015/02/19', }, { id: 516, region: 'North America', country: 'USA', city: 'New York', sales: 5430, date: '2015/03/21', }, { id: 517, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 4525, date: '2015/03/21', }, { id: 518, region: 'North America', country: 'USA', city: 'Denver', sales: 1515, date: '2015/03/10', }, { id: 519, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 630, date: '2015/03/15', }, { id: 520, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 1310, date: '2015/03/01', }, { id: 521, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 3200, date: '2015/03/17', }, { id: 522, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 3945, date: '2015/03/20', }, { id: 523, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2990, date: '2015/03/18', }, { id: 524, region: 'Europe', country: 'GBR', city: 'London', sales: 1125, date: '2015/03/22', }, { id: 525, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 7950, date: '2015/03/17', }, { id: 526, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 2960, date: '2015/03/25', }, { id: 527, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 3930, date: '2015/03/23', }, { id: 528, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 6975, date: '2015/03/02', }, { id: 529, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 4220, date: '2015/03/17', }, { id: 530, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 3090, date: '2015/03/25', }, { id: 531, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 2380, date: '2015/03/01', }, { id: 532, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1510, date: '2015/03/07', }, { id: 533, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 1020, date: '2015/03/19', }, { id: 534, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 6700, date: '2015/03/26', }, { id: 535, region: 'North America', country: 'USA', city: 'New York', sales: 4890, date: '2015/04/02', }, { id: 536, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 7225, date: '2015/04/13', }, { id: 537, region: 'North America', country: 'USA', city: 'Denver', sales: 795, date: '2015/04/07', }, { id: 538, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1785, date: '2015/04/03', }, { id: 539, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 1850, date: '2015/04/03', }, { id: 540, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 5120, date: '2015/04/12', }, { id: 541, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 615, date: '2015/04/07', }, { id: 542, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2860, date: '2015/04/05', }, { id: 543, region: 'Europe', country: 'GBR', city: 'London', sales: 1525, date: '2015/04/24', }, { id: 544, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 7425, date: '2015/04/15', }, { id: 545, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 6080, date: '2015/04/13', }, { id: 546, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 9390, date: '2015/04/19', }, { id: 547, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 3200, date: '2015/04/26', }, { id: 548, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 4380, date: '2015/04/05', }, { id: 549, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 4725, date: '2015/04/06', }, { id: 550, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 930, date: '2015/04/25', }, { id: 551, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 1910, date: '2015/04/05', }, { id: 552, region: 'Europe', country: 'GBR', city: 'London', sales: 2725, date: '2015/04/16', }, { id: 553, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 4720, date: '2015/04/02', }, { id: 554, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 2800, date: '2015/04/26', }, { id: 555, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 3780, date: '2015/04/24', }, { id: 556, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 2340, date: '2015/04/17', }, { id: 557, region: 'North America', country: 'USA', city: 'New York', sales: 4830, date: '2015/05/12', }, { id: 558, region: 'North America', country: 'USA', city: 'Los Angeles', sales: 2075, date: '2015/05/23', }, { id: 559, region: 'North America', country: 'USA', city: 'Denver', sales: 3420, date: '2015/05/21', }, { id: 560, region: 'North America', country: 'CAN', city: 'Vancouver', sales: 1440, date: '2015/05/10', }, { id: 561, region: 'North America', country: 'CAN', city: 'Edmonton', sales: 1680, date: '2015/05/15', }, { id: 562, region: 'South America', country: 'BRA', city: 'Rio de Janeiro', sales: 3440, date: '2015/05/16', }, { id: 563, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 4695, date: '2015/05/10', }, { id: 564, region: 'South America', country: 'PRY', city: 'Asuncion', sales: 2380, date: '2015/05/06', }, { id: 565, region: 'Europe', country: 'GBR', city: 'London', sales: 1875, date: '2015/05/25', }, { id: 566, region: 'Europe', country: 'DEU', city: 'Berlin', sales: 7550, date: '2015/05/14', }, { id: 567, region: 'Europe', country: 'ESP', city: 'Madrid', sales: 3340, date: '2015/05/01', }, { id: 568, region: 'Asia', country: 'JPN', city: 'Tokyo', sales: 8370, date: '2015/05/13', }, { id: 569, region: 'Asia', country: 'KOR', city: 'Seoul', sales: 3550, date: '2015/05/26', }, { id: 570, region: 'Australia', country: 'AUS', city: 'Sydney', sales: 2620, date: '2015/05/17', }, { id: 571, region: 'Australia', country: 'AUS', city: 'Melbourne', sales: 2400, date: '2015/05/21', }, { id: 572, region: 'Africa', country: 'ZAF', city: 'Pretoria', sales: 1740, date: '2015/05/21', }, { id: 573, region: 'Africa', country: 'EGY', city: 'Cairo', sales: 500, date: '2015/05/26', }, { id: 574, region: 'South America', country: 'ARG', city: 'Buenos Aires', sales: 780, date: '2015/05/07', }];

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/25.1.6/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/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>

Vue Pivot Grid - State Persistence