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
This commit is contained in:
Khafid Prayoga
2025-08-19 16:51:21 +07:00
parent 1b84ce3c62
commit 341c27679c
+11 -6
View File
@@ -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>