You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1011 B
51 lines
1011 B
<script>
|
|
export let headers = [];
|
|
export let percentages = [];
|
|
|
|
let zipped = [];
|
|
|
|
$: zipped = headers.map((h, i) => ({header: h, pct: percentages[i]}))
|
|
$: if (percentages.length !== headers.length) {
|
|
throw new Error(`Mismatching headers (${headers.join(",")}) and percentages (${percentages.join(",")})`)
|
|
}
|
|
</script>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
{#each zipped as h}
|
|
<th style={`width: ${h.pct}%;`}>{h.header}</th>
|
|
{/each}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<slot></slot>
|
|
</tbody>
|
|
</table>
|
|
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
padding: 0.5em 0.75ch;
|
|
}
|
|
|
|
table :global(th), table :global(td) {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
table :global(th) {
|
|
text-align: left;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
table :global(td.ellipsis) {
|
|
max-width: 1px; /* Don't ask me why this works... */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
table :global(td:last-of-type), table :global(th:last-of-type) {
|
|
text-align: right;
|
|
}
|
|
</style>
|