From ef1f1d8a1cdc81bf317a08347d259cbfb45d5bba Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 9 Jul 2019 16:07:57 +0300
Subject: [PATCH] ColumnToggler demo for DataTable

---
 .../datatable/DataTableColToggleDemo.vue      | 22 ++++++++++++++-----
 src/views/datatable/DataTableDemo.vue         |  4 ++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/views/datatable/DataTableColToggleDemo.vue b/src/views/datatable/DataTableColToggleDemo.vue
index 0b57b9f81..1523a1024 100644
--- a/src/views/datatable/DataTableColToggleDemo.vue
+++ b/src/views/datatable/DataTableColToggleDemo.vue
@@ -10,12 +10,14 @@
 		</div>
 
 		<div class="content-section implementation">
-			<h3 class="first">Basic</h3>
 			<DataTable :value="cars">
-                <Column field="vin" header="Vin"></Column>
-                <Column field="year" header="Year"></Column>
-                <Column field="brand" header="Brand"></Column>
-                <Column field="color" header="Color"></Column>
+                <template #header>
+                    <div style="text-align:left">
+                        <MultiSelect v-model="columns" :options="columnOptions" optionLabel="header" placeholder="Select Columns" style="width: 20em"/>
+                    </div>
+                </template>
+                <Column field="vin" header="Vin" />
+                <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
             </DataTable>
 		</div>
 	</div>
@@ -28,12 +30,22 @@ import DataTableSubMenu from './DataTableSubMenu';
 export default {
     data() {
         return {
+            columns: null,
+            columnOptions: null,
             cars: null
         }
     },
     carService: null,
     created() {
         this.carService = new CarService();
+
+        this.columns = [
+            {field: 'year', header: 'Year'},
+            {field: 'brand', header: 'Brand'},
+            {field: 'color', header: 'Color'}
+        ];
+
+        this.columnOptions = [...this.columns];
     },
     mounted() {
         this.carService.getCarsSmall().then(data => this.cars = data);
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index d7b98dcf1..22804dfe8 100644
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -19,7 +19,7 @@
             </DataTable>
 
             <h3>Dynamic Columns</h3>
-			<DataTable :value="cars" :columns="columns">
+			<DataTable :value="cars">
                 <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
             </DataTable>
 
@@ -52,7 +52,7 @@ export default {
             {field: 'year', header: 'Year'},
             {field: 'brand', header: 'Brand'},
             {field: 'color', header: 'Color'}
-        ]
+        ];
     },
     mounted() {
         this.carService.getCarsSmall().then(data => this.cars = data);