feat(data-table): support rendering empty table header in skeleton

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} />

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>

tests/DataTable.test.svelte

@@ -249,6 +249,7 @@
     { value: 'Protocol' },
     { value: 'Port' },
     { value: 'Rule' },
+    { empty: true },
   ]}"
   rows="{10}"
 />