Add DxGrouping component and update DxColumn properties

src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue

@@ -23,6 +23,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,6 +52,15 @@
         cell-template="formatText"
       />
 
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Semua Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
       <DxColumn
         :width="150"
         alignment="center"
@@ -58,7 +68,7 @@
         caption="Regional"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="0"
+        :group-index="1"
       />
       <DxColumn
         :width="150"
@@ -67,7 +77,7 @@
         caption="UID"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="1"
+        :group-index="2"
       />
       <DxColumn
         :width="150"
@@ -76,7 +86,7 @@
         caption="UP3"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="2"
+        :group-index="3"
       />
 
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
@@ -768,7 +778,8 @@ import {
   DxSearchPanel,
   DxSelection,
   DxSummary,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'