From bfc723d06edc9da08720e1469cdbc5750a3fff3c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 23 Sep 2020 22:12:48 +0300
Subject: [PATCH] Scrolling for V3

---
 src/components/datatable/DataTable.vue      | 46 ++++++++++-----------
 src/components/datatable/ScrollableView.vue | 16 +++++--
 2 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 2bbacba50..efa96f872 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -38,17 +38,17 @@
         </div>
         <div class="p-datatable-scrollable-wrapper" v-else>
             <DTScrollableView v-if="hasFrozenColumns" :scrollHeight="scrollHeight" :columns="frozenColumns" :frozenWidth="frozenWidth" :frozen="true"
-                :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy">
-                <template #header>
-                    <DTTableHeader :columnGroup="frozenHeaderColumnGroup" :columns="frozenColumns" :rowGroupMode="rowGroupMode"
+                :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :headerColumnGroup="frozenHeaderColumnGroup" :footerColumnGroup="frozenFooterColumnGroup">
+                <template #header="slotProps">
+                    <DTTableHeader :columnGroup="slotProps.columnGroup" :columns="slotProps.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="frozenColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
+                <template #body="slotProps">
+                    <DTTableBody :value="dataToRender" :columns="slotProps.columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :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="$slots" :loading="loading"
@@ -58,8 +58,8 @@
                         @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 #frozenbody>
-                    <DTTableBody v-if="frozenValue" :value="frozenValue" :columns="frozenColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
+                <template #frozenbody="slotProps">
+                    <DTTableBody v-if="frozenValue" :value="frozenValue" :columns="slotProps.columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :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="$slots" :loading="loading"
@@ -69,23 +69,23 @@
                         @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="frozenFooterColumnGroup" :columns="frozenColumns" />
+                <template #footer="slotProps">
+                    <DTTableFooter :columnGroup="slotProps.columnGroup" :columns="slotProps.columns" />
                 </template>
             </DTScrollableView>
             <DTScrollableView :scrollHeight="scrollHeight" :columns="scrollableColumns" :frozenWidth="frozenWidth" :rows="rows"
                 :virtualScroll="virtualScroll" :virtualRowHeight="virtualRowHeight" :totalRecords="totalRecordsLength" @virtual-scroll="onVirtualScroll"
-                :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy">
-                <template #header>
-                    <DTTableHeader :columnGroup="headerColumnGroup" :columns="scrollableColumns" :rowGroupMode="rowGroupMode"
+                :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :headerColumnGroup="headerColumnGroup" :footerColumnGroup="footerColumnGroup">
+                <template #header="slotProps">
+                    <DTTableHeader :columnGroup="slotProps.columnGroup" :columns="slotProps.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="scrollableColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
+                <template #body="slotProps">
+                    <DTTableBody :value="dataToRender" :columns="slotProps.columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :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="$slots" :loading="loading"
@@ -95,8 +95,8 @@
                         @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 #frozenbody>
-                    <DTTableBody  v-if="frozenValue" :value="frozenValue" :columns="scrollableColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
+                <template #frozenbody="slotProps">
+                    <DTTableBody  v-if="frozenValue" :value="frozenValue" :columns="slotProps.columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :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="$slots" :loading="loading"
@@ -106,8 +106,8 @@
                         @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="scrollableColumns" />
+                <template #footer="slotProps">
+                    <DTTableFooter :columnGroup="slotProps.columnGroup" :columns="slotProps.columns" />
                 </template>
             </DTScrollableView>
         </div>
@@ -591,13 +591,13 @@ export default {
 
                 for(let j = 0; j < this.columns.length; j++) {
                     let col = this.columns[j];
-                    let columnField = col.filterField || col.field;
+                    let columnField = col.props.filterField || col.props.field;
 
                     //local
                     if (Object.prototype.hasOwnProperty.call(this.filters, columnField)) {
                         let filterValue = this.filters[columnField];
                         let dataFieldValue = ObjectUtils.resolveFieldData(data[i], columnField);
-                        let filterConstraint = col.filterMatchMode === 'custom' ? col.filterFunction : FilterUtils[col.filterMatchMode];
+                        let filterConstraint = col.props.filterMatchMode === 'custom' ? col.props.filterFunction : FilterUtils[col.props.filterMatchMode];
                         if (!filterConstraint(dataFieldValue, filterValue, this.filterLocale)) {
                             localMatch = false;
                         }
@@ -607,7 +607,7 @@ export default {
                         }
                     }
 
-                    if (!col.excludeGlobalFilter && this.hasGlobalFilter && !globalMatch) {
+                    if (!col.props.excludeGlobalFilter && this.hasGlobalFilter && !globalMatch) {
                         globalMatch = FilterUtils.contains(ObjectUtils.resolveFieldData(data[i], columnField), this.filters['global'], this.filterLocale);
                     }
                 }
@@ -1673,7 +1673,7 @@ export default {
             let frozenColumns = [];
 
             for(let col of this.columns) {
-                if(col.frozen) {
+                if(col.props.frozen) {
                     frozenColumns = frozenColumns||[];
                     frozenColumns.push(col);
                 }
@@ -1685,7 +1685,7 @@ export default {
             let scrollableColumns = [];
 
             for(let col of this.columns) {
-                if(!col.frozen) {
+                if(!col.props.frozen) {
                     scrollableColumns = scrollableColumns||[];
                     scrollableColumns.push(col);
                 }
diff --git a/src/components/datatable/ScrollableView.vue b/src/components/datatable/ScrollableView.vue
index 271a5c3c1..0fe62e017 100755
--- a/src/components/datatable/ScrollableView.vue
+++ b/src/components/datatable/ScrollableView.vue
@@ -8,8 +8,8 @@
                             <col v-if="shouldRenderCol(col)" :key="col.props.columnKey||col.props.field||i" :style="col.props.headerStyle" />
                         </template>
                     </colgroup>
-                    <slot name="header"></slot>
-                    <slot name="frozenbody"></slot>
+                    <slot name="header" :columns="columns" :columnGroup="headerColumnGroup"></slot>
+                    <slot name="frozenbody" :columns="columns"></slot>
                 </table>
             </div>
         </div>
@@ -20,7 +20,7 @@
                         <col v-if="shouldRenderCol(col)" :key="col.props.columnKey||col.props.field||i" :style="col.props.bodyStyle || col.props.headerStyle" />
                     </template>
                 </colgroup>
-                <slot name="body"></slot>
+                <slot name="body" :columns="columns"></slot>
             </table>
             <table ref="loadingTable" :style="{top:'0', display: 'none'}" class="p-datatable-scrollable-body-table p-datatable-loading-virtual-table p-datatable-virtual-table" v-if="virtualScroll">
                 <colgroup>
@@ -38,7 +38,7 @@
                             <col v-if="shouldRenderCol(col)" :key="col.props.columnKey||col.props.field||i" :style="col.props.footerStyle || col.props.headerStyle" />
                         </template>
                     </colgroup>
-                    <slot name="footer"></slot>
+                    <slot name="footer" :columns="columns" :columnGroup="footerColumnGroup"></slot>
                 </table>
             </div>
         </div>
@@ -63,6 +63,14 @@ export default {
             type: null,
             default: null
         },
+        headerColumnGroup: {
+            type: null,
+            default: null
+        },
+        footerColumnGroup: {
+            type: null,
+            default: null
+        },
         scrollHeight: {
             type: String,
             default: null