ColumnToggler demo for DataTable

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>
+                <template #header>
-                <Column field="year" header="Year"></Column>
+                    <div style="text-align:left">
-                <Column field="brand" header="Brand"></Column>
+                        <MultiSelect v-model="columns" :options="columnOptions" optionLabel="header" placeholder="Select Columns" style="width: 20em"/>
-                <Column field="color" header="Color"></Column>
+                    </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);

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);