Doc update for row group

src/views/datatable/DataTableDoc.vue

@@ -783,14 +783,15 @@ export default {
     </template>
     <template #groupfooter="slotProps">
         <td colspan="3" style="text-align: right">Total Price</td>
-        <td>20000</td>
+        <td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
     </template>
 </DataTable>
 
 <h3>Expandable Row Groups</h3>
 <DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
     sortMode="single" sortField="brand" :sortOrder="1"
-    :expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups">
+    :expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
+    @rowgroup-expand="onRowExpand" @rowgroup-collapse="onRowCollapse">
     <Column field="brand" header="Brand"></Column>
     <Column field="vin" header="Vin"></Column>
     <Column field="year" header="Year"></Column>
@@ -801,7 +802,7 @@ export default {
     </template>
     <template #groupfooter="slotProps">
         <td colspan="3" style="text-align: right">Total Price</td>
-        <td>20000</td>
+        <td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
     </template>
 </DataTable>
 
@@ -838,6 +839,27 @@ export default {
     },
     mounted() {
         this.carService.getCarsMedium().then(data => this.cars = data);
+    },
+    methods: {
+        onRowGroupExpand(event) {
+            this.$toast.add({severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000});
+        },
+        onRowGroupCollapse(event) {
+            this.$toast.add({severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000});
+        },
+        calculateGroupTotal(brand) {
+            let total = 0;
+            
+            if (this.cars) {
+                for (let car of this.cars) {
+                    if (car.brand === brand) {
+                        total += car.price;
+                    }
+                }
+            }
+
+            return total;
+        }
     }
 }
 </CodeHighlight>