Story work for table controls

src/lib/components/Table.stories.svelte

@@ -0,0 +1,52 @@
+<script context="module">
+  import Table from './Table.svelte';
+  import TableRow from './TableRow.svelte';
+  import TableRowItem from './TableRowItem.svelte';
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+
+  export const meta = {
+    title: "Controls/Table",
+    component: Table,
+    tags: ['autodocs']
+  }
+</script>
+
+<Story name="Default">
+  <Table></Table>
+</Story>
+
+<script lang="ts">
+  const headerItems: string[] = [
+    "Header 1",
+    "Header 2"
+  ]
+  const rows: string[][] = [
+    ["Row 1:1", "Row 2:2"],
+    ["Row 2 1", "Row 2 2"]
+  ]
+</script>
+
+<Template let:args>
+  <Table {...args}>
+    <svelte:fragment slot="header">
+      {#if !args.hideHeader}
+        <TableRow>
+          {#each headerItems as header}
+            <TableRowItem>{@html header}</TableRowItem>
+          {/each}
+        </TableRow>
+      {/if}
+    </svelte:fragment>
+    {#each rows as row}
+      <TableRow>
+        {#each row as item}
+          <TableRowItem>{@html item}</TableRowItem>
+        {/each}
+      </TableRow>
+    {/each}
+  </Table>
+</Template>
+
+<Story name="Hydrated"/>
+<Story name="Start-aligned Header" args={{headerAlignment: "start"}}/>
+<Story name="No Header" args={{hideHeader: true}}/>

src/lib/components/Table.svelte

@@ -1,13 +1,19 @@
-<div class="table">
-  {#if $$slots.header}
-    <div class="table-header">
-      <slot name="header"/>
+<script lang="ts">
+  export let headerAlignment: "center" | "start" = "center";
+</script>
+
+{#if $$slots.default || $$slots.header}
+  <div class="table">
+    {#if $$slots.header}
+      <div class="table-header {headerAlignment}">
+        <slot name="header"/>
+      </div>
+    {/if}
+    <div class="table-body">
+      <slot/>
     </div>
-  {/if}
-  <div class="table-body">
-    <slot/>
   </div>
-</div>
+{/if}
 
 <style>
   .table {
@@ -22,8 +28,8 @@
     font-weight: 700;
   }
 
-  :global(.table-header * *) {
-    text-align: center;
+  :global(.table-header.center .table-row .table-cell) {
+    justify-content: center;
   }
 
   .table-body {

src/lib/components/TableRowItem.svelte

@@ -5,8 +5,11 @@
 <style>
   .table-cell {
     padding: 10px;
-    display: flex;
+    display: grid;
+    grid-auto-flow: column dense; 
+    justify-content: start;
     align-items: center;
+    column-gap: 5px;
   }
 
   :global(.table-cell + .table-cell) {