47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/pub/ui/table'
|
|
|
|
defineProps<{
|
|
rows: unknown[]
|
|
cols: object
|
|
header: object[]
|
|
keys: string[]
|
|
funcParsed: object
|
|
funcHtml: object
|
|
funcComponent: object
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead
|
|
v-for="(h, idx) in header[0]"
|
|
:key="`head-${idx}`"
|
|
:style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
|
|
>
|
|
{{ h.label }}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
<TableBody>
|
|
<TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
|
|
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
|
|
<!-- If funcComponent has a renderer -->
|
|
<component
|
|
: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>
|
|
{{ funcParsed[key]?.(row) ?? funcHtml[key]?.(row) ?? row[key] }}
|
|
</template>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</template>
|