Update table components to include a "No" column

src/components/Pages/Keluhan/Table_27.vue

@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
                 css-class="custom-table-column" />
@@ -104,38 +107,38 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-  query daftarKeluhanBerdasarkanMedia(
+ query daftarKeluhanDiselesaikanCC123
+(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-    $media: String!
-  ) {
-    daftarKeluhanBerdasarkanMedia(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-      media: $media
+) {
+    daftarKeluhanDiselesaikanCC123
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
     ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      id_keluhan
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      posko
-      status_akhir
-      waktu_recovery
-      waktu_response
-    }
-  }
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_keluhan!
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir!
+        waktu_recovery
+        waktu_response
+        }
+        }
 `
 const loadingVisible = ref<boolean>(true)
 onMounted(() => {
@@ -151,7 +154,7 @@ onMounted(() => {
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
+            data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
             loadingVisible.value = false
         }
         console.log(queryResult.data)