From 695048889dd36f6560910363f5546a86589f723a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 11 Oct 2021 16:52:49 +0300
Subject: [PATCH] browser source for treetable

---
 .../treetable/TreeTableColResizeDemo.vue      |  52 ++++++++
 .../treetable/TreeTableColToggleDemo.vue      |  53 ++++++++
 src/views/treetable/TreeTableDoc.vue          |  93 +++++++++++++
 src/views/treetable/TreeTableFilterDemo.vue   | 102 ++++++++++++++
 src/views/treetable/TreeTableLazyDemo.vue     | 112 ++++++++++++++++
 .../treetable/TreeTablePaginatorDemo.vue      |  59 ++++++++
 .../treetable/TreeTableResponsiveDemo.vue     |  76 +++++++++++
 src/views/treetable/TreeTableScrollDemo.vue   | 126 ++++++++++++++++++
 .../treetable/TreeTableSelectionDemo.vue      |  99 ++++++++++++++
 src/views/treetable/TreeTableSizeDemo.vue     |  69 +++++++++-
 src/views/treetable/TreeTableSortDemo.vue     |  61 +++++++++
 .../treetable/TreeTableTemplatingDemo.vue     |  58 ++++++++
 12 files changed, 959 insertions(+), 1 deletion(-)

diff --git a/src/views/treetable/TreeTableColResizeDemo.vue b/src/views/treetable/TreeTableColResizeDemo.vue
index fdfd698ac..9b51f877b 100755
--- a/src/views/treetable/TreeTableColResizeDemo.vue
+++ b/src/views/treetable/TreeTableColResizeDemo.vue
@@ -129,6 +129,58 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <h5>Fit Mode</h5>
+                <p-treetable :value="nodes" :resizable-columns="true" column-resize-mode="fit" show-gridlines>
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Expand Mode</h5>
+                <p-treetable :value="nodes" :resizable-columns="true" column-resize-mode="expand" show-gridlines>
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
+                })
+
+                const nodes = ref(null);
+                const nodeService = ref(new NodeService());
+
+                return { nodes, nodeService }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/treetable/TreeTableColToggleDemo.vue b/src/views/treetable/TreeTableColToggleDemo.vue
index c7882e726..d8b6c9fd8 100755
--- a/src/views/treetable/TreeTableColToggleDemo.vue
+++ b/src/views/treetable/TreeTableColToggleDemo.vue
@@ -128,6 +128,59 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-treetable :value="nodes">
+                <template #header>
+                    <div style="text-align:left">
+                        <p-multiselect :model-value="selectedColumns" @update:model-value="onToggle" :options="columns" option-label="header" placeholder="Select Columns" style="width: 20em"></p-multiselect>
+                    </div>
+                </template>
+                <p-column field="name" header="Name" :expander="true"></p-column>
+                <p-column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></p-olumn>
+            </p-treetable>
+        </div>                    
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
+                })
+                const columns = ref([
+                    {field: 'size', header: 'Size'},
+                    {field: 'type', header: 'Type'}
+                ]);
+                const nodes = ref();
+                const nodeService = ref(new NodeService());
+                const selectedColumns = ref(columns.value);
+                const onToggle = (val) => {
+                    selectedColumns.value = columns.value.filter(col => val.includes(col));
+                }
+
+                return { columns, nodes, nodeService, selectedColumns, onToggle }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column,
+                "p-multiselect": primevue.multiselect
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index bb0fa20db..61730f89b 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -1892,6 +1892,99 @@ button {
     margin-right: .5rem;
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <h5>Basic</h5>
+                <p-treetable :value="nodes">
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Dynamic Columns</h5>
+                <p-treetable :value="nodes">
+                    <p-column v-for="col of columns" :key="col.field"
+                        :field="col.field" :header="col.header" :expander="col.expander"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Programmatic Control</h5>
+                <div style="margin-bottom: 1em">
+                    <p-button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></p-button>
+                    <p-button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button>
+                </div>
+                <p-treetable :value="nodes" :expanded-keys="expandedKeys">
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
+                })
+                const nodes = ref();
+                const expandedKeys = ref({});
+                const nodeService = ref(new NodeService());
+                const columns = ref([
+                    {field: 'name', header: 'Vin', expander: true},
+                    {field: 'size', header: 'Size'},
+                    {field: 'type', header: 'Type'}
+                ]);
+                const expandAll = () => {
+                    for (let node of nodes.value) {
+                        expandNode(node);
+                    }
+
+                    expandedKeys.value = {...expandedKeys.value};
+                };
+                const collapseAll = () => {
+                    expandedKeys.value = {};
+                };
+                const expandNode = (node) => {
+                    if (node.children && node.children.length) {
+                        expandedKeys.value[node.key] = true;
+
+                        for (let child of node.children) {
+                            expandNode(child);
+                        }
+                    }
+                };
+                return { nodes, columns, expandedKeys, nodeService, expandAll, collapseAll, expandNode }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column,
+                "p-button": primevue.button
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style >
+        .p-button {
+            margin-right: .5rem;
+        }
+        </style>`
                 }
             }
         }
diff --git a/src/views/treetable/TreeTableFilterDemo.vue b/src/views/treetable/TreeTableFilterDemo.vue
index fc927410c..166215078 100755
--- a/src/views/treetable/TreeTableFilterDemo.vue
+++ b/src/views/treetable/TreeTableFilterDemo.vue
@@ -268,6 +268,108 @@ export default {
     }
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <h5>Lenient Filter</h5>
+                <p-treetable :value="nodes" :filters="filters1" filter-mode="lenient">
+                    <template #header>
+                        <div class="p-text-right">
+                            <div class="p-input-icon-left">
+                                <i class="pi pi-search"></i>
+                                <p-inputtext v-model="filters1['global']" placeholder="Global Search" size="50"></p-inputtext>
+                            </div>
+                        </div>
+                    </template>
+                    <p-column field="name" header="Name" :expander="true">
+                        <template #filter>
+                            <p-inputtext type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name"></p-inputtext>
+                        </template>
+                    </p-column>
+                    <p-column field="size" header="Size">
+                        <template #filter>
+                            <p-inputtext type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size"></p-inputtext>
+                        </template>
+                    </p-column>
+                    <p-column field="type" header="Type">
+                        <template #filter>
+                            <p-inputtext type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type"></p-inputtext>
+                        </template>
+                    </p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Strict Filter</h5>
+                <p-treetable :value="nodes" :filters="filters2" filter-mode="strict">
+                    <template #header>
+                        <div class="p-text-right">
+                            <div class="p-input-icon-left">
+                                <i class="pi pi-search"></i>
+                                <p-inputtext v-model="filters2['global']" placeholder="Global Search" size="50"></p-inputtext>
+                            </div>
+                        </div>
+                    </template>
+                    <p-column field="name" header="Name" :expander="true">
+                        <template #filter>
+                            <p-inputtext type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name"></p-inputtext>
+                        </template>
+                    </p-column>
+                    <p-column field="size" header="Size">
+                        <template #filter>
+                            <p-inputtext type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size"></p-inputtext>
+                        </template>
+                    </p-column>
+                    <p-column field="type" header="Type">
+                        <template #filter>
+                            <p-inputtext type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type"></p-inputtext>
+                        </template>
+                    </p-column>
+                </p-treetable>
+            </div>
+        </div>                    
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeTableNodes().then(data => nodes.value = data)
+                })
+
+                const filters1 = ref({});
+                const filters2 = ref({});
+                const nodes = ref();
+                const nodeService = ref(new NodeService());
+
+                return { filters1, filters2, nodes, nodeService }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column,
+                "p-inputtext": primevue.inputtext
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+            .p-filter-column .p-multiselect, 
+            .p-filter-column .p-dropdown, 
+            .p-filter-column .p-inputtext {
+                width: 100%;
+            }
+        </style>`
                 }
             }
         }
diff --git a/src/views/treetable/TreeTableLazyDemo.vue b/src/views/treetable/TreeTableLazyDemo.vue
index 75709baec..e8d9012b1 100755
--- a/src/views/treetable/TreeTableLazyDemo.vue
+++ b/src/views/treetable/TreeTableLazyDemo.vue
@@ -240,6 +240,118 @@ export default {
     
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-treetable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
+                @node-expand="onExpand" @page="onPage" :total-records="totalRecords">
+                <p-column field="name" header="Name" :expander="true"></p-column>
+                <p-column field="size" header="Size"></p-column>
+                <p-column field="type" header="Type"></p-column>
+            </p-treetable>
+        </div>                   
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    loading.value = true;
+
+                    setTimeout(() => {
+                        loading.value = false;
+                        nodes.value = loadNodes(0, rows.value);
+                        totalRecords.value = 1000;
+                    }, 1000);
+                })
+                const nodes = ref();
+                const rows = ref(10);
+                const loading = ref(false);
+                const totalRecords = ref(0);
+                const onExpand = (node) => {
+                    if (!node.children) {
+                        loading.value = 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 newNodes = nodes.value.map(n => {
+                                if (n.key === node.key) {
+                                    n = lazyNode;
+                                }
+
+                                return n;
+                            });
+
+                            loading.value = false;
+                            nodes.value = newNodes;
+                        }, 250);
+                    }
+                };
+                const onPage = (event) => {
+                    loading.value = true;
+
+                    //imitate delay of a backend call
+                    setTimeout(() => {
+                        loading.value = false;
+                        nodes.value = loadNodes(event.first, rows.value);
+                    }, 1000);
+                };
+                const 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;
+                }
+
+                return { nodes, rows, loading, totalRecords, onExpand, onPage, loadNodes }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column
+            }
+        };
+        
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/treetable/TreeTablePaginatorDemo.vue b/src/views/treetable/TreeTablePaginatorDemo.vue
index 45c137518..dce756bf3 100755
--- a/src/views/treetable/TreeTablePaginatorDemo.vue
+++ b/src/views/treetable/TreeTablePaginatorDemo.vue
@@ -127,6 +127,65 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-treetable :value="nodes" :paginator="true" :rows="10">
+                <p-column field="name" header="Name" :expander="true"></p-column>
+                <p-column field="size" header="Size"></p-column>
+                <p-column field="type" header="Type"></p-column>
+            </p-treetable>
+        </div>                 
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                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);
+                }
+
+                const nodes = ref(files);
+
+                return { nodes }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue
index 9313b3c90..9f2bfa447 100755
--- a/src/views/treetable/TreeTableResponsiveDemo.vue
+++ b/src/views/treetable/TreeTableResponsiveDemo.vue
@@ -184,6 +184,82 @@ export default {
     }
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <h5>Scroll</h5>
+                <p>Built-in responsiveness using the <b>responsiveLayout</b> property set to scroll.</p>
+                <p-treetable :value="nodes" responsive-layout="scroll">
+                    <p-column field="name" header="Name" :expander="true" style="min-width:200px"></p-column>
+                    <p-column field="size" header="Size" style="min-width:200px"></p-column>
+                    <p-column field="type" header="Type" style="min-width:200px"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Custom</h5>
+                <p>Custom implementation using media queries.</p>
+                <p-treetable :value="nodes">
+                    <p-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>
+                    </p-column>
+                    <p-column field="size" header="Size" header-class="sm-invisible" body-class="sm-invisible"></p-column>
+                    <p-column field="type" header="Type" header-class="sm-invisible" body-class="sm-invisible"></p-column>
+                </p-treetable>
+            </div>
+        </div>                    
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
+                })
+
+                const nodes = ref();
+                const nodeService = ref(new NodeService());
+
+                return { nodes, nodeService }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .sm-visible {
+            display: none;
+        }
+
+        @media screen and (max-width: 40em) {
+            .sm-invisible {
+                display: none;
+            }
+
+            .sm-visible {
+                display: inline;
+                margin-right: .5rem;
+            }
+        }
+        </style>`
                 }
             }
         }
diff --git a/src/views/treetable/TreeTableScrollDemo.vue b/src/views/treetable/TreeTableScrollDemo.vue
index 50e392d27..0d0b7dd4a 100644
--- a/src/views/treetable/TreeTableScrollDemo.vue
+++ b/src/views/treetable/TreeTableScrollDemo.vue
@@ -331,6 +331,132 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/togglebutton/togglebutton.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <h5>Vertical</h5>
+                <p-treetable :value="nodes" style="margin-bottom: 2rem" :scrollable="true" scroll-height="400px">
+                    <p-column field="name" header="Name" :expander="true" style="min-width:200px"></p-column>
+                    <p-column field="size" header="Size" style="min-width:200px"></p-column>
+                    <p-column field="type" header="Type" style="min-width:200px"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Flexible Scroll</h5>
+                <p>Flex scroll feature makes the scrollable viewport section dynamic insteaf of a fixed value so that it can grow or shrink relative to the parent size of the table.
+                    Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
+
+                <p-button label="Show" icon="pi pi-external-link" @click="openDialog"></p-button>
+            </div>
+
+            <p-dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :content-style="{height: '300px'}">
+                    <p-treetable :value="nodes" :scrollable="true" scroll-height="flex">
+                    <p-column field="name" header="Name" :expander="true" style="min-width:200px"></p-column>
+                    <p-column field="size" header="Size" style="min-width:200px"></p-column>
+                    <p-column field="type" header="Type" style="min-width:200px"></p-column>
+                </p-treetable>
+                <template #footer>
+                    <p-button label="Ok" icon="pi pi-check" @click="closeDialog"></p-button>
+                </template>
+            </p-dialog>
+
+            <div class="card">
+                <h5>Horizontal and Vertical with Footer</h5>
+                <p-treetable :value="nodes" :scrollable="true" scroll-height="400px" scroll-direction="both">
+                    <p-column field="name" header="Name" footer="Name" :expander="true" style="width:300px"></p-column>
+                    <p-column header="Key" footer="Key" style="width:300px">
+                        <template #body="{node}">
+                            {{node.key}}
+                        </template>
+                    </p-column>
+                    <p-column field="size" header="Size" footer="Size" style="width:300px"></p-column>
+                    <p-column field="type" header="Type" footer="Type" style="width:300px"></p-column>
+                    <p-column header="Children" footer="Children" style="width:300px">
+                        <template #body="{node}">
+                            {{node.children ? node.children.length : 0}}
+                        </template>
+                    </p-column>
+                    <p-column header="Options" footer="Options" style="width:300px">
+                        <template #body>
+                            <p-button type="Button" icon="pi pi-check" label="Edit" class="p-mr-2"></p-button>
+                            <p-button type="Button" icon="pi pi-check" label="Delete" class="p-button-warning"></p-button>
+                        </template>
+                    </p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Frozen Columns</h5>
+                <p-togglebutton v-model="optionsFrozen" on-icon="pi pi-lock" off-icon="pi pi-lock-open" on-label="Unfreeze Options" off-label="Freeze Options" style="width: 12rem"></p-togglebutton>
+
+                <p-treetable :value="nodes" :scrollable="true" scroll-height="400px" scroll-direction="both" class="p-mt-3">
+                    <p-column field="name" header="Name" :expander="true" style="width:300px" frozen></p-column>
+                    <p-column header="Key" style="width:300px">
+                        <template #body="{node}">
+                            {{node.key}}
+                        </template>
+                    </p-column>
+                    <p-column field="size" header="Size" style="width:300px"></p-column>
+                    <p-column field="type" header="Type" style="width:300px"></p-column>
+                    <p-column header="Children" style="width:300px">
+                        <template #body="{node}">
+                            {{node.children ? node.children.length : 0}}
+                        </template>
+                    </p-column>
+                    <p-column header="Options" style="width:200px" alignFrozen="right" :frozen="optionsFrozen">
+                        <template #body>
+                            <p-button type="Button" icon="pi pi-check" label="Edit Item" class="p-mr-2" style="width:100%"></p-button>
+                        </template>
+                    </p-column>
+                </p-treetable>
+            </div>
+        </div>                    
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
+                })
+
+                const nodes = ref();
+                const nodeService = ref(new NodeService());
+                const dialogVisible = ref(false);
+                const optionsFrozen = ref(false);
+
+                const openDialog = () => {
+                    dialogVisible.value = true;
+                };
+                const closeDialog = () => {
+                    dialogVisible.value = false;
+                };
+
+                return { nodes, openDialog, closeDialog, dialogVisible, optionsFrozen }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column,
+                "p-dialog": primevue.dialog,
+                "p-button": primevue.button,
+                "p-togglebutton": primevue.togglebutton
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/treetable/TreeTableSelectionDemo.vue b/src/views/treetable/TreeTableSelectionDemo.vue
index fc93abfe0..48225c0b3 100755
--- a/src/views/treetable/TreeTableSelectionDemo.vue
+++ b/src/views/treetable/TreeTableSelectionDemo.vue
@@ -246,6 +246,105 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-toast></p-toast>
+
+            <div class="card">
+                <h5>Single Selection</h5>
+                <p-treetable :value="nodes" selection-mode="single" v-model:selection-keys="selectedKey1">
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Multiple Selection with MetaKey</h5>
+                <p-treetable :value="nodes" selection-mode="multiple" v-model:selection-keys="selectedKeys1">
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Multiple Selection without MetaKey</h5>
+                <p-treetable :value="nodes" selection-mode="multiple" v-model:selection-keys="selectedKeys2" :meta-key-selection="false">
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Checkbox Selection</h5>
+                <p-treetable :value="nodes" selection-mode="checkbox" v-model:selection-keys="selectedKeys3">
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Events</h5>
+                <p-treetable :value="nodes" selection-mode="single" v-model:selection-keys="selectedKey2"
+                    @node-select="onNodeSelect" @node-unselect="onNodeUnselect">
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+        </div>                    
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+        const { useToast } = primevue.usetoast;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
+                })
+
+                const toast = useToast();
+                const selectedKey1 = ref();
+                const selectedKey2 = ref();
+                const selectedKeys1 = ref();
+                const selectedKeys2 = ref();
+                const selectedKeys3 = ref();
+                const nodes = ref();
+                const nodeService = ref(new NodeService());
+                const onNodeSelect = (node) => {
+                    toast.add({severity:'success', summary: 'Node Selected', detail: node.data.name, life: 3000});
+                }
+                const onNodeUnselect = (node) => {
+                    toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.name, life: 3000});
+                }
+
+                return { selectedKey1, selectedKey2, selectedKeys1, selectedKeys2, selectedKeys3, nodes, onNodeSelect, onNodeUnselect}
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column,
+                "p-toast": primevue.toast
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .use(primevue.toastservice)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/treetable/TreeTableSizeDemo.vue b/src/views/treetable/TreeTableSizeDemo.vue
index bbb2ab906..6ec2d3c28 100644
--- a/src/views/treetable/TreeTableSizeDemo.vue
+++ b/src/views/treetable/TreeTableSizeDemo.vue
@@ -166,12 +166,79 @@ export default {
         })
 
         const nodes = ref();
-        const nodeService = new NodeService();
+        const nodeService = ref(new NodeService());
 
         return { nodes, nodeService }
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <p-treetable :value="nodes" class="p-treetable-sm" style="margin-bottom: 2rem">
+                    <template #header>
+                        Small Table
+                    </template>
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <p-treetable :value="nodes" style="margin-bottom: 2rem">
+                    <template #header>
+                        Normal Table
+                    </template>
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <p-treetable :value="nodes" class="p-treetable-lg" >
+                    <template #header>
+                        Large Table
+                    </template>
+                    <p-column field="name" header="Name" :expander="true"></p-column>
+                    <p-column field="size" header="Size"></p-column>
+                    <p-column field="type" header="Type"></p-column>
+                </p-treetable>
+            </div>
+        </div>                    
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
+                })
+
+                const nodes = ref();
+                const nodeService = ref(new NodeService());
+
+                return { nodes, nodeService }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/treetable/TreeTableSortDemo.vue b/src/views/treetable/TreeTableSortDemo.vue
index fd6c3ddb6..e70162213 100755
--- a/src/views/treetable/TreeTableSortDemo.vue
+++ b/src/views/treetable/TreeTableSortDemo.vue
@@ -154,6 +154,67 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <h5>Single Column Sorting</h5>
+                <p-treetable :value="nodes" sort-mode="single">
+                    <p-column field="name" header="Name" :expander="true" :sortable="true"></p-column>
+                    <p-column field="size" header="Size" :sortable="true"></p-column>
+                    <p-column field="type" header="Type" :sortable="true"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Multiple Column Sorting</h5>
+                <p-treetable :value="nodes" sort-mode="multiple">
+                    <p-column field="name" header="Name" :expander="true" :sortable="true"></p-column>
+                    <p-column field="size" header="Size" :sortable="true"></p-column>
+                    <p-column field="type" header="Type" :sortable="true"></p-column>
+                </p-treetable>
+            </div>
+
+            <div class="card">
+                <h5>Removable Sort</h5>
+                <p-treetable :value="nodes" sort-mode="single" removable-sort>
+                    <p-column field="name" header="Name" :expander="true" :sortable="true"></p-column>
+                    <p-column field="size" header="Size" :sortable="true"></p-column>
+                    <p-column field="type" header="Type" :sortable="true"></p-column>
+                </p-treetable>
+            </div>
+        </div>                  
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
+                })
+
+                const nodes = ref();
+                const nodeService = ref(new NodeService());
+
+                return { nodes, nodeService }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/treetable/TreeTableTemplatingDemo.vue b/src/views/treetable/TreeTableTemplatingDemo.vue
index c58f26749..71b457373 100755
--- a/src/views/treetable/TreeTableTemplatingDemo.vue
+++ b/src/views/treetable/TreeTableTemplatingDemo.vue
@@ -145,6 +145,64 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-treetable :value="nodes">
+                <template #header>
+                    FileSystem
+                </template>
+                <p-column field="name" header="Name" :expander="true"></p-column>
+                <p-column field="size" header="Size"></p-column>
+                <p-column field="type" header="Type"></p-column>
+                <p-column header-style="width: 8em" header-class="p-text-center" body-class="p-text-center">
+                    <template #header>
+                        <p-button type="button" icon="pi pi-cog"></p-button>
+                    </template>
+                    <template #body>
+                        <p-button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></p-button>
+                        <p-button type="button" icon="pi pi-pencil" class="p-button-warning"></p-button>
+                    </template>
+                </p-column>
+                <template #footer>
+                    <div style="text-align:left">
+                        <p-button icon="pi pi-refresh"></p-button>
+                    </div>
+                </template>
+            </p-treetable>
+        </div>                  
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
+                })
+
+                const nodes = ref();
+                const nodeService = ref(new NodeService());
+
+                return { nodes, nodeService }
+            },
+            components: {
+                "p-treetable": primevue.treetable,
+                "p-column": primevue.column,
+                "p-button": primevue.button
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }