Refactor data grid components

src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
@@ -162,7 +163,7 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const data = ref<any[]>([])
 const dialogDetail = ref(false)
 
@@ -264,11 +265,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_laporanCttKwhPeriks
 })
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataDetail.value = data
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
+}
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
 }
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 const filters = ref()