stufflog/svelte-ui/src/components/Table.svelte

<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>