From fe96ac1377f7730befcd417093de79eeb1b06c49 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 10 Feb 2021 14:24:28 +0300
Subject: [PATCH] Add scrollable row group

---
 src/components/datatable/DataTable.vue        |  9 ++--
 src/components/datatable/TableBody.vue        | 36 +++++++++++++--
 src/views/datatable/DataTableRowGroupDemo.vue |  2 +-
 src/views/datatable/DataTableScrollDemo.vue   | 44 +++++++++++++++++++
 4 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index ba52df3c6..b80661ac1 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -25,7 +25,7 @@
                         @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
                 <DTTableBody v-if="frozenValue" :value="frozenValue" :frozenRow="true" class="p-datatable-frozen-tbody" :columns="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"
+                    :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
                     :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                     :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"
                     @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
@@ -34,7 +34,7 @@
                     @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)"/>
                 <DTTableBody :value="dataToRender" :columns="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"
+                    :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
                     :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                     :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"
                     @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
@@ -1826,7 +1826,6 @@ export default {
 .p-datatable-flex-scrollable {
     display: flex;
     flex-direction: column;
-    flex: 1;
     height: 100%;
 }
 
@@ -1837,6 +1836,10 @@ export default {
     height: 100%;
 }
 
+.p-datatable-scrollable .p-rowgroup-header {
+    position: sticky;
+}
+
 /* Resizable */
 .p-datatable-resizable > .p-datatable-wrapper {
     overflow-x: auto;
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index beb9aeaae..9798725c2 100755
--- a/src/components/datatable/TableBody.vue
+++ b/src/components/datatable/TableBody.vue
@@ -2,7 +2,7 @@
     <tbody class="p-datatable-tbody" role="rowgroup">
         <template v-if="!empty">
             <template v-for="(rowData, index) of value" :key="getRowKey(rowData, index) + '_subheader'">
-                <tr class="p-rowgroup-header" v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, index)"  role="row">
+                <tr class="p-rowgroup-header" :style="rowGroupHeaderStyle" v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, index)" role="row">
                     <td :colspan="columnsLength - 1">
                         <button class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" v-if="expandableRowGroups" type="button">
                             <span :class="rowGroupTogglerIcon(rowData)"></span>
@@ -152,16 +152,33 @@ export default {
         templates: {
             type: null,
             default: null
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
         }
     },
     mounted() {
         if (this.frozenRow) {
-            this.updateStickyPosition();
+            this.updateFrozenRowStickyPosition();
+        }
+
+        if (this.scrollable && this.rowGroupMode === 'subheader') {
+            this.updateFrozenRowGroupHeaderStickyPosition();
         }
     },
     updated() {
         if (this.frozenRow) {
-            this.updateStickyPosition();
+            this.updateFrozenRowStickyPosition();
+        }
+
+        if (this.scrollable && this.rowGroupMode === 'subheader') {
+            this.updateFrozenRowGroupHeaderStickyPosition();
+        }
+    },
+    data() {
+        return {
+            rowGroupHeaderStyleObject: {}
         }
     },
     methods: {
@@ -422,13 +439,24 @@ export default {
         onRowEditCancel(event) {
             this.$emit('row-edit-cancel', event);
         },
-        updateStickyPosition() {
+        updateFrozenRowStickyPosition() {
             this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
+        },
+        updateFrozenRowGroupHeaderStickyPosition() {
+            let tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
+            this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px'
         }
     },
     computed: {
         columnsLength() {
             return this.columns ? this.columns.length : 0;
+        },
+        rowGroupHeaderStyle() {
+            if (this.scrollable) {
+                return {top: this.rowGroupHeaderStyleObject.top};
+            }
+            
+            return null;
         }
     },
     components: {
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index 70d7d5189..f5c1d21de 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -12,7 +12,7 @@
                 <h5>Subheader Grouping</h5>
                 <p>Group customers by their representative.</p>
                 <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
-                    sortMode="single" sortField="representative.name" :sortOrder="1">
+                    sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px">
                     <Column field="representative.name" header="Representative"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="country" header="Country">
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index f5ec1ca18..ea620c500 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -118,6 +118,35 @@
                     </Column>
                 </DataTable>
             </div>
+
+            <div class="card">
+                <h5>Subheader Grouping</h5>
+                <DataTable :value="customersGrouped" rowGroupMode="subheader" groupRowsBy="representative.name"
+                    sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px">
+                    <Column field="representative.name" header="Representative"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="country" header="Country">
+                        <template #body="slotProps">
+                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <span class="image-text">{{slotProps.data.country.name}}</span>
+                        </template>
+                    </Column>
+                    <Column field="company" header="Company"></Column>
+                    <Column field="status" header="Status">
+                        <template #body="slotProps">
+                            <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
+                        </template>
+                    </Column>
+                    <Column field="date" header="Date"></Column>
+                    <template #groupheader="slotProps">
+                        <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <span class="image-text">{{slotProps.data.representative.name}}</span>
+                    </template>
+                    <template #groupfooter="slotProps">
+                        <td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
+                    </template>
+                </DataTable>
+            </div>
 		</div>
 
         <div class="content-section documentation">
@@ -338,6 +367,7 @@ export default {
     data() {
         return {
            customers: null,
+           customersGrouped: null,
             virtualCustomers: null,
             lazyTotalRecords: 0,
             frozenValue: null,
@@ -570,6 +600,7 @@ export default {
             this.customers = data;
             this.loading = false;
         });
+        this.customerService.getCustomersMedium().then(data => this.customersGrouped = data);
         this.customerService.getCustomersXLarge().then(data => this.inmemoryData = data);
 
         this.frozenValue = [
@@ -638,6 +669,19 @@ export default {
         },
         formatCurrency(value) {
             return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        },
+        calculateCustomerTotal(name) {
+            let total = 0;
+
+            if (this.customersGrouped) {
+                for (let customer of this.customersGrouped) {
+                    if (customer.representative.name === name) {
+                        total++;
+                    }
+                }
+            }
+
+            return total;
         }
     },
    components: {