From 1e39ba09b084b39415bc4db0e772b426faa3b63c Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 21 Oct 2019 13:51:06 +0300
Subject: [PATCH] Initiated RowGrouping

---
 src/components/datatable/DataTable.vue        | 51 +++++++++++++------
 src/views/datatable/DataTableRowGroupDemo.vue | 34 ++++++++++---
 2 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index a51364da4..8e39733f6 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -23,17 +23,20 @@
             <table ref="table">
                 <thead class="p-datatable-thead">
                     <tr v-if="!headerColumnGroup">
-                        <th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
-                            @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
-                            @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
-                            :colspan="col.colspan" :rowspan="col.rowspan">
-                            <span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
-                            <ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
-                            <span class="p-column-title" v-if="col.header">{{col.header}}</span>
-                            <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
-                            <ColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
-                            <DTHeaderCheckbox :checked="allRowsSelected" @change="toggleRowsWithCheckbox" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
-                        </th>
+                        <template v-for="(col,i) of columns">
+                            <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" 
+                                :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
+                                @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
+                                @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
+                                :colspan="col.colspan" :rowspan="col.rowspan">
+                                <span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
+                                <ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
+                                <span class="p-column-title" v-if="col.header">{{col.header}}</span>
+                                <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
+                                <ColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
+                                <DTHeaderCheckbox :checked="allRowsSelected" @change="toggleRowsWithCheckbox" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
+                            </th>
+                        </template>
                     </tr>
                     <template v-else>
                         <tr v-for="(row,i) of headerColumnGroup.rows" :key="i">
@@ -52,17 +55,19 @@
                 <tbody class="p-datatable-tbody">
                     <template v-if="!empty">
                         <template v-for="(rowData, index) of dataToRender">
-                            <tr class="p-rowgroup-header" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(dataToRender, rowData, index)" :key="getRowKey(rowData, index)">
-                                <td :colspan="columns.length">
+                            <tr class="p-rowgroup-header" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(dataToRender, rowData, index)" :key="getRowKey(rowData, index) + '_subheader'">
+                                <td :colspan="columns.length - 1">
                                     <slot name="groupheader" :data="rowData"></slot>
                                 </td>
                             </tr>
                             <tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
                                 @click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null"
                                 @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
-                                <DTBodyCell v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :selected="isSelected(rowData)"
-                                    :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow" 
-                                    @radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox" />
+                                <template v-for="(col,i) of columns">
+                                    <DTBodyCell v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :selected="isSelected(rowData)"
+                                        :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow" 
+                                        @radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox" />
+                                </template>
                             </tr>
                             <tr class="p-datatable-row-expansion" v-if="expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'">
                                 <td :colspan="columns.length">
@@ -70,6 +75,9 @@
                                     </slot>
                                 </td>
                             </tr>
+                            <tr class="p-rowgroup-footer" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(dataToRender, rowData, index)" :key="getRowKey(rowData, index) + '_subfooter'">
+                                <slot name="groupfooter" :data="rowData"></slot>
+                            </tr>
                         </template>
                     </template>
                     <tr v-else class="p-datatable-emptymessage">
@@ -1247,6 +1255,17 @@ export default {
 
                 return currentRowFieldData !== previousRowFieldData;
             }
+        },
+        shouldRenderRowGroupFooter(value, rowData, i) {
+            if (i === (value.length - 1)) {
+                return true;
+            }
+            else {
+                let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
+                let nextRowFieldData = ObjectUtils.resolveFieldData(value[i + 1], this.groupRowsBy);
+
+                return currentRowFieldData !== nextRowFieldData;
+            }            
         }
     },
     computed: {
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index ef471d1d0..1a79e7719 100644
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -10,23 +10,32 @@
 		</div>
 
 		<div class="content-section implementation">
+            <h3>Subheader Grouping</h3>
 			<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" 
                 sortMode="single" sortField="brand" :sortOrder="1">
-                <template #header>
-                    Subheader Grouping
-                </template>
                 <Column field="brand" header="Brand"></Column>
                 <Column field="vin" header="Vin"></Column>
                 <Column field="year" header="Year"></Column>
                 <Column field="color" header="Color"></Column>
+                <Column field="price" header="Price"></Column>
                 <template #groupheader="slotProps">
-                    <strong>{{slotProps.data.brand}}</strong>
+                    <span>{{slotProps.data.brand}}</span>
                 </template>
                 <template #groupfooter="slotProps">
                     <td colspan="3" style="text-align: right">Total Price</td>
                     <td>20000</td>
                 </template>
             </DataTable>
+
+            <h3>RowSpan Grouping</h3>
+			<DataTable :value="cars" rowGroupMode="rowspan" :groupRowsBy="['brand', 'year']" 
+                sortMode="multiple" :multiSortMeta="multiSortMeta">
+                <Column field="brand" header="Brand"></Column>
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="color" header="Color"></Column>
+                <Column field="price" header="Price"></Column>
+            </DataTable>
 		</div>
 
         <div class="content-section documentation">
@@ -54,12 +63,18 @@ import DataTableSubMenu from './DataTableSubMenu';
 export default {
     data() {
         return {
-            cars: null
+            cars: null,
+            multiSortMeta: null
         }
     },
     carService: null,
     created() {
         this.carService = new CarService();
+
+        this.multiSortMeta = [
+            {field: 'brand', order: 1},
+            {field: 'year', order: 1}
+        ];
     },
     mounted() {
         this.carService.getCarsMedium().then(data => this.cars = data);
@@ -68,4 +83,11 @@ export default {
         'DataTableSubMenu': DataTableSubMenu
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.p-rowgroup-header span,
+.p-rowgroup-footer td {
+    font-weight: 700;
+}
+</style>
\ No newline at end of file