48 lines
1.6 KiB
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>
|