From 7bf9e916483dfd08a52429b920fc361d2d149649 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 6 Aug 2019 09:55:09 +0300
Subject: [PATCH] Programmatic Control for TreeTable and Dynamic Columns

---
 .../treetable/TreeTableRowLoader.vue          |  2 +-
 src/views/treetable/TreeTableDemo.vue         | 27 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/treetable/TreeTableRowLoader.vue b/src/components/treetable/TreeTableRowLoader.vue
index b5567176f..569e001f2 100644
--- a/src/components/treetable/TreeTableRowLoader.vue
+++ b/src/components/treetable/TreeTableRowLoader.vue
@@ -41,7 +41,7 @@ const TreeTableRowLoader = {
         const node = context.props.node;
         const expanded = context.props.expandedKeys && context.props.expandedKeys[node.key] === true;
 
-        if (expanded) {
+        if (expanded && node.children && node.children.length) {
             for (let childNode of node.children) {
                 let childNodeProps = {...context.props};
                 childNodeProps.node = childNode;
diff --git a/src/views/treetable/TreeTableDemo.vue b/src/views/treetable/TreeTableDemo.vue
index 747dcfd41..021cfcd01 100644
--- a/src/views/treetable/TreeTableDemo.vue
+++ b/src/views/treetable/TreeTableDemo.vue
@@ -15,7 +15,24 @@
                 <Column field="name" header="Name" :expander="true"></Column>
                 <Column field="size" header="Size"></Column>
                 <Column field="type" header="Type"></Column>
-            </TreeTable> 
+            </TreeTable>
+
+            <h3>Dynamic Columns</h3>
+            <TreeTable :value="nodes">
+                <Column v-for="col of columns" :key="col.field"
+                    :field="col.field" :header="col.header" :expander="col.expander"></Column>
+            </TreeTable>
+
+            <h3>Programmatic Control</h3>
+            <div style="margin-bottom: 1em">
+                <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+            </div>
+            <TreeTable :value="nodes" :expandedKeys="expandedKeys">
+                <Column field="name" header="Name" :expander="true"></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
         </div>
 
         <TreeTableDoc />
@@ -31,12 +48,19 @@ export default {
     data() {
         return {
             nodes: null,
+            columns: null,
             expandedKeys: {}
         }
     },
     nodeService: null,
     created() {
         this.nodeService = new NodeService();
+
+        this.columns = [
+            {field: 'name', header: 'Vin', expander: true},
+            {field: 'size', header: 'Size'},
+            {field: 'type', header: 'Type'}
+        ];
     },
     mounted() {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
@@ -53,6 +77,7 @@ export default {
             this.expandedKeys = {};
         },
         expandNode(node) {
+            
             this.expandedKeys[node.key] = true;
             if (node.children && node.children.length) {
                 for (let child of node.children) {