Initiated Vertical Scrolling Table

src/components/datatable/DataTable.vue

@@ -19,7 +19,7 @@
                 <slot name="paginatorRight"></slot>
             </template>
         </DTPaginator>
-        <div class="p-datatable-wrapper">
+        <div class="p-datatable-wrapper" v-if="!scrollable">
             <table ref="table">
                 <DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
                         :groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
@@ -39,6 +39,32 @@
                 <DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
             </table>
         </div>
+        <div class="p-datatable-scrollable-wrapper" v-else>
+            <DTScrollableView :scrollHeight="scrollHeight" :columns="columns">
+                <template #header>
+                    <DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
+                        :groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
+                        :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta"
+                        @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)"
+                        @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
+                        @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
+                </template>
+                <template #body>
+                    <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
+                        :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
+                        :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
+                        :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
+                        @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
+                        @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
+                        @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
+                        @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
+                        @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
+                </template>
+                <template #footer>
+                    <DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
+                </template>
+            </DTScrollableView>
+        </div>
         <DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
             <template #left v-if="$scopedSlots.paginatorLeft">
@@ -62,7 +88,7 @@ import ObjectUtils from '../utils/ObjectUtils';
 import FilterUtils from '../utils/FilterUtils';
 import DomHandler from '../utils/DomHandler';
 import Paginator from '../paginator/Paginator';
-//import ScrollableView from './ScrollableView.vue';
+import ScrollableView from './ScrollableView.vue';
 import TableHeader from './TableHeader.vue';
 import TableBody from './TableBody.vue';
 import TableFooter from './TableFooter.vue';
@@ -244,6 +270,14 @@ export default {
         rowClass: {
             type: null,
             default: null
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
+        },
+        scrollHeight: {
+            type: String,
+            default: null
         }
     },
     data() {
@@ -1409,7 +1443,8 @@ export default {
                     'p-datatable-hoverable-rows': (this.rowHover || this.selectionMode),
                     'p-datatable-auto-layout': this.autoLayout,
                     'p-datatable-resizable': this.resizableColumns,
-                    'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit'
+                    'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
+                    'p-datatable-scrollable': this.scrollable
                 }
             ];
         },
@@ -1532,7 +1567,7 @@ export default {
     },
     components: {
         'DTPaginator': Paginator,
-        //'DTScrollableView': ScrollableView,
+        'DTScrollableView': ScrollableView,
         'DTTableHeader': TableHeader,
         'DTTableBody': TableBody,
         'DTTableFooter': TableFooter,

src/components/datatable/ScrollableView.vue

@@ -1,14 +1,127 @@
 <template>
-    <div></div>
+      <div :class="containerClass">
+        <div class="p-datatable-scrollable-header" ref="scrollHeader" @scroll="onHeaderScroll">
+            <div class="p-datatable-scrollable-header-box" ref="scrollHeaderBox">
+                <table class="p-datatable-scrollable-header-table'">
+                    <colgroup class="p-datatable-scrollable-colgroup">
+                        <col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
+                    </colgroup>
+                    <slot name="header"></slot>
+                </table>
+            </div>
+        </div>
+        <div class="p-datatable-scrollable-body" ref="scrollBody" @scroll="onBodyScroll">
+            <table ref="scrollTable">
+                <colgroup class="p-datatable-scrollable-colgroup">
+                    <col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
+                </colgroup>
+                <slot name="body"></slot>
+            </table>
+        </div>
+        <div class="p-datatable-scrollable-footer" ref="scrollFooter">
+            <div class="p-datatable-scrollable-footer-box" ref="scrollFooterBox">
+                <table class="p-datatable-scrollable-footer-table">
+                    <colgroup class="p-datatable-scrollable-colgroup">
+                        <col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
+                    </colgroup>
+                    <slot name="footer"></slot>
+                </table>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+import DomHandler from '../utils/DomHandler';
+
 export default {
     props: {
-
+        frozen: {
+            type: Boolean,
+            default: false
+        },
+        frozenWidth: {
+            type: String,
+            default: null
+        },
+        columns: {
+            type: null,
+            default: null
+        },
+        scrollHeight: {
+            type: String,
+            default: null
+        }
+    },
+    mounted() {
+        this.setScrollHeight();
+                
+        if (!this.frozen)
+            this.alignScrollBar();
+        else
+            this.$refs.scrollBody.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
+    },
+    watch: {
+        scrollHeight() {
+            this.setScrollHeight();
+        }
     },
     methods: {
+        onHeaderScroll() {
 
+        },
+        onBodyScroll() {
+
+        },
+        setScrollHeight() {
+            if (this.scrollHeight) {
+                if(this.scrollHeight.indexOf('%') !== -1) {
+                    let datatableContainer = this.findDataTableContainer(this.$el);
+                    this.$refs.scrollBody.style.visibility = 'hidden';
+                    this.$refs.scrollBody.style.height = '100px';         //temporary height to calculate static height
+                    let containerHeight = DomHandler.getOuterHeight(datatableContainer);
+                    let relativeHeight = DomHandler.getOuterHeight(datatableContainer.parentElement) * parseInt(this.scrollHeight, 10) / 100;
+                    let staticHeight = containerHeight - 100;       //total height of headers, footers, paginators
+                    let scrollBodyHeight = (relativeHeight - staticHeight);
+                    
+                    this.$refs.scrollBody.style.height = 'auto';
+                    this.$refs.scrollBody.style.maxHeight = scrollBodyHeight + 'px';
+                    this.$refs.scrollBody.style.visibility = 'visible';
+                }
+                else {
+                    this.$refs.scrollBody.style.maxHeight = this.scrollHeight;
+                }
+            }
+        },
+        hasVerticalOverflow() {
+            return DomHandler.getOuterHeight(this.$refs.scrollTable) > DomHandler.getOuterHeight(this.$refs.scrollBody);
+        },
+        alignScrollBar() {
+            let scrollBarWidth = this.hasVerticalOverflow() ? DomHandler.calculateScrollbarWidth() : 0;
+            
+            this.$refs.scrollHeaderBox.style.marginRight = scrollBarWidth + 'px';
+            if (this.$refs.scrollFooterBox) {
+                this.$refs.scrollFooterBox.style.marginRight = scrollBarWidth + 'px';
+            }
+        },
+        findDataTableContainer(element) {
+            if (element) {
+                let el = element;
+                while (el && !DomHandler.hasClass(el, 'p-datatable')) {
+                    el = el.parentElement;
+                }
+
+                return el;
+            }
+            else {
+                return null;
+            }
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-datatable-scrollable-view', {'p-datatable-frozen-view': this.frozen, 'p-datatable-unfrozen-view': !this.frozen && this.frozenWidth}];
+        }
     }
 }
 </script>

src/views/datatable/DataTableScrollDemo.vue

@@ -11,7 +11,7 @@
 
 		<div class="content-section implementation">
             <h3>Vertical</h3>
-			<DataTable :value="cars">
+			<DataTable :value="cars" :scrollable="true" scrollHeight="200px">
                 <Column field="vin" header="Vin"></Column>
                 <Column field="year" header="Year"></Column>
                 <Column field="brand" header="Brand"></Column>