Initiated scrollable treetable

src/assets/menu/menu.json

@@ -469,6 +469,7 @@
                 {
                     "name": "TreeTable",
                     "meta": ["treetable"],
+                    "badge": "New",
                     "children": [
                         {
                             "name": "Documentation",
@@ -510,6 +511,11 @@
                             "name": "Resize",
                             "to": "/treetable/colresize"
                         },
+                        {
+                            "name": "Scroll",
+                            "to": "/treetable/scroll",
+                            "badge": "New"
+                        },
                         {
                             "name": "Responsive",
                             "to": "/treetable/responsive"

src/components/datatable/HeaderCell.vue

@@ -153,7 +153,7 @@ export default {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
                     if (next) {
-                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right);
                     }
                     this.styleObject.right = right + 'px';
                 }

src/components/treetable/TreeTable.vue

@@ -17,12 +17,12 @@
                 <slot name="paginatorRight"></slot>
             </template>
         </TTPaginator>
-        <div class="p-treetable-wrapper">
+        <div class="p-treetable-wrapper" :style="{maxHeight: scrollHeight}">
             <table ref="table">
                 <thead class="p-treetable-thead">
                     <tr>
                         <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-                            <th v-if="!columnProp(col, 'hidden')" :style="columnProp(col, 'headerStyle')" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
+                            <th v-if="!columnProp(col, 'hidden')" :style="[columnProp(col, 'style'),columnProp(col, 'headerStyle')]" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
                                 :tabindex="columnProp(col, 'sortable') ? '0' : null"  :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
                                 <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
                                 <component :is="col.children.header" :column="col" v-if="col.children && col.children.header" />
@@ -34,22 +34,12 @@
                     </tr>
                     <tr v-if="hasColumnFilter()">
                         <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-                            <th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
+                            <th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'),columnProp(col, 'filterHeaderStyle')]">
                                 <component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
                             </th>
                         </template>
                     </tr>
                 </thead>
-                <tfoot class="p-treetable-tfoot" v-if="hasFooter">
-                    <tr>
-                        <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-                            <td v-if="!columnProp(col, 'hidden')" :style="columnProp(col, 'footerStyle')" :class="columnProp(col, 'footerClass')">
-                                <component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer" />
-                                {{columnProp(col, 'footer')}}
-                            </td>
-                        </template>
-                    </tr>
-                </tfoot>
                 <tbody class="p-treetable-tbody">
                     <template v-if="!empty">
                         <TTRow v-for="node of dataToRender" :key="node.key" :columns="columns" :node="node" :level="0"
@@ -62,6 +52,16 @@
                         </td>
                     </tr>
                 </tbody>
+                <tfoot class="p-treetable-tfoot" v-if="hasFooter">
+                    <tr>
+                        <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
+                            <td v-if="!columnProp(col, 'hidden')" :style="[columnProp(col, 'style'),columnProp(col, 'footerStyle')]" :class="getColumnFooterClass(col)">
+                                <component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer" />
+                                {{columnProp(col, 'footer')}}
+                            </td>
+                        </template>
+                    </tr>
+                </tfoot>
             </table>
         </div>
         <TTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
@@ -222,6 +222,18 @@ export default {
         showGridlines: {
             type: Boolean,
             default: false
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
+        },
+        scrollDirection: {
+            type: String,
+            default: "vertical"
+        },
+        scrollHeight: {
+            type: String,
+            default: null
         }
     },
     documentColumnResizeListener: null,
@@ -391,14 +403,22 @@ export default {
             return false;
         },
         getColumnHeaderClass(column) {
-            return [this.columnProp(column, 'headerClass'),
+            return [this.columnProp(column, 'headerClass'), {
-                    {'p-sortable-column': this.columnProp(column, 'sortable')},
+                    'p-sortable-column': this.columnProp(column, 'sortable'),
-                    {'p-resizable-column': this.resizableColumns},
+                    'p-resizable-column': this.resizableColumns,
-                    {'p-highlight': this.isColumnSorted(column)}
+                    'p-highlight': this.isColumnSorted(column),
-            ];
+                    'p-frozen-column': this.columnProp(column, 'frozen')
+                }];
         },
         getFilterColumnHeaderClass(column) {
-            return ['p-filter-column', this.columnProp(column, 'filterHeaderClass')];
+            return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), {
+                'p-frozen-column': this.columnProp(column, 'frozen')
+            }];
+        },
+        getColumnFooterClass(column) {
+            return [this.columnProp(column, 'footerClass'), {
+                'p-frozen-column': this.columnProp(column, 'frozen')
+            }];
         },
         getSortableColumnIcon(column) {
             let sorted = false;
@@ -805,7 +825,12 @@ export default {
                 'p-treetable-auto-layout': this.autoLayout,
                 'p-treetable-resizable': this.resizableColumns,
                 'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
-                'p-treetable-gridlines': this.showGridlines
+                'p-treetable-gridlines': this.showGridlines,
+                'p-treetable-scrollable': this.scrollable,
+                'p-treetable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
+                'p-treetable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
+                'p-treetable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
+                'p-treetable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex')
             }];
         },
         columns() {
@@ -1006,4 +1031,75 @@ export default {
     justify-content: center;
     z-index: 2;
 }
+
+/* Scrollable */
+.p-treetable-scrollable .p-treetable-wrapper {
+    position: relative;
+    overflow: auto;
+}
+
+.p-treetable-scrollable .p-treetable-table {
+    display: block;
+}
+
+.p-treetable-scrollable .p-treetable-thead,
+.p-treetable-scrollable .p-treetable-tbody,
+.p-treetable-scrollable .p-treetable-tfoot {
+    display: block;
+}
+
+.p-treetable-scrollable .p-treetable-thead > tr,
+.p-treetable-scrollable .p-treetable-tbody > tr,
+.p-treetable-scrollable .p-treetable-tfoot > tr {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+}
+
+.p-treetable-scrollable .p-treetable-thead > tr > th,
+.p-treetable-scrollable .p-treetable-tbody > tr > td,
+.p-treetable-scrollable .p-treetable-tfoot > tr > td {
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
+}
+
+.p-treetable-scrollable .p-treetable-thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.p-treetable-scrollable .p-treetable-tfoot {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+}
+
+.p-treetable-scrollable .p-frozen-column {
+    position: sticky;
+    background: inherit;
+}
+
+.p-treetable-scrollable-both .p-treetable-thead > tr > th,
+.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
+.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
+.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th
+.p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
+.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
+    flex: 0 0 auto;
+}
+
+.p-treetable-flex-scrollable {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.p-treetable-flex-scrollable .p-treetable-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+}
 </style>

src/components/treetable/TreeTableRow.vue

@@ -1,7 +1,7 @@
 <template>
     <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
         <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-            <td v-if="!columnProp(col, 'hidden')" :style="columnProp(col, 'bodyStyle')" :class="columnProp(col, 'bodyClass')">
+            <td v-if="!columnProp(col, 'hidden')" :style="[columnProp(col, 'style'),columnProp(col, 'bodyStyle')]" :class="getColumnBodyClass(col)">
                 <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="columnProp(col, 'expander')" :style="togglerStyle" tabindex="-1" v-ripple>
                     <i :class="togglerIcon"></i>
                 </button>
@@ -245,7 +245,12 @@ export default {
                 check: event.check,
                 selectionKeys: _selectionKeys
             });
-        }
+        },
+        getColumnBodyClass(column) {
+            return [this.columnProp(column, 'bodyClass'), {
+                    'p-frozen-column': this.columnProp(column, 'frozen')
+                }];
+        },
     },
     computed: {
         containerClass() {

src/router/index.js

@@ -771,6 +771,11 @@ const routes = [
         name: 'treetablecolresize',
         component: () => import('../views/treetable/TreeTableColResizeDemo.vue')
     },
+    {
+        path: '/treetable/scroll',
+        name: 'treetablescroll',
+        component: () => import('../views/treetable/TreeTableScrollDemo.vue')
+    },
     {
         path: '/tristatecheckbox',
         name: 'tristatecheckbox',

src/views/treetable/TreeTableScrollDemo.vue

@@ -0,0 +1,244 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>TreeTable <span>Scroll</span></h1>
+                <p>Data scrolling is available horizontally, vertically or both with support for frozen columns.</p>
+            </div>
+            <AppDemoActions />
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Vertical</h5>
+                <TreeTable :value="nodes" style="margin-bottom: 2rem" :scrollable="true" scrollHeight="400px">
+                    <Column field="name" header="Name" :expander="true" style="min-width:200px"></Column>
+                    <Column field="size" header="Size" style="min-width:200px"></Column>
+                    <Column field="type" header="Type" style="min-width:200px"></Column>
+                </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>
+
+                <Button label="Show" icon="pi pi-external-link" @click="openDialog" />
+            </div>
+
+            <Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
+                 <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
+                    <Column field="name" header="Name" :expander="true" style="min-width:200px"></Column>
+                    <Column field="size" header="Size" style="min-width:200px"></Column>
+                    <Column field="type" header="Type" style="min-width:200px"></Column>
+                </TreeTable>
+                <template #footer>
+                    <Button label="Ok" icon="pi pi-check" @click="closeDialog" />
+                </template>
+            </Dialog>
+
+            <div class="card">
+                <h5>Horizontal and Vertical with Footer</h5>
+                <TreeTable :value="nodes" :scrollable="true" scrollHeight="400px" scrollDirection="both">
+                    <Column field="name" header="Name" footer="Name" :expander="true" style="width:300px"></Column>
+                    <Column header="Key" footer="Key" style="width:300px">
+                        <template #body="{node}">
+                            {{node.key}}
+                        </template>
+                    </Column>
+                    <Column field="size" header="Size" footer="Size" style="width:300px"></Column>
+                    <Column field="type" header="Type" footer="Type" style="width:300px"></Column>
+                    <Column header="Children" footer="Children" style="width:300px">
+                        <template #body="{node}">
+                            {{node.children ? node.children.length : 0}}
+                        </template>
+                    </Column>
+                    <Column header="Options" footer="Options" style="width:300px">
+                        <template #body>
+                            <Button type="Button" icon="pi pi-check" label="Edit" class="p-mr-2"></Button>
+                            <Button type="Button" icon="pi pi-check" label="Delete" class="p-button-warning"></Button>
+                        </template>
+                    </Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Frozen Columns</h5>
+                <ToggleButton v-model="optionsFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Options" offLabel="Freeze Options" style="width: 12rem" />
+
+                <TreeTable :value="nodes" :scrollable="true" scrollHeight="400px" scrollDirection="both" class="p-mt-3">
+                    <Column field="name" header="Name" :expander="true" style="width:300px" frozen></Column>
+                    <Column header="Key" style="width:300px">
+                        <template #body="{node}">
+                            {{node.key}}
+                        </template>
+                    </Column>
+                    <Column field="size" header="Size" style="width:300px"></Column>
+                    <Column field="type" header="Type" style="width:300px"></Column>
+                    <Column header="Children" style="width:300px">
+                        <template #body="{node}">
+                            {{node.children ? node.children.length : 0}}
+                        </template>
+                    </Column>
+                    <Column header="Options" style="width:200px" alignFrozen="right" :frozen="balanceFrozen">
+                        <template #body>
+                            <Button type="Button" icon="pi pi-check" label="Edit Item" class="p-mr-2" style="width:100%"></Button>
+                        </template>
+                    </Column>
+                </TreeTable>
+            </div>
+        </div>
+
+        <AppDoc name="TreeTableScrollDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSizeDemo.vue" />
+    </div>
+</template>
+
+<script>
+import NodeService from '../../service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            dialogVisible: false,
+            optionsFrozen: false,
+            sources: {
+                'options-api': {
+                    tabName: 'Options API Source',
+                    content: `
+<template>
+    <div>
+        <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>                    
+</template>
+
+<script>
+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);
+    }
+}
+<\\/script>
+`
+                },
+                'composition-api': {
+                    tabName: 'Composition API Source',
+                    content: `
+<template>
+    <div>
+        <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>                    
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import NodeService from './service/NodeService';
+
+export default {
+    setup() {
+        onMounted(() => {
+            nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
+        })
+
+        const nodes = ref();
+        const nodeService = ref(new NodeService());
+
+        return { nodes, nodeService }
+    }
+}
+<\\/script>
+`
+                }
+            }
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    methods: {
+        openDialog() {
+            this.dialogVisible = true;
+        },
+        closeDialog() {
+            this.dialogVisible = false;
+        }
+    }
+}
+</script>