From 71d23248fb0546c969022d30650423b5649227cc Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 21 Oct 2019 17:57:37 +0300
Subject: [PATCH] Docs for Row Grouping

---
 src/components/datatable/DataTable.vue        |   6 +-
 src/views/datatable/DataTableDoc.vue          | 117 ++++++++++++++++++
 src/views/datatable/DataTableRowGroupDemo.vue |  16 +--
 3 files changed, 128 insertions(+), 11 deletions(-)

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index d60a7cd30..1621a0f59 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -24,7 +24,7 @@
                 <thead class="p-datatable-thead">
                     <tr v-if="!headerColumnGroup">
                         <template v-for="(col,i) of columns">
-                            <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" 
+                            <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)"
@@ -69,8 +69,8 @@
                                 @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
                                 <template v-for="(col,i) of columns">
                                     <DTBodyCell v-if="shouldRenderBodyCell(dataToRender, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
-                                        :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow" 
-                                        @radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox" 
+                                        :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow"
+                                        @radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox"
                                         :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null" />
                                 </template>
                             </tr>
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index be1e68f4a..aa02d84cf 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -759,6 +759,87 @@ export default {
         }
     }
 }
+</CodeHighlight>
+
+                <h3>Row Group</h3>
+                <p>Row Grouping comes in two modes, in "subheader" mode rows are grouped by a header row along with an optional group footer. In addition, the groups can be made
+                    toggleable by enabling <i>expandableRowGroups</i> as true. On the other hand, the "rowspan" mode uses rowspans instead of a header to group rows. <i>groupRowsBy</i>
+                    property defines the field to use in row grouping. Multiple row grouping is available in "rowspan" mode by specifying the <i>groupRowsBy</i> as an array of fields.</p>
+
+                <p>Example below demonstrates the all grouping alternatives. Note that data needs to be sorted for grouping which can also be done by the table itself by speficying the sort properties.</p>
+
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Subheader Grouping&lt;/h3&gt;
+&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
+    sortMode="single" sortField="brand" :sortOrder="1"&gt;
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+    &lt;Column field="price" header="Price"&gt;&lt;/Column&gt;
+    &lt;template #groupheader="slotProps"&gt;
+        &lt;span&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/span&gt;
+    &lt;/template&gt;
+    &lt;template #groupfooter="slotProps"&gt;
+        &lt;td colspan="3" style="text-align: right"&gt;Total Price&lt;/td&gt;
+        &lt;td&gt;20000&lt;/td&gt;
+    &lt;/template&gt;
+&lt;/DataTable&gt;
+
+&lt;h3&gt;Expandable Row Groups&lt;/h3&gt;
+&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
+    sortMode="single" sortField="brand" :sortOrder="1"
+    :expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"&gt;
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+    &lt;Column field="price" header="Price"&gt;&lt;/Column&gt;
+    &lt;template #groupheader="slotProps"&gt;
+        &lt;span&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/span&gt;
+    &lt;/template&gt;
+    &lt;template #groupfooter="slotProps"&gt;
+        &lt;td colspan="3" style="text-align: right"&gt;Total Price&lt;/td&gt;
+        &lt;td&gt;20000&lt;/td&gt;
+    &lt;/template&gt;
+&lt;/DataTable&gt;
+
+&lt;h3&gt;RowSpan Grouping&lt;/h3&gt;
+&lt;DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
+    sortMode="single" sortField="brand" :sortOrder="1"&gt;
+    &lt;Column header="#" headerStyle="width:3em"&gt;
+        &lt;template #body="slotProps"&gt;
+            &#123;&#123;slotProps.index&#125;&#125;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+    &lt;Column field="price" header="Price"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null,
+            expandedRowGroups: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsMedium().then(data => this.cars = data);
+    }
+}
 </CodeHighlight>
 
                 <h3>Data Export</h3>
@@ -1181,6 +1262,30 @@ export default {
                                 <td>pi-chevron-right</td>
                                 <td>Icon of the row toggler to display the row as collapsed.</td>
                             </tr>
+                            <tr>
+                                <td>rowGroupMode</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Defines the row group mode, valid options are "subheader" and "rowspan".</td>
+                            </tr>
+                            <tr>
+                                <td>groupRowsBy</td>
+                                <td>string|array</td>
+                                <td>null</td>
+                                <td>One or more field names to use in row grouping.</td>
+                            </tr>
+                            <tr>
+                                <td>expandableRowGroups</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Whether the row groups can be expandable.</td>
+                            </tr>
+                            <tr>
+                                <td>expandedRowGroups</td>
+                                <td>array</td>
+                                <td>null</td>
+                                <td>An array of group field values whose groups would be rendered as expanded.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>
@@ -1272,6 +1377,18 @@ export default {
                                     event.data: Collapsed row data.</td>
                                 <td>Callback to invoke when a row is collapsed.</td>
                             </tr>
+                            <tr>
+                                <td>rowgroup-expand</td>
+                                <td>event.originalEvent: Browser event<br />
+                                    event.data: Expanded group value.</td>
+                                <td>Callback to invoke when a row group is expanded.</td>
+                            </tr>
+                            <tr>
+                                <td>rowgroup-collapse</td>
+                                <td>event.originalEvent: Browser event<br />
+                                    event.data: Collapsed group value.</td>
+                                <td>Callback to invoke when a row group is collapsed.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index 1ee6eb9fe..755655567 100644
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -11,7 +11,7 @@
 
 		<div class="content-section implementation">
             <h3>Subheader Grouping</h3>
-			<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" 
+			<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
                 sortMode="single" sortField="brand" :sortOrder="1">
                 <Column field="brand" header="Brand"></Column>
                 <Column field="vin" header="Vin"></Column>
@@ -28,7 +28,7 @@
             </DataTable>
 
             <h3>Expandable Row Groups</h3>
-			<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" 
+			<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
                 sortMode="single" sortField="brand" :sortOrder="1"
                 :expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups">
                 <Column field="brand" header="Brand"></Column>
@@ -46,14 +46,14 @@
             </DataTable>
 
             <h3>RowSpan Grouping</h3>
-			<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand" 
+			<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
                 sortMode="single" sortField="brand" :sortOrder="1">
                 <Column header="#" headerStyle="width:3em">
                     <template #body="slotProps">
                         {{slotProps.index}}
                     </template>
                 </Column>
-                <Column field="brand" header="Brand"></Column>               
+                <Column field="brand" header="Brand"></Column>
                 <Column field="year" header="Year"></Column>
                 <Column field="vin" header="Vin"></Column>
                 <Column field="color" header="Color"></Column>
@@ -67,7 +67,7 @@
 <CodeHighlight>
 <template v-pre>
 &lt;h3&gt;Subheader Grouping&lt;/h3&gt;
-&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" 
+&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
     sortMode="single" sortField="brand" :sortOrder="1"&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -84,7 +84,7 @@
 &lt;/DataTable&gt;
 
 &lt;h3&gt;Expandable Row Groups&lt;/h3&gt;
-&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" 
+&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
     sortMode="single" sortField="brand" :sortOrder="1"
     :expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
@@ -102,14 +102,14 @@
 &lt;/DataTable&gt;
 
 &lt;h3&gt;RowSpan Grouping&lt;/h3&gt;
-&lt;DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand" 
+&lt;DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
     sortMode="single" sortField="brand" :sortOrder="1"&gt;
     &lt;Column header="#" headerStyle="width:3em"&gt;
         &lt;template #body="slotProps"&gt;
             &#123;&#123;slotProps.index&#125;&#125;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;               
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;