Update table components to include a "No" column

src/components/Pages/Keluhan/Table_31.vue

@@ -1,7 +1,6 @@
-<!-- Rekapitulasi Keluhan Per Jenis Keluhan -->
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -13,7 +12,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="Kelompok Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -123,7 +125,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query rekapitulasiKeluhanPerJenisKeluhan
+query rekapitulasiKeluhanPerKelompokKeluhan
 (
     $dateFrom: Date!
     $dateTo: Date!
@@ -131,7 +133,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
     $idUid: Int!
     $idUp3: Int!
 ) {
-    rekapitulasiKeluhanPerJenisKeluhan
+    rekapitulasiKeluhanPerKelompokKeluhan
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
@@ -175,7 +177,7 @@ onMounted(() => {
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
+            data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
                 ;
             loadingVisible.value = false
         }