Refactor table column rendering and add resetData function

src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue

@@ -64,7 +64,7 @@
         css-class="custom-table-column"
         :group-index="0"
         name="NamaUID"
-        v-if="filters.groupBy"
+        v-if="isGroupBy"
       />
       <DxColumn
         :width="120"
@@ -830,13 +830,20 @@ const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
+const isGroupBy = ref(false)
 
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
   progressSelected.value = progress
 }
 
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
@@ -856,6 +863,7 @@ const filterData = async (params: any) => {
   await requestGraphQl(queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, query)
     .then((result) => {
       if (result.data.data != undefined) {
+        isGroupBy.value = params.groupBy
         if (filters.value.groupBy) {
           data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang]
             .sort((a, b) => a.nama_uid.localeCompare(b.nama_uid))