52 lines
1.4 KiB
Svelte
52 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { type TableColumn } from "$lib/components";
|
|
|
|
interface TableProps {
|
|
/** The data that is displayed inside the table. Any array of arbitrary key-value objects. */
|
|
data: any[];
|
|
|
|
/** The columns the table should have. */
|
|
columns: TableColumn[];
|
|
|
|
/** An optional function handling clicking on a table row */
|
|
handler?: (event: Event, id: string) => Promise<void>;
|
|
}
|
|
|
|
let { data, columns, handler = undefined }: TableProps = $props();
|
|
</script>
|
|
|
|
{#if data.length > 0}
|
|
<div class="table-container bg-white shadow">
|
|
<table class="table table-compact bg-white">
|
|
<thead>
|
|
<tr class="bg-surface-500">
|
|
{#each columns as col}
|
|
<th class="!px-3">{col.label}</th>
|
|
{/each}
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{#each data as row}
|
|
<tr
|
|
class="cursor-pointer bg-surface-300"
|
|
onclick={async (event: Event) => {
|
|
if (handler) await handler(event, row.id);
|
|
}}
|
|
>
|
|
{#each columns as col}
|
|
{#if col.valuefun}
|
|
<td class="!align-middle">
|
|
{#await col.valuefun(row[col.data_value_name]) then value}{@html value}{/await}
|
|
</td>
|
|
{:else}
|
|
<td class="!align-middle">{row[col.data_value_name]}</td>
|
|
{/if}
|
|
{/each}
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|