Update table components to include a "No" column

src/components/Pages/Keluhan/Table_32.vue

@@ -5,6 +5,7 @@
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
+      :data-source="data"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
       @selection-changed="onSelectionChanged"
@@ -29,14 +30,14 @@
       <DxColumn
         :width="50"
         alignment="center"
-        data-field=""
+        :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
         caption="NO"
         css-class="custom-table-column"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="tanggal"
         caption="Tanggal Lapor"
         css-class="custom-table-column"
       />
@@ -256,14 +257,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-  query rekapitulasiKeluhanPerUnit(
+  query rekapitulasiKeluhanPerTanggal(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    rekapitulasiKeluhanPerUnit(
+    rekapitulasiKeluhanPerTanggal(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
@@ -283,7 +284,7 @@ const GET_DATA = gql`
       min_durasi_response
       persen_inproses
       persen_selesai
-      posko
+      tanggal
       total
       total_diatas_sla_dispatch
       total_diatas_sla_recovery
@@ -309,7 +310,7 @@ onMounted(() => {
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanPerUnit
+      data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
       loadingVisible.value = false
     }
     console.log(queryResult.data)