Cell Customization - Vue Pivot Grid

<template> <div> <DxPivotGrid :allow-sorting-by-summary="true" :allow-sorting="true" :allow-filtering="true" :allow-expand-all="true" :height="490" :show-borders="true" :data-source="dataSource" @exporting="onExporting" @cell-prepared="onCellPrepared" > <DxFieldChooser :enabled="false"/> <DxExport :enabled="true"/> </DxPivotGrid> </div> </template> <script setup lang="ts"> import DxPivotGrid, { DxExport, DxFieldChooser, type DxPivotGridTypes, } from 'devextreme-vue/pivot-grid'; import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; import { Workbook } from 'devextreme-exceljs-fork'; // Our demo infrastructure requires us to use 'file-saver-es'. // We recommend that you use the official 'file-saver' package in your applications. import { saveAs } from 'file-saver-es'; import { exportPivotGrid, type PivotGridCell } from 'devextreme-vue/common/export/excel'; import { sales } from './data.ts'; interface ConditionalAppearance { fill: string, font: string, bold?: boolean, } const dataSource = new PivotGridDataSource({ fields: [{ caption: 'Region', dataField: 'region', area: 'row', expanded: true, }, { caption: 'City', dataField: 'city', width: 150, area: 'row', }, { dataField: 'date', dataType: 'date', area: 'column', }, { caption: 'Sales', dataField: 'amount', dataType: 'number', summaryType: 'sum', format: 'currency', area: 'data', }], store: sales, }); function onExporting(e: DxPivotGridTypes.ExportingEvent) { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('Sales'); exportPivotGrid({ component: e.component, worksheet, customizeCell: ({ pivotCell, excelCell }: { pivotCell?: PivotGridCell, excelCell?: any }) => { if (pivotCell && (isDataCell(pivotCell) || isTotalCell(pivotCell))) { const appearance = getConditionalAppearance(pivotCell); Object.assign(excelCell, getExcelCellFormat(appearance)); } const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } }; excelCell.border = { bottom: borderStyle, left: borderStyle, right: borderStyle, top: borderStyle, }; }, }).then(() => { workbook.xlsx.writeBuffer().then((buffer) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'Sales.xlsx'); }); }); } function onCellPrepared({ cell, cellElement }: DxPivotGridTypes.CellPreparedEvent) { if (cell && cellElement && (isDataCell(cell) || isTotalCell(cell))) { const appearance = getConditionalAppearance(cell); Object.assign(cellElement.style, getCssStyles(appearance)); } } function isDataCell(cell: DxPivotGridTypes.Cell) { return (cell.rowType === 'D' && cell.columnType === 'D'); } function isTotalCell(cell: DxPivotGridTypes.Cell) { return (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT'); } function getExcelCellFormat({ fill, font, bold = false }: ConditionalAppearance) { return { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: fill } }, font: { color: { argb: font }, bold }, }; } function getCssStyles({ fill, font, bold = false }: ConditionalAppearance) { return { 'background-color': `#${fill}`, color: `#${font}`, 'font-weight': bold ? 'bold' : undefined, }; } function getConditionalAppearance(cell: DxPivotGridTypes.Cell): ConditionalAppearance { if (isTotalCell(cell)) { return { fill: 'F2F2F2', font: '3F3F3F', bold: true }; } const { value } = cell; if (value < 20000) { return { font: '9C0006', fill: 'FFC7CE' }; } if (value > 50000) { return { font: '006100', fill: 'C6EFCE' }; } return { font: '6E4600', fill: 'FFEB9C' }; } </script>

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

Vue Pivot Grid - Cell Customization