lan-party-frontend/src/Table.svelte

48 lines
1.6 KiB
Svelte

<script context="module" lang="ts">
</script>
<script lang="ts">
import Loading from "./Loading.svelte";
export let headers: Array<string>;
export let rows: Array<Array<string>> | undefined = undefined;
export let loading: boolean = false;
</script>
<div class="inline-block min-w-full py-2 align-middle">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-600">
<thead class="bg-gray-800">
<tr>
{#each headers as header}
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-slate-400">{header}</th>
{/each}
</tr>
</thead>
<tbody class="divide-y divide-gray-600 bg-gray-700">
{#if rows !== undefined && rows !== null}
{#each rows as row}
<tr>
{#each row as value}
<td class="whitespace-nowrap px-3 py-4 text-sm text-slate-400">{value}</td>
{/each}
</tr>
{/each}
{/if}
<slot />
{#if loading === true}
<tr>
<td colspan={headers.length + 1} class="py-3">
<div class="grid place-items-center">
<Loading />
</div>
</td>
</tr>
{/if}
</tbody>
</table>
</div>
</div>