Refactor data sorting and add number field to tables

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue

@@ -42,12 +42,21 @@
       <DxColumn
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
+        data-field="number"
         data-type="number"
         css-class="custom-table-column"
         cell-template="formatNumber"
       />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
       <DxColumn
         :width="150"
         alignment="center"
@@ -438,7 +447,7 @@
           </template>
 
           <template #formatRating="{ data }">
-            <p class="cursor-pointer">
+            <div class="flex justify-center cursor-pointer">
               <vue3starRatings
                 v-model="data.text"
                 :starSize="20"
@@ -447,7 +456,7 @@
                 :numberOfStars="5"
                 :disableClick="true"
               />
-            </p>
+            </div>
           </template>
         </DxDataGrid>
       </div>
@@ -765,7 +774,15 @@ const filterData = (params: any) => {
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
+      const refs = [...queryResult.data.rekapitulasiGangguanRatingPerRegu].sort((a: any, b: any) =>
+        a.nama_up3.localeCompare(b.nama_up3)
+      )
+      data.value = refs.map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
     }
     console.log(queryResult.data)
   })
@@ -1183,6 +1200,13 @@ onMounted(() => {
         persen_nonrating: 0
       }
     ]
+      .sort((a: any, b: any) => a.nama_up3.localeCompare(b.nama_up3))
+      .map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
   }
 })
 </script>