fix(datatable-skeleton): add showHeader, showToolbar props

fixes #264

src/DataTableSkeleton/DataTable.stories.js

@@ -1,4 +1,4 @@
-import { withKnobs, array, boolean } from "@storybook/addon-knobs";
+import { withKnobs, array, boolean, number } from "@storybook/addon-knobs";
 import Component from "./DataTableSkeleton.Story.svelte";
 
 export default { title: "DataTableSkeleton", decorators: [withKnobs] };
@@ -6,12 +6,16 @@ export default { title: "DataTableSkeleton", decorators: [withKnobs] };
 export const Default = () => ({
   Component,
   props: {
+    columns: number("Number of columns", 5),
+    rows: number("Number of rows", 5),
+    zebra: boolean("Use zebra stripe (zebra)", false),
+    compact: boolean("Compact variant (compact)", false),
+    showHeader: boolean("Show header", true),
     headers: array(
       "Optional table headers (headers)",
       ["Name", "Protocol", "Port", "Rule", "Attached Groups"],
       ","
     ),
-    zebra: boolean("Use zebra stripe (zebra)", false),
-    compact: boolean("Compact variant (compact)", false),
+    showToolbar: boolean("Show toolbar", true),
   },
 });

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -23,6 +23,12 @@
    */
   export let zebra = false;
 
+  /**
+   * Set to `false` to hide the header
+   * @type {boolean} [showHeader=true]
+   */
+  export let showHeader = true;
+
   /**
    * Set the column headers
    * If `headers` has one more items, `count` is ignored
@@ -30,41 +36,65 @@
    */
   export let headers = [];
 
+  /**
+   * Set to `false` to hide the toolbar
+   * @type {boolean} [showToolbar=true]
+   */
+  export let showToolbar = true;
+
   $: cols = Array.from(
     { length: headers.length > 0 ? headers.length : columns },
     (_, i) => i
   );
 </script>
 
-<table
-  class:bx--skeleton="{true}"
-  class:bx--data-table="{true}"
-  class:bx--data-table--zebra="{zebra}"
-  class:bx--data-table--compact="{compact}"
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave>
-  <thead>
-    <tr>
-      {#each cols as col, i (col)}
-        <th>{headers[col] || ''}</th>
-      {/each}
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      {#each cols as col, i (col)}
-        <td><span></span></td>
-      {/each}
-    </tr>
-    {#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
+<div class:bx--skeleton="{true}" class:bx--data-table-container="{true}">
+  {#if showHeader}
+    <div class:bx--data-table-header="{true}">
+      <div class:bx--data-table-header__title="{true}"></div>
+      <div class:bx--data-table-header__description="{true}"></div>
+    </div>
+  {/if}
+  {#if showToolbar}
+    <section aria-label="data table toolbar" class:bx--table-toolbar="{true}">
+      <div class:bx--toolbar-content="{true}">
+        <span
+          class:bx--skeleton="{true}"
+          class:bx--btn="{true}"
+          class:bx--btn--sm="{true}"></span>
+      </div>
+    </section>
+  {/if}
+  <table
+    class:bx--skeleton="{true}"
+    class:bx--data-table="{true}"
+    class:bx--data-table--zebra="{zebra}"
+    class:bx--data-table--compact="{compact}"
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    <thead>
       <tr>
-        {#each cols as col, j (col)}
-          <td></td>
+        {#each cols as col, i (col)}
+          <th>{headers[col] || ''}</th>
         {/each}
       </tr>
-    {/each}
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+      <tr>
+        {#each cols as col, i (col)}
+          <td><span></span></td>
+        {/each}
+      </tr>
+      {#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
+        <tr>
+          {#each cols as col, j (col)}
+            <td></td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>