DataGrid ExcelJSExportMultipleGrids interface/arraystore

Author: flagmanAndrew

apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Angular/app/app.component.ts

@@ -6,7 +6,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import {
   DxButtonModule, DxTabPanelModule, DxDataGridModule, DxDataGridComponent,
 } from 'devextreme-angular';
-import { DataSourceOptions } from 'devextreme-angular/common/data';
+import { ArrayStore, DataSourceOptions } from 'devextreme-angular/common/data';
 import { Workbook } from 'devextreme-exceljs-fork';
 import { saveAs } from 'file-saver-es';
 // Our demo infrastructure requires us to use 'file-saver-es'. We recommend that you use the official 'file-saver' package in your applications.
@@ -41,13 +41,19 @@ export class AppComponent {
 
   constructor(service: Service) {
     this.priceDataSource = {
-      store: service.getProducts(),
+      store: new ArrayStore({
+        data: service.getProducts(),
+        key: 'Product_ID',
+      }),
       select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
       filter: ['Product_ID', '<', 10],
     };
 
     this.ratingDataSource = {
-      store: service.getProducts(),
+      store: new ArrayStore({
+        data: service.getProducts(),
+        key: 'Product_ID',
+      }),
       select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
       filter: ['Product_ID', '<', 10],
     };

apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Angular/app/app.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-export class Product {
+export interface Product {
   Product_ID: number;
 
   Product_Name: string;

apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/React/App.tsx

@@ -2,20 +2,26 @@ import React, { useCallback, useRef } from 'react';
 import Button from 'devextreme-react/button';
 import TabPanel, { Item } from 'devextreme-react/tab-panel';
 import DataGrid, { Column, DataGridRef } from 'devextreme-react/data-grid';
-import { DataSourceOptions } from 'devextreme-react/common/data';
+import { ArrayStore, DataSourceOptions } from 'devextreme-react/common/data';
 import { Workbook } from 'devextreme-exceljs-fork';
 import { saveAs } from 'file-saver-es';
 import { exportDataGrid } from 'devextreme-react/common/export/excel';
 import { products } from './data.ts';
 
 const priceDataSource: DataSourceOptions = {
-  store: products,
+  store: new ArrayStore({
+    data: products,
+    key: 'Product_ID',
+  }),
   select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
   filter: ['Product_ID', '<', 10],
 };
 
 const ratingDataSource: DataSourceOptions = {
-  store: products,
+  store: new ArrayStore({
+    data: products,
+    key: 'Product_ID',
+  }),
   select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
   filter: ['Product_ID', '<', 10],
 };

apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/React/data.ts

@@ -1,4 +1,4 @@
-export class Product {
+export interface Product {
   Product_ID: number;
 
   Product_Name: string;

apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Vue/App.vue

@@ -88,20 +88,26 @@ import DxTabPanel, { DxItem } from 'devextreme-vue/tab-panel';
 import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';
 import { Workbook } from 'devextreme-exceljs-fork';
 import { type DataGridCell as ExсelDataGridCell, exportDataGrid } from 'devextreme-vue/common/export/excel';
-import { type DataSourceOptions } from 'devextreme-vue/common/data';
+import { ArrayStore, type DataSourceOptions } from 'devextreme-vue/common/data';
 import { products } from './data.ts';
 
 const priceGridRef = ref<DxDataGrid | null>(null);
 const ratingGridRef = ref<DxDataGrid | null>(null);
 
 const priceDataSource: DataSourceOptions = {
-  store: products,
+  store: new ArrayStore({
+    data: products,
+    key: 'Product_ID',
+  }),
   select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
   filter: ['Product_ID', '<', 10],
 };
 
 const ratingDataSource: DataSourceOptions = {
-  store: products,
+  store: new ArrayStore({
+    data: products,
+    key: 'Product_ID',
+  }),
   select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
   filter: ['Product_ID', '<', 10],
 };

apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Vue/data.ts

@@ -1,15 +1,15 @@
-export class Product {
-  Product_ID: number = 0;
+export interface Product {
+  Product_ID: number;
 
-  Product_Name: string = '';
+  Product_Name: string;
 
-  Product_Sale_Price: number = 0;
+  Product_Sale_Price: number;
 
-  Product_Retail_Price: number = 0;
+  Product_Retail_Price: number;
 
-  Product_Consumer_Rating: number = 0;
+  Product_Consumer_Rating: number;
 
-  Product_Category: string = '';
+  Product_Category: string;
 }
 
 export const products: Product[] = [