From 3f0742a354031b039c81058f40f559b7dfa173ee Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 4 Mar 2020 13:36:14 +0300
Subject: [PATCH] Fixed column header group sorting

---
 src/components/datatable/TableHeader.vue      |   4 +-
 src/views/datatable/DataTableColGroupDemo.vue | 154 +++++++++++++-----
 2 files changed, 113 insertions(+), 45 deletions(-)

diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index 468959162..24fd4c260 100644
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -18,8 +18,8 @@
         </tr>
         <template v-else>
             <tr v-for="(row,i) of columnGroup.rows" :key="i">
-                <th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)"
-                @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
+                <th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.sortable ? '0' : null" 
+                    @click="onColumnHeaderClick($event, col)" @keydown="onColumnKeyDown($event, col)" @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
                     :colspan="col.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)">
                     <ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
                     <span class="p-column-title" v-if="col.header">{{col.header}}</span>
diff --git a/src/views/datatable/DataTableColGroupDemo.vue b/src/views/datatable/DataTableColGroupDemo.vue
index 0a14b59c9..cd1d5eba4 100644
--- a/src/views/datatable/DataTableColGroupDemo.vue
+++ b/src/views/datatable/DataTableColGroupDemo.vue
@@ -21,22 +21,38 @@
                         <Column header="Profits" :colspan="2" />
                     </Row>
                     <Row>
-                        <Column header="Last Year" />
-                        <Column header="This Year" />
-                        <Column header="Last Year" />
-                        <Column header="This Year" />
+                        <Column header="Last Year" :sortable="true" field="lastYearSale"/>
+                        <Column header="This Year" :sortable="true" field="thisYearSale"/>
+                        <Column header="Last Year" :sortable="true" field="lastYearProfit"/>
+                        <Column header="This Year" :sortable="true" field="thisYearProfit"/>
                     </Row>
                 </ColumnGroup>
-               <Column field="brand" />
-                <Column field="lastYearSale" />
-                <Column field="thisYearSale" />
-                <Column field="lastYearProfit" />
-                <Column field="thisYearProfit" />
+                <Column field="brand" />
+                <Column field="lastYearSale">
+                    <template #body="slotProps">
+                        {{slotProps.data.lastYearSale}}%
+                    </template>
+                </Column>
+                <Column field="thisYearSale">
+                    <template #body="slotProps">
+                        {{slotProps.data.thisYearSale}}%
+                    </template>
+                </Column>
+                <Column field="lastYearProfit">
+                    <template #body="slotProps">
+                        ${{slotProps.data.lastYearProfit.toLocaleString()}}
+                    </template>
+                </Column>
+                <Column field="thisYearProfit">
+                    <template #body="slotProps">
+                        ${{slotProps.data.thisYearProfit.toLocaleString()}}
+                    </template>
+                </Column>
                 <ColumnGroup type="footer">
                     <Row>
-                        <Column footer="Totals:" :colspan="3" />
-                        <Column footer="$506,202" />
-                        <Column footer="$531,020" />
+                        <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
+                        <Column :footer="lastYearTotal" />
+                        <Column :footer="thisYearTotal" />
                     </Row>
                 </ColumnGroup>
             </DataTable>
@@ -58,22 +74,38 @@
             &lt;Column header="Profits" :colspan="2" /&gt;
         &lt;/Row&gt;
         &lt;Row&gt;
-            &lt;Column header="Last Year" /&gt;
-            &lt;Column header="This Year" /&gt;
-            &lt;Column header="Last Year" /&gt;
-            &lt;Column header="This Year" /&gt;
+            &lt;Column header="Last Year" :sortable="true" field="lastYearSale"/&gt;
+            &lt;Column header="This Year" :sortable="true" field="thisYearSale"/&gt;
+            &lt;Column header="Last Year" :sortable="true" field="lastYearProfit"/&gt;
+            &lt;Column header="This Year" :sortable="true" field="thisYearProfit"/&gt;
         &lt;/Row&gt;
     &lt;/ColumnGroup&gt;
     &lt;Column field="brand" /&gt;
-    &lt;Column field="lastYearSale" /&gt;
-    &lt;Column field="thisYearSale" /&gt;
-    &lt;Column field="lastYearProfit" /&gt;
-    &lt;Column field="thisYearProfit" /&gt;
+    &lt;Column field="lastYearSale"&gt;
+        &lt;template #body="slotProps"&gt;
+            &#123;&#123;slotProps.data.lastYearSale&#125;&#125;%
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="thisYearSale"&gt;
+        &lt;template #body="slotProps"&gt;
+            &#123;&#123;slotProps.data.thisYearSale&#125;&#125;%
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="lastYearProfit"&gt;
+        &lt;template #body="slotProps"&gt;
+            $&#123;&#123;slotProps.data.lastYearProfit.toLocaleString()&#125;&#125;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="thisYearProfit"&gt;
+        &lt;template #body="slotProps"&gt;
+            $&#123;&#123;slotProps.data.thisYearProfit.toLocaleString()&#125;&#125;
+        &lt;/template&gt;
+    &lt;/Column&gt;
     &lt;ColumnGroup type="footer"&gt;
         &lt;Row&gt;
-            &lt;Column footer="Totals:" :colspan="3" /&gt;
-            &lt;Column footer="$506,202" /&gt;
-            &lt;Column footer="$531,020" /&gt;
+            &lt;Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/&gt;
+            &lt;Column :footer="lastYearTotal" /&gt;
+            &lt;Column :footer="thisYearTotal" /&gt;
         &lt;/Row&gt;
     &lt;/ColumnGroup&gt;
 &lt;/DataTable&gt;
@@ -90,17 +122,35 @@ export default {
     carService: null,
     created() {
         this.sales = [
-            {brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'},
-            {brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122'},
-            {brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500'},
-            {brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,'},
-            {brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332'},
-            {brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005'},
-            {brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214'},
-            {brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322'},
-            {brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232'},
-            {brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533'}
+            {brand: 'Apple', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
+            {brand: 'Samsung', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
+            {brand: 'Microsoft', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
+            {brand: 'Philips', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
+            {brand: 'Song', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
+            {brand: 'LG', lastYearSale: 52, thisYearSale:  65, lastYearProfit: 421132, thisYearProfit: 150005},
+            {brand: 'Sharp', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
+            {brand: 'Panasonic', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
+            {brand: 'HTC', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
+            {brand: 'Toshiba', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
         ];
+    },
+    computed: {
+        lastYearTotal() {
+            let total = 0;
+            for(let sale of this.sales) {
+                total += sale.lastYearProfit;
+            }
+
+            return '$' + total.toLocaleString();
+        },
+        thisYearTotal() {
+            let total = 0;
+            for(let sale of this.sales) {
+                total += sale.thisYearProfit;
+            }
+
+            return '$' + total.toLocaleString();
+        }
     }
 }
 </CodeHighlight>
@@ -122,18 +172,36 @@ export default {
     carService: null,
     created() {
         this.sales = [
-            {brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'},
-            {brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122'},
-            {brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500'},
-            {brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,'},
-            {brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332'},
-            {brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005'},
-            {brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214'},
-            {brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322'},
-            {brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232'},
-            {brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533'}
+            {brand: 'Apple', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
+            {brand: 'Samsung', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
+            {brand: 'Microsoft', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
+            {brand: 'Philips', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
+            {brand: 'Song', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
+            {brand: 'LG', lastYearSale: 52, thisYearSale:  65, lastYearProfit: 421132, thisYearProfit: 150005},
+            {brand: 'Sharp', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
+            {brand: 'Panasonic', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
+            {brand: 'HTC', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
+            {brand: 'Toshiba', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
         ];
     },
+    computed: {
+        lastYearTotal() {
+            let total = 0;
+            for(let sale of this.sales) {
+                total += sale.lastYearProfit;
+            }
+
+            return '$' + total.toLocaleString();
+        },
+        thisYearTotal() {
+            let total = 0;
+            for(let sale of this.sales) {
+                total += sale.thisYearProfit;
+            }
+
+            return '$' + total.toLocaleString();
+        }
+    },
     components: {
         'DataTableSubMenu': DataTableSubMenu
     }