Refactor data sorting and add number field to tables

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

@@ -44,8 +44,8 @@
       <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"
@@ -447,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"
@@ -456,7 +456,7 @@
                 :numberOfStars="5"
                 :disableClick="true"
               />
-            </p>
+            </div>
           </template>
         </DxDataGrid>
       </div>
@@ -780,9 +780,16 @@ const filterData = (params: any) => {
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
+      const refs = [...queryResult.data.rekapitulasiGangguanRatingPerPosko].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)
   })
   onError((error) => {
     console.log(error)
@@ -1201,6 +1208,13 @@ onMounted(() => {
         persen_nonrating: 5.88235294117647
       }
     ]
+      .sort((a: any, b: any) => a.nama_up3.localeCompare(b.nama_up3))
+      .map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
   }
 })
 </script>