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,13 +36,36 @@
    */
   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
+<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}"
@@ -67,4 +96,5 @@
         </tr>
       {/each}
     </tbody>
-</table>
+  </table>
+</div>