From b1b324e68839c767af60aba8702610035645a6d0 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 1 Sep 2025 11:35:02 +0700
Subject: [PATCH] refactor(data-table): improve type safety and component
 rendering

- Replace generic 'any' types with specific type imports for better type safety
- Add optional chaining for funcComponent to prevent potential runtime errors
- Update funcHtml and funcParsed to include rowIndex parameter in callbacks
---
 .../pub/base/data-table/data-table.vue        | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index 6524aaa8..8bc50758 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import type { DataTableLoader } from './type'
+import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/custom-ui/data/types'
 import { Info } from 'lucide-vue-next'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
 
 defineProps<{
   rows: unknown[]
-  cols: any[]
-  header: any[]
+  cols: Col[]
+  header: Th[][]
   keys: string[]
-  funcParsed: Record<string, (row: any) => any>
-  funcHtml: Record<string, (row: any) => string>
-  funcComponent: Record<string, (row: any, idx: number) => any>
+  funcParsed: RecStrFuncUnknown
+  funcHtml: RecStrFuncUnknown
+  funcComponent: RecStrFuncComponent
 }>()
 
 const loader = inject('table_data_loader') as DataTableLoader
@@ -52,16 +53,17 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
           <!-- If funcComponent has a renderer -->
           <component
-:is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
-            v-bind="funcComponent[key](row, rowIndex)"
-/>
+            :is="funcComponent[key]?.(row, rowIndex).component"
+            v-if="funcComponent[key]"
+            v-bind="funcComponent[key]?.(row, rowIndex)"
+          />
           <!-- If funcParsed or funcHtml returns a value -->
           <template v-else>
             <!-- Use v-html for funcHtml to render HTML content -->
-            <div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row)"></div>
+            <div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row, rowIndex)"></div>
             <!-- Use normal interpolation for funcParsed and regular data -->
             <template v-else>
-              {{ funcParsed[key]?.(row) ?? (row as any)[key] }}
+              {{ funcParsed[key]?.(row, rowIndex) ?? (row as any)[key] }}
             </template>
           </template>
         </TableCell>