Add min-width utility classes and format table cells

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

@@ -51,6 +51,7 @@
         css-class="custom-table-column"
         data-field="no"
         data-type="number"
+        cell-template="formatNumber"
       />
       <DxColumn
         :width="170"
@@ -62,13 +63,14 @@
       />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
         <DxColumn
+          :width="100"
           v-for="i in 31"
-          :width="150"
           alignment="center"
           :data-field="`tgl${i}`"
           data-type="number"
           :caption="i"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
 
@@ -77,23 +79,37 @@
           summary-type="sum"
           display-format="Call PLN 123"
           show-in-column="no"
-          css-class="text-white"
+          css-class="text-white !text-left"
         />
         <DxTotalItem
           v-for="i in 31"
           summary-type="sum"
           display-format="{0}"
           :column="`tgl${i}`"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           column="total"
           summary-type="sum"
           display-format="{0}"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
       </DxSummary>
 
+      <template #formatNumber="{ data }">
+        <p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
       <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
           {{ data.text }}
@@ -472,6 +488,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)