Source codes for the samples

src/views/treetable/TreeTableColResizeDemo.vue

@@ -25,6 +25,50 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Fit Mode&lt;/h3&gt;
+&lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+
+&lt;h3&gt;Expand Mdoe&lt;/h3&gt;
+&lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    }
+}
+</CodeHighlight>
+
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
 

src/views/treetable/TreeTableColToggleDemo.vue

@@ -21,13 +21,59 @@
             </TreeTable>
         </div>
 
-        <TreeTableDoc />
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;TreeTable :value="nodes"&gt;
+    &lt;template #header&gt;
+        &lt;div style="text-align:left"&gt;
+            &lt;MultiSelect v-model="columns" :options="columnOptions" optionLabel="header" placeholder="Select Columns" style="width: 20em"/&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
+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);
+    }
+}
+</CodeHighlight>
+
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableDoc from './TreeTableDoc';
 import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
@@ -53,7 +99,6 @@ export default {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
     },
     components: {
-        'TreeTableDoc': TreeTableDoc,
         'TreeTableSubMenu': TreeTableSubMenu
     }
 }

src/views/treetable/TreeTableDoc.vue

@@ -721,20 +721,34 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tree" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/treetable" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
 <CodeHighlight>
 <template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
-&lt;Tree :value="nodes"&gt;&lt;/Tree&gt;
+&lt;TreeTable :value="nodes"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+
+&lt;h3&gt;Dynamic Columns&lt;/h3&gt;
+&lt;TreeTable :value="nodes"&gt;
+    &lt;Column v-for="col of columns" :key="col.field"
+        :field="col.field" :header="col.header" :expander="col.expander"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
 
 &lt;h3&gt;Programmatic Control&lt;/h3&gt;
 &lt;div style="margin-bottom: 1em"&gt;
     &lt;Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /&gt;
     &lt;Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /&gt;
 &lt;/div&gt;
-&lt;Tree :value="nodes" :expandedKeys="expandedKeys"&gt;&lt;/Tree&gt;   
+&lt;TreeTable :value="nodes" :expandedKeys="expandedKeys"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;  
 </template>
 </CodeHighlight>
 
@@ -745,15 +759,22 @@ 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.getTreeNodes().then(data => this.nodes = data);
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
     },
     methods: {
         expandAll() {
@@ -767,8 +788,9 @@ export default {
             this.expandedKeys = {};
         },
         expandNode(node) {
-            this.expandedKeys[node.key] = true;
             if (node.children &amp;&amp; node.children.length) {
+                this.expandedKeys[node.key] = true;
+
                 for (let child of node.children) {
                     this.expandNode(child);
                 }

src/views/treetable/TreeTableFilterDemo.vue

@@ -61,13 +61,91 @@
             </TreeTable>
         </div>
 
-        <TreeTableDoc />
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Lenient Filter&lt;/h3&gt;
+&lt;TreeTable :value="nodes" :filters="filters" filterMode="lenient"&gt;
+    &lt;template #header&gt;
+        &lt;div style="text-align: right"&gt;
+            &lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt;
+            &lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;
+        &lt;template #filter&gt;
+            &lt;InputText type="text" v-model="filters['name']" class="p-column-filter" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;
+        &lt;template #filter&gt;
+            &lt;InputText type="text" v-model="filters['size']" class="p-column-filter" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;
+        &lt;template #filter&gt;
+            &lt;InputText type="text" v-model="filters['type']" class="p-column-filter" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+&lt;/TreeTable&gt;
+
+&lt;h3&gt;Strict Filter&lt;/h3&gt;
+&lt;TreeTable :value="nodes" :filters="filters" filterMode="strict"&gt;
+    &lt;template #header&gt;
+        &lt;div style="text-align: right"&gt;
+            &lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt;
+            &lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;
+        &lt;template #filter&gt;
+            &lt;InputText type="text" v-model="filters['name']" class="p-column-filter" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;
+        &lt;template #filter&gt;
+            &lt;InputText type="text" v-model="filters['size']" class="p-column-filter" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;
+        &lt;template #filter&gt;
+            &lt;InputText type="text" v-model="filters['type']" class="p-column-filter" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+&lt;/TreeTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
+export default {
+    data() {
+        return {
+            filters: {},
+            nodes: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    }
+}
+</CodeHighlight>
+
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableDoc from './TreeTableDoc';
 import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
@@ -85,7 +163,6 @@ export default {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
     },
     components: {
-        'TreeTableDoc': TreeTableDoc,
         'TreeTableSubMenu': TreeTableSubMenu
     }
 }

src/views/treetable/TreeTableLazyDemo.vue

@@ -19,12 +19,116 @@
             </TreeTable>
         </div>
 
-        <TreeTableDoc />
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
+    @node-expand="onExpand" @page="onPage" :totalRecords="totalRecords"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            nodes: null,
+            rows: 10,
+            loading: false,
+            totalRecords: 0
+        }
+    },
+    mounted() {
+        this.loading = true;
+
+        setTimeout(() => {
+            this.loading = false;
+            this.nodes = this.loadNodes(0, this.rows);
+            this.totalRecords = 1000;
+        }, 1000);
+    },
+    methods: {
+        onExpand(node) {
+            if (!node.children) {
+                this.loading = true;
+                
+                setTimeout(() => {
+                    let lazyNode = {...node};
+        
+                    lazyNode.children = [
+                        {
+                            data: { 
+                                name: lazyNode.data.name + ' - 0',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'File'
+                            },
+                        },
+                        {
+                            data: {
+                                name: lazyNode.data.name + ' - 1',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'File'
+                            }
+                        }
+                    ];
+
+                    let nodes = this.nodes.map(n => {
+                        if (n.key === node.key) {
+                            n = lazyNode;
+                        }
+
+                        return n;
+                    });
+
+                    this.loading = false;
+                    this.nodes = nodes;
+                }, 250);
+            }
+        },
+        onPage(event) {
+            this.loading = true;
+
+            //imitate delay of a backend call
+            setTimeout(() => {    
+                this.loading = false;
+                this.nodes = this.loadNodes(event.first, this.rows);
+            }, 1000);
+        },
+        loadNodes(first, rows) {
+            let nodes = [];
+
+            for(let i = 0; i &lt; rows; i++) {
+                let node = {
+                    key: (first + i),
+                    data: { 
+                        name: 'Item ' + (first + i),
+                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                        type: 'Type ' + (first + i)
+                    },
+                    leaf: false
+                };
+
+                nodes.push(node);
+            }
+            
+            return nodes;
+        }
+    }
+}
+</CodeHighlight>
+
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
 
 <script>
-import TreeTableDoc from './TreeTableDoc';
 import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
@@ -113,14 +217,7 @@ export default {
         }
     },
     components: {
-        'TreeTableDoc': TreeTableDoc,
         'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
-
-<style scoped>
-button {
-    margin-right: .5em;
-}
-</style>

src/views/treetable/TreeTablePaginatorDemo.vue

@@ -16,6 +16,59 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;TreeTable :value="nodes" :paginator="true" :rows="10"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            nodes: null
+        }
+    },
+    created() {
+        let files = [];
+        for(let i = 0; i &lt; 50; i++) {
+            let node = {
+                key: i,
+                data: {  
+                    name: 'Item ' + i,
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                },
+                children: [
+                    {
+                        key: i + ' - 0',
+                        data: {  
+                            name: 'Item ' + i + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'Type ' + i
+                        }
+                    }
+                ]
+            };
+
+            files.push(node);
+        }
+
+        this.nodes = files;
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
 
@@ -28,7 +81,6 @@ export default {
             nodes: null
         }
     },
-    nodeService: null,
     created() {
         let files = [];
         for(let i = 0; i < 50; i++) {

src/views/treetable/TreeTableResponsiveDemo.vue

@@ -25,6 +25,70 @@
                 <Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"></Column>
             </TreeTable>
         </div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;TreeTable :value="nodes" class="p-treetable-responsive"&gt;
+    &lt;template #header&gt;
+        Responsive
+    &lt;/template&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;
+            &lt;template #body="slotProps"&gt;
+            &#123;&#123;slotProps.node.data.name&#125;&#125;
+            &lt;span class="sm-visible"&gt;&#123;&#123;slotProps.node.data.size&#125;&#125;&lt;/span&gt;
+            &lt;span class="sm-visible"&gt;&#123;&#123;slotProps.node.data.type&#125;&#125;&lt;/span&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="size" header="Size" headerClass="sm-invisible" bodyClass="sm-invisible"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    }
+}
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+.sm-visible {
+    display: none;
+}
+
+@media screen and (max-width: 40em) {
+    /deep/ {
+        .sm-invisible {
+            display: none;
+        }
+
+        .sm-visible {
+            display: inline;
+            margin-right: .5em;
+        }
+    }
+}
+</CodeHighlight>
+
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
 

src/views/treetable/TreeTableSelectionDemo.vue

@@ -47,13 +47,88 @@
             </TreeTable>
         </div>
 
-        <TreeTableDoc />
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Single Selection&lt;/h3&gt;
+&lt;TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+
+&lt;h3&gt;Multiple Selection with MetaKey&lt;/h3&gt;
+&lt;TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+
+&lt;h3&gt;Multiple Selection without MetaKey&lt;/h3&gt;
+&lt;TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+
+&lt;h3&gt;Checkbox Selection&lt;/h3&gt;
+&lt;TreeTable :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+
+&lt;h3&gt;Events&lt;/h3&gt;
+&lt;TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2"
+    @node-select="onNodeSelect" @node-unselect="onNodeUnselect"&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
+export default {
+    data() {
+        return {
+            selectedKey1: null,
+            selectedKey2: null,
+            selectedKeys1: null,
+            selectedKeys2: null,
+            selectedKeys3: null,
+            nodes: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({severity:'success', summary: 'Node Selected', detail: node.data.name, life: 3000});
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.name, life: 3000});
+        }
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableDoc from './TreeTableDoc';
 import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
@@ -83,14 +158,7 @@ export default {
         }
     },
     components: {
-        'TreeTableDoc': TreeTableDoc,
         'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
-
-<style scoped>
-button {
-    margin-right: .5em;
-}
-</style>

src/views/treetable/TreeTableSortDemo.vue

@@ -24,6 +24,50 @@
                 <Column field="type" header="Type" :sortable="true"></Column>
             </TreeTable>
         </div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Single Column Sorting&lt;/h3&gt;
+&lt;TreeTable :value="nodes" sortMode="single"&gt;
+    &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size" :sortable="true"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type" :sortable="true"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+
+&lt;h3&gt;Multiple Column Sorting&lt;/h3&gt;
+&lt;TreeTable :value="nodes" sortMode="multiple"&gt;
+    &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size" :sortable="true"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type" :sortable="true"&gt;&lt;/Column&gt;
+&lt;/TreeTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    }
+}
+</CodeHighlight>
+
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
 

src/views/treetable/TreeTableTemplatingDemo.vue

@@ -34,59 +34,78 @@
             </TreeTable>
         </div>
 
-        <TreeTableDoc />
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;TreeTable :value="nodes"&gt;
+    &lt;template #header&gt;
+        FileSystem
+    &lt;/template&gt;
+    &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
+    &lt;Column headerStyle="width: 8em" bodyStyle="text-align: center"&gt;
+        &lt;template #header&gt;
+            &lt;Button type="button" icon="pi pi-cog"&gt;&lt;/Button&gt;
+        &lt;/template&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"&gt;&lt;/Button&gt;
+            &lt;Button type="button" icon="pi pi-pencil" class="p-button-warning"&gt;&lt;/Button&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;template #footer&gt;
+        &lt;div style="text-align:left"&gt;
+            &lt;Button icon="pi pi-refresh" /&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+&lt;/TreeTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableDoc from './TreeTableDoc';
 import TreeTableSubMenu from './TreeTableSubMenu';
 
 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);
     },
-    methods: {
-        expandAll() {
-            for (let node of this.nodes) {
-                this.expandNode(node);
-            }
-
-            this.expandedKeys = {...this.expandedKeys};
-        },
-        collapseAll() {
-            this.expandedKeys = {};
-        },
-        expandNode(node) {
-            if (node.children && node.children.length) {
-                this.expandedKeys[node.key] = true;
-
-                for (let child of node.children) {
-                    this.expandNode(child);
-                }
-            }
-        }
-    },
     components: {
-        'TreeTableDoc': TreeTableDoc,
         'TreeTableSubMenu': TreeTableSubMenu
     }
 }