24 1 refactor angular vue data grid simple array demo (#27688)

DevExpress · Jul 22, 2024 · 1eafd32 · 1eafd32
1 parent 1a51025
commit 1eafd32
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 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/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>