From 2ceb6b7ba67c4319c223bf3ef88688e8d4e041d8 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 29 Feb 2024 13:26:37 +0700
Subject: [PATCH] Add margin-bottom utility class and modify table column in
 Table_36.vue

---
 src/assets/css/style.css                   |  4 +
 src/components/Pages/Monalisa/Table_36.vue | 87 +++++++++++++++-------
 2 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 7e4268c..43b09f7 100755
--- a/src/assets/css/style.css
+++ b/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;
 }
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index e65e78b..a54fd92 100755
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/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'