Add more configuration options to skeleton table (#933)

* more configurable skeleton table

* add another hst variant

* add reactive columnWidths prop to hst variant

Author: rossedfort

src/lib/holocene/skeleton/skeleton.story.svelte

@@ -3,6 +3,13 @@
   import Skeleton from './index.svelte';
   import SkeletonTable from './table.svelte';
 
+  let rows: number = 10;
+  let columns: number = 4;
+  let columnWidths: number[] = [25, 25, 25, 25];
+
+  $: {
+    columnWidths = Array.from(new Array(columns)).fill(100 / columns);
+  }
   export let Hst: HST;
 </script>
 
@@ -16,6 +23,22 @@
   </Hst.Variant>
 
   <Hst.Variant title="A Table Skeleton Loader">
-    <SkeletonTable />
+    <SkeletonTable bind:rows bind:columns bind:columnWidths />
+  </Hst.Variant>
+
+  <Hst.Variant title="A Table Skeleton Loader with column widths">
+    <SkeletonTable columns={4}>
+      <svelte:fragment slot="headers">
+        <th class="w-1/4">Header 1</th>
+        <th class="w-1/2">Header 2</th>
+        <th>Header 3</th>
+        <th class="w-1/12">Header 4</th>
+      </svelte:fragment>
+    </SkeletonTable>
   </Hst.Variant>
+
+  <svelte:fragment slot="controls">
+    <Hst.Number bind:value={rows} title="Rows: " />
+    <Hst.Number bind:value={columns} title="Columns: " />
+  </svelte:fragment>
 </Hst.Story>

src/lib/holocene/skeleton/table.svelte

@@ -1,20 +1,29 @@
 <script lang="ts">
   import Table from '$lib/holocene/table/table.svelte';
+  import TableHeaderRow from '../table/table-header-row.svelte';
+  import TableRow from '../table/table-row.svelte';
   import Skeleton from './index.svelte';
 
   export let rows = 10;
+  export let columns = 4;
+  export let columnWidths: number[] = new Array(columns).fill(100 / columns);
 </script>
 
-<Table class="w-full border" variant="fancy">
-  <tr slot="headers" class="h-8">
-    <th />
-  </tr>
+<Table class="w-full table-fixed" variant="fancy">
+  <TableHeaderRow slot="headers" class="h-8">
+    <slot name="headers">
+      {#each Array.from(new Array(columns)) as _column, i}
+        <th style="width: {columnWidths[i]}%" />
+      {/each}
+    </slot>
+  </TableHeaderRow>
   {#each Array.from(Array(rows).keys()) as _row}
-    <tr class="flex items-center gap-4 p-3">
-      <Skeleton class="h-5 w-44" />
-      <Skeleton class="h-5" />
-      <Skeleton class="h-5 w-96" />
-      <Skeleton class="h-5 w-96" />
-    </tr>
+    <TableRow>
+      {#each Array.from(new Array(columns)) as _column}
+        <td style="padding-right: 0.5rem;">
+          <Skeleton class="h-4 w-full" />
+        </td>
+      {/each}
+    </TableRow>
   {/each}
 </Table>