From fd04a1d00c85868ab055473f71cd1b9194382585 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 7 Aug 2019 14:57:15 +0300
Subject: [PATCH] Column Toggle Demo for TreeTable

---
 src/router.js                                 |  5 ++
 .../treetable/TreeTableColToggleDemo.vue      | 60 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/views/treetable/TreeTableColToggleDemo.vue

diff --git a/src/router.js b/src/router.js
index 8a827907e..1f9e7209f 100644
--- a/src/router.js
+++ b/src/router.js
@@ -415,6 +415,11 @@ export default new Router({
 			path: '/treetable/lazy',
 			name: 'treetablelazy',
 			component: () => import('./views/treetable/TreeTableLazyDemo.vue')
+        },
+        {
+			path: '/treetable/coltoggle',
+			name: 'treetablecoltoggle',
+			component: () => import('./views/treetable/TreeTableColToggleDemo.vue')
         },
 		{
 			path: '/tristatecheckbox',
diff --git a/src/views/treetable/TreeTableColToggleDemo.vue b/src/views/treetable/TreeTableColToggleDemo.vue
new file mode 100644
index 000000000..a7dbebdd5
--- /dev/null
+++ b/src/views/treetable/TreeTableColToggleDemo.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <TreeTableSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>TreeTable - Column Toggle</h1>
+                <p>MultiSelect component can be used to implement column toggle functionality.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <TreeTable :value="nodes">
+                <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="name" header="Name" :expander="true"></Column>
+                <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
+            </TreeTable>
+        </div>
+
+        <TreeTableDoc />
+    </div>
+</template>
+
+<script>
+import NodeService from '../../service/NodeService';
+import TreeTableDoc from './TreeTableDoc';
+import TreeTableSubMenu from './TreeTableSubMenu';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            columnOptions: null,
+            columns: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+
+        this.columns = [
+            {field: 'size', header: 'Size'},
+            {field: 'type', header: 'Type'}
+        ];
+
+        this.columnOptions = [...this.columns];
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    components: {
+        'TreeTableDoc': TreeTableDoc,
+        'TreeTableSubMenu': TreeTableSubMenu
+    }
+}
+</script>
\ No newline at end of file