summaryrefslogtreecommitdiffhomepage
path: root/src/components/Table.svelte
blob: 7c56e69a96a44ab3020df65b6aca0bf94bb6e775 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script lang="ts">
	// Generic, purely presentational table. Props in → markup out; zero logic,
	// zero data-fetching. Shared by the surface custom-field "table" renderer and
	// the frontend "Loaded Modules" view, so neither feature depends on the other.
	let {
		columns,
		rows,
		empty = "No data",
	}: {
		readonly columns: readonly string[];
		readonly rows: readonly (readonly string[])[];
		/** Text shown when there are no rows. */
		readonly empty?: string;
	} = $props();
</script>

<div class="overflow-x-auto">
	<table class="table table-sm">
		<thead>
			<tr>
				{#each columns as col, i (i)}
					<th>{col}</th>
				{/each}
			</tr>
		</thead>
		<tbody>
			{#if rows.length === 0}
				<tr>
					<td colspan={Math.max(columns.length, 1)} class="opacity-60">{empty}</td>
				</tr>
			{:else}
				{#each rows as row, r (r)}
					<tr>
						{#each row as cell, c (c)}
							<td>{cell}</td>
						{/each}
					</tr>
				{/each}
			{/if}
		</tbody>
	</table>
</div>