csb for treetable

src/views/treetable/TreeTableColResizeDemo.vue

@@ -31,6 +31,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Fit Mode&lt;/h3&gt;
@@ -78,6 +81,40 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Fit Mode</h5>
+                <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" class="p-treetable-gridlines">
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Expand Mode</h5>
+                <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" class="p-treetable-gridlines">
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+        </div>
+    </div>                    
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
 
 export default {
     data() {
@@ -93,4 +130,20 @@ export default {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
     }
 }
+`
+                }
+            }
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>

src/views/treetable/TreeTableColToggleDemo.vue

@@ -24,6 +24,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'MultiSelect']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;TreeTable :value="nodes"&gt;
@@ -81,6 +84,36 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            selectedColumns: null,
+            columns: null,
+            nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <TreeTable :value="nodes">
+                    <template #header>
+                        <div style="text-align:left">
+                            <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" placeholder="Select Columns" style="width: 20em"/>
+                        </div>
+                    </template>
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
+                </TreeTable>
+            </div>
+        </div>
+    </div>                    
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
 
 export default {
     data() {
@@ -110,4 +143,32 @@ export default {
         }
     }
 }
+`
+                }
+            }
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+
+        this.columns = [
+            {field: 'size', header: 'Size'},
+            {field: 'type', header: 'Type'}
+        ];
+
+        this.selectedColumns = this.columns;
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    methods: {
+        onToggle(value) {
+            this.selectedColumns = this.columns.filter(col => value.includes(col));
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>

src/views/treetable/TreeTableDoc.vue

@@ -1639,9 +1639,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/treetable" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                <div class="p-d-flex p-jc-between">
-					<span>View on GitHub</span>
+                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/treetable" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-				</a>
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'Button']" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -1723,3 +1726,110 @@ export default {
 		</TabView>
 	</div>
 </template>
+
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+export default {
+    data() {
+        return {
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Basic</h5>
+                <TreeTable :value="nodes">
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Dynamic Columns</h5>
+                <TreeTable :value="nodes">
+                    <Column v-for="col of columns" :key="col.field"
+                        :field="col.field" :header="col.header" :expander="col.expander"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Programmatic Control</h5>
+                <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>
+        </div>
+
+        <TreeTableDoc />
+    </div>
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
+
+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);
+                }
+            }
+        }
+    }
+}
+`,
+                    style: `<style scoped>
+button {
+    margin-right: .5rem;
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/treetable/TreeTableFilterDemo.vue

@@ -70,6 +70,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'InputText']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="card"&gt;
@@ -163,6 +166,82 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            filters1: {},
+            filters2: {},
+            nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Lenient Filter</h5>
+                <TreeTable :value="nodes" :filters="filters1" filterMode="lenient">
+                    <template #header>
+                        <div class="p-text-right">
+                            <div class="p-input-icon-left">
+                                <i class="pi pi-search"></i>
+                                <InputText v-model="filters1['global']" placeholder="Global Search" size="50" />
+                            </div>
+                        </div>
+                    </template>
+                    <Column field="name" header="Name" :expander="true">
+                        <template #filter>
+                            <InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name" />
+                        </template>
+                    </Column>
+                    <Column field="size" header="Size">
+                        <template #filter>
+                            <InputText type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size"/>
+                        </template>
+                    </Column>
+                    <Column field="type" header="Type">
+                        <template #filter>
+                            <InputText type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type"/>
+                        </template>
+                    </Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Strict Filter</h5>
+                <TreeTable :value="nodes" :filters="filters2" filterMode="strict">
+                    <template #header>
+                        <div class="p-text-right">
+                            <div class="p-input-icon-left">
+                                <i class="pi pi-search"></i>
+                                <InputText v-model="filters2['global']" placeholder="Global Search" size="50" />
+                            </div>
+                        </div>
+                    </template>
+                    <Column field="name" header="Name" :expander="true">
+                        <template #filter>
+                            <InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name" />
+                        </template>
+                    </Column>
+                    <Column field="size" header="Size">
+                        <template #filter>
+                            <InputText type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size" />
+                        </template>
+                    </Column>
+                    <Column field="type" header="Type">
+                        <template #filter>
+                            <InputText type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type" />
+                        </template>
+                    </Column>
+                </TreeTable>
+            </div>
+        </div>
+    </div>                    
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
 
 export default {
     data() {
@@ -180,6 +259,29 @@ export default {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
     }
 }
+`,
+                    style: `<style scoped lang="scss">
+.p-filter-column {
+    .p-multiselect, .p-dropdown, .p-inputtext {
+        width: 100%;
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>
 
 <style scoped lang="scss">

src/views/treetable/TreeTableLazyDemo.vue

@@ -22,6 +22,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeTableDemo" :sources="sources" :components="['Column']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
@@ -130,6 +133,33 @@ export default {
     </div>
 </template>
 
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            rows: 10,
+            loading: false,
+            totalRecords: 0,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
+                    @node-expand="onExpand" @page="onPage" :totalRecords="totalRecords">
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+        </div>
+    </div>                    
+</template>
+
 <script>
 export default {
     data() {
@@ -217,4 +247,89 @@ export default {
         }
     }
 }
+`
+                }
+            }
+        }
+    },
+    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 < 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;
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>

src/views/treetable/TreeTablePaginatorDemo.vue

@@ -20,6 +20,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeTableDemo" :sources="sources" :components="['Column']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;TreeTable :value="nodes" :paginator="true" :rows="10"&gt;
@@ -74,6 +77,29 @@ export default {
     </div>
 </template>
 
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <TreeTable :value="nodes" :paginator="true" :rows="10">
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+        </div>
+    </div>                    
+</template>
+
 <script>
 export default {
     data() {
@@ -109,4 +135,40 @@ export default {
         this.nodes = files;
     }
 }
+`
+                }
+            }
+        }
+    },
+    created() {
+        let files = [];
+        for(let i = 0; i < 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;
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>

src/views/treetable/TreeTableResponsiveDemo.vue

@@ -29,6 +29,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;TreeTable :value="nodes" class="p-treetable-responsive"&gt;
@@ -92,6 +95,39 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <TreeTable :value="nodes" class="p-treetable-responsive">
+                    <template #header>
+                        Responsive
+                    </template>
+                    <Column field="name" header="Name" :expander="true">
+                        <template #body="slotProps">
+                            {{slotProps.node.data.name}}
+                            <span class="sm-visible">{{slotProps.node.data.size}}</span>
+                            <span class="sm-visible">{{slotProps.node.data.type}}</span>
+                        </template>
+                    </Column>
+                    <Column field="size" header="Size" headerClass="sm-invisible" bodyClass="sm-invisible"></Column>
+                    <Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"></Column>
+                </TreeTable>
+            </div>
+        </div>
+    </div>                    
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
 
 export default {
     data() {
@@ -107,6 +143,38 @@ export default {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
     }
 }
+`,
+                    style: `<style scoped lang="scss">
+.sm-visible {
+    display: none;
+}
+
+@media screen and (max-width: 40em) {
+    ::v-deep(.sm-invisible) {
+        display: none;
+    }
+
+    ::v-deep(.sm-visible) {
+        display: inline;
+        margin-right: .5rem;
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>
 
 <style scoped lang="scss">

src/views/treetable/TreeTableSelectionDemo.vue

@@ -58,6 +58,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Single Selection&lt;/h3&gt;
@@ -139,6 +142,74 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            selectedKey1: null,
+            selectedKey2: null,
+            selectedKeys1: null,
+            selectedKeys2: null,
+            selectedKeys3: null,
+            nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <Toast />
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Single Selection</h5>
+                <TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1">
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Multiple Selection with MetaKey</h5>
+                <TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1">
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Multiple Selection without MetaKey</h5>
+                <TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false">
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Checkbox Selection</h5>
+                <TreeTable :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3">
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Events</h5>
+                <TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2"
+                    @node-select="onNodeSelect" @node-unselect="onNodeUnselect">
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+        </div>
+    </div>                    
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
 
 export default {
     data() {
@@ -167,4 +238,28 @@ export default {
         }
     }
 }
+`
+                }
+            }
+        }
+    },
+    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});
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>

src/views/treetable/TreeTableSizeDemo.vue

@@ -45,6 +45,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'Button']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;TreeTable :value="nodes" class="p-treetable-sm" style="margin-bottom: 2rem"&gt;
@@ -104,11 +107,60 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
 
 export default {
     data() {
         return {
             nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <TreeTable :value="nodes" class="p-treetable-sm" style="margin-bottom: 2rem">
+                    <template #header>
+                        Small Table
+                    </template>
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <TreeTable :value="nodes" style="margin-bottom: 2rem">
+                    <template #header>
+                        Normal Table
+                    </template>
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <TreeTable :value="nodes" class="p-treetable-lg" >
+                    <template #header>
+                        Large Table
+                    </template>
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+        </div>
+    </div>                    
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null
         }
     },
     nodeService: null,
@@ -119,4 +171,20 @@ export default {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
     }
 }
+`
+                }
+            }
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>

src/views/treetable/TreeTableSortDemo.vue

@@ -39,6 +39,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Single Column Sorting&lt;/h3&gt;
@@ -93,6 +96,49 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Single Column Sorting</h5>
+                <TreeTable :value="nodes" sortMode="single">
+                    <Column field="name" header="Name" :expander="true" :sortable="true"></Column>
+                    <Column field="size" header="Size" :sortable="true"></Column>
+                    <Column field="type" header="Type" :sortable="true"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Multiple Column Sorting</h5>
+                <TreeTable :value="nodes" sortMode="multiple">
+                    <Column field="name" header="Name" :expander="true" :sortable="true"></Column>
+                    <Column field="size" header="Size" :sortable="true"></Column>
+                    <Column field="type" header="Type" :sortable="true"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Removable Sort</h5>
+                <TreeTable :value="nodes" sortMode="single" removableSort>
+                    <Column field="name" header="Name" :expander="true" :sortable="true"></Column>
+                    <Column field="size" header="Size" :sortable="true"></Column>
+                    <Column field="type" header="Type" :sortable="true"></Column>
+                </TreeTable>
+            </div>
+        </div>
+    </div>                    
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
 
 export default {
     data() {
@@ -108,4 +154,20 @@ export default {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
     }
 }
+`
+                }
+            }
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>

src/views/treetable/TreeTableTemplatingDemo.vue

@@ -37,6 +37,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'Button']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;TreeTable :value="nodes"&gt;
@@ -92,6 +95,47 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <TreeTable :value="nodes">
+                    <template #header>
+                        FileSystem
+                    </template>
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                    <Column headerStyle="width: 8em" headerClass="p-text-center" bodyClass="p-text-center">
+                        <template #header>
+                            <Button type="button" icon="pi pi-cog"></Button>
+                        </template>
+                        <template #body>
+                            <Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
+                            <Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
+                        </template>
+                    </Column>
+                    <template #footer>
+                        <div style="text-align:left">
+                            <Button icon="pi pi-refresh" />
+                        </div>
+                    </template>
+                </TreeTable>
+            </div>
+        </div>
+    </div>                    
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
 
 export default {
     data() {
@@ -107,4 +151,20 @@ export default {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
     }
 }
+`
+                }
+            }
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>