From 341c27679c5a590855c54e719bcfdc007c4ee21c Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 19 Aug 2025 16:51:21 +0700
Subject: [PATCH] refactor(data-table): improve type safety and rendering logic

- Replace ambiguous `object` types with more specific type definitions
- Separate HTML rendering from plain text interpolation for better security
- Simplify template logic by removing nested ternary operations
---
 app/components/pub/base/data-table.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/components/pub/base/data-table.vue b/app/components/pub/base/data-table.vue
index 983559b8..b913affc 100644
--- a/app/components/pub/base/data-table.vue
+++ b/app/components/pub/base/data-table.vue
@@ -3,12 +3,12 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~
 
 defineProps<{
   rows: unknown[]
-  cols: object
-  header: object[]
+  cols: any[]
+  header: any[]
   keys: string[]
-  funcParsed: object
-  funcHtml: object
-  funcComponent: object
+  funcParsed: Record<string, (row: any) => any>
+  funcHtml: Record<string, (row: any) => string>
+  funcComponent: Record<string, (row: any, idx: number) => any>
 }>()
 </script>
 
@@ -37,7 +37,12 @@ defineProps<{
           />
           <!-- If funcParsed or funcHtml returns a value -->
           <template v-else>
-            {{ funcParsed[key]?.(row) ?? funcHtml[key]?.(row) ?? row[key] }}
+            <!-- Use v-html for funcHtml to render HTML content -->
+            <div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row)"></div>
+            <!-- Use normal interpolation for funcParsed and regular data -->
+            <template v-else>
+              {{ funcParsed[key]?.(row) ?? (row as any)[key] }}
+            </template>
           </template>
         </TableCell>
       </TableRow>