cc-backend/web/frontend/src/PlotTable.svelte

51 lines
1.2 KiB
Svelte
Raw Normal View History

2022-06-22 11:20:57 +02:00
<!--
@component
Properties:
- itemsPerRow: Number
- items: [Any]
-->
<script>
export let itemsPerRow
export let items
export let padding = 10
let tableWidth = 0
const isPlaceholder = x => x._is_placeholder === true
2022-06-22 11:20:57 +02:00
function tile(items, itemsPerRow) {
const rows = []
for (let ri = 0; ri < items.length; ri += itemsPerRow) {
const row = []
for (let ci = 0; ci < itemsPerRow; ci += 1) {
if (ri + ci < items.length)
row.push(items[ri + ci])
else
row.push({ _is_placeholder: true, ri, ci })
2022-06-22 11:20:57 +02:00
}
rows.push(row)
}
return rows
}
$: rows = tile(items, itemsPerRow)
$: plotWidth = (tableWidth / itemsPerRow) - (padding * itemsPerRow)
</script>
<table bind:clientWidth={tableWidth} style="width: 100%; table-layout: fixed;">
{#each rows as row}
<tr>
{#each row as item (item)}
<td>
{#if !isPlaceholder(item) && plotWidth > 0}
2022-06-22 11:20:57 +02:00
<slot item={item} width={plotWidth}></slot>
{/if}
</td>
{/each}
</tr>
{/each}
</table>