Add margin-bottom utility class and modify table column in Table_36.vue

src/assets/css/style.css

@@ -1373,6 +1373,10 @@ body {
   margin-top: 1.5rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .mb-10 {
   margin-bottom: 2.5rem;
 }

src/components/Pages/Monalisa/Table_36.vue

@@ -11,7 +11,6 @@
   <div id="data">
     <DxDataGrid
       class="max-h-[calc(100vh-140px)] mb-10"
-      :remote-operations="true"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
@@ -44,6 +43,14 @@
       />
       <DxColumnFixing :enabled="true" />
 
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_ulp"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
       <DxColumn
         alignment="center"
         :min-width="170"
@@ -71,14 +78,6 @@
         css-class="custom-table-column"
         :group-index="2"
       />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn
@@ -135,53 +134,86 @@
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}" />
-        <DxGroupItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" />
-        <DxGroupItem column="persen_mom" summary-type="sum" display-format="{0}" />
-        <DxGroupItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}" />
-        <DxGroupItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" />
-        <DxGroupItem column="persen_yoy" summary-type="sum" display-format="{0}" />
-      </DxSummary>
-
-      <!-- <DxSummary>
-        <DxGroupItem :show-in-group-footer="true" column="nama_ulp" display-format="Total" />
         <DxGroupItem
-          :show-in-group-footer="true"
+          :align-by-column="true"
           column="mom_bulan_kemarin"
           summary-type="sum"
           display-format="{0}"
         />
         <DxGroupItem
-          :show-in-group-footer="true"
+          :align-by-column="true"
           column="mom_bulan_ini"
           summary-type="sum"
           display-format="{0}"
         />
         <DxGroupItem
-          :show-in-group-footer="true"
+          :align-by-column="true"
           column="persen_mom"
           summary-type="sum"
           display-format="{0}"
         />
         <DxGroupItem
-          :show-in-group-footer="true"
+          :align-by-column="true"
           column="yoy_tahun_kemarin"
           summary-type="sum"
           display-format="{0}"
         />
         <DxGroupItem
-          :show-in-group-footer="true"
+          :align-by-column="true"
           column="yoy_tahun_ini"
           summary-type="sum"
           display-format="{0}"
         />
         <DxGroupItem
-          :show-in-group-footer="true"
+          :align-by-column="true"
           column="persen_yoy"
           summary-type="sum"
           display-format="{0}"
         />
-      </DxSummary> -->
+
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="nama_ulp"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="mom_bulan_kemarin"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="mom_bulan_ini"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="persen_mom"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="yoy_tahun_kemarin"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="yoy_tahun_ini"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="persen_yoy"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
 </template>
@@ -202,7 +234,8 @@ import {
   DxScrolling,
   DxSearchPanel,
   DxSelection,
-  DxSummary
+  DxSummary,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'