From fcf93bb8aa8fac3cda5d712428b562df84122610 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Fri, 2 Apr 2021 11:33:25 -0700
Subject: [PATCH] feat(data-table): support rendering empty table header in
 skeleton

---
 docs/src/pages/components/DataTable.svx | 6 ++++++
 src/DataTable/DataTableSkeleton.svelte  | 8 ++++++--
 tests/DataTable.test.svelte             | 1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 32194096..91363b36 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -1015,6 +1015,12 @@ In the following example, each row in the sortable data table has an overflow me
 
 <DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}]} rows={10} />
 
+### Skeleton with empty header
+
+Pass an object with `"empty"` set to `true` to render an empty table header column.
+
+<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}, { empty: true }]} rows={10} />
+
 ### Skeleton without header, toolbar
 
 <DataTableSkeleton showHeader={false} showToolbar={false} />
diff --git a/src/DataTable/DataTableSkeleton.svelte b/src/DataTable/DataTableSkeleton.svelte
index eb7de2e0..50e702bb 100644
--- a/src/DataTable/DataTableSkeleton.svelte
+++ b/src/DataTable/DataTableSkeleton.svelte
@@ -1,5 +1,5 @@
 <script>
-  /** @extends {"../DataTable/DataTable"} DataTableHeader */
+  /** @extends {"./DataTable"} DataTableHeader */
 
   /**
    * Specify the number of columns
@@ -77,7 +77,11 @@
     <thead>
       <tr>
         {#each cols as col (col)}
-          <th>{values[col] || ""}</th>
+          {#if typeof values[col] === "object" && values[col].empty === true}
+            <th></th>
+          {:else}
+            <th>{values[col] || ""}</th>
+          {/if}
         {/each}
       </tr>
     </thead>
diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte
index 42f52edf..6eed4bb5 100644
--- a/tests/DataTable.test.svelte
+++ b/tests/DataTable.test.svelte
@@ -249,6 +249,7 @@
     { value: 'Protocol' },
     { value: 'Port' },
     { value: 'Rule' },
+    { empty: true },
   ]}"
   rows="{10}"
 />