christoph/svelte-formula11
1
Fork 0
Code Issues 23 Actions Packages Projects 1 Activity

Lib: Hide table header if no data is passed

Browse Source
This commit is contained in:
Christoph Urlacher
2025-01-27 19:43:45 +01:00
parent a34cf50ace
commit 986a49377b
1 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/lib/components/Table.svelte
View File

@ -15,35 +15,37 @@
let { data, columns, handler = undefined }: TableProps = $props(); let { data, columns, handler = undefined }: TableProps = $props();
</script> </script>
<div class="table-container bg-white shadow"> {#if data.length > 0}
<table class="table table-compact bg-white"> <div class="table-container bg-white shadow">
<thead> <table class="table table-compact bg-white">
<tr class="bg-surface-500"> <thead>
{#each columns as col} <tr class="bg-surface-500">
<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} {#each columns as col}
{#if col.valuefun} <th class="!px-3">{col.label}</th>
<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} {/each}
</tr> </tr>
{/each} </thead>
</tbody>
</table> <tbody>
</div> {#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}