24_2 refactor data grid simple array demo cherry-pick (#27813)

Signed-off-by: dxArtemiusz <[email protected]> Co-authored-by: John Limos <[email protected]>
DevExpress · Jul 23, 2024 · b9d8290 · b9d8290
1 parent b589fdc
commit b9d8290
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 11 deletions.
diff --git a/apps/demos/Demos/DataGrid/SimpleArray/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/SimpleArray/Angular/app/app.component.html
@@ -2,7 +2,7 @@
   id="gridContainer"
   [dataSource]="customers"
   keyExpr="ID"
-  [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']"
   [showBorders]="true"
 >
+  <dxi-column *ngFor="let column of columns" [dataField]="column"></dxi-column>
 </dx-data-grid>
diff --git a/apps/demos/Demos/DataGrid/SimpleArray/Angular/app/app.component.ts b/apps/demos/Demos/DataGrid/SimpleArray/Angular/app/app.component.ts
@@ -22,6 +22,8 @@ if (window && window.config.packageConfigPaths) {
 export class AppComponent {
   customers: Customer[];
 
+  columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+
   constructor(service: Service) {
     this.customers = service.getCustomers();
   }

diff --git a/apps/demos/Demos/DataGrid/SimpleArray/React/App.tsx b/apps/demos/Demos/DataGrid/SimpleArray/React/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import DataGrid from 'devextreme-react/data-grid';
+import DataGrid, { Column } from 'devextreme-react/data-grid';
 import { customers } from './data.ts';
 
 const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
@@ -10,7 +10,9 @@ const App = () => (
     keyExpr="ID"
     defaultColumns={columns}
     showBorders={true}
-  />
+  >
+    { columns.map((column, index) => <Column dataField={column} key={index} />) }
+  </DataGrid>
 );
 
 export default App;
diff --git a/apps/demos/Demos/DataGrid/SimpleArray/ReactJs/App.js b/apps/demos/Demos/DataGrid/SimpleArray/ReactJs/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import DataGrid from 'devextreme-react/data-grid';
+import DataGrid, { Column } from 'devextreme-react/data-grid';
 import { customers } from './data.js';
 
 const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
@@ -9,6 +9,13 @@ const App = () => (
     keyExpr="ID"
     defaultColumns={columns}
     showBorders={true}
-  />
+  >
+    {columns.map((column, index) => (
+      <Column
+        dataField={column}
+        key={index}
+      />
+    ))}
+  </DataGrid>
 );
 export default App;
diff --git a/apps/demos/Demos/DataGrid/SimpleArray/Vue/App.vue b/apps/demos/Demos/DataGrid/SimpleArray/Vue/App.vue
@@ -2,13 +2,17 @@
   <DxDataGrid
     :data-source="customers"
     key-expr="ID"
-    :columns="columns"
     :show-borders="true"
-  />
+  >
+    <DxColumn
+      v-for="column in columns"        
+      :data-field="column"
+    />
+  </DxDataGrid>
 </template>
 <script setup lang="ts">
-import DxDataGrid from 'devextreme-vue/data-grid';
-import { customers } from './data.ts';
+  import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';
+  import { customers } from './data.ts';
 
-const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
-</script>
+  const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+</script>