expand headers type in DataTableSkeleton, fix DataTableRow type to require "id" (#415)

* feat(data-table-skeleton): support object type for headers

* fix(data-table): require "id" in DataTableRow interface

COMPONENT_INDEX.md

@@ -779,7 +779,10 @@ export interface DataTableNonEmptyHeader {
 
 export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
 
-export type DataTableRow = Record<DataTableKey, DataTableValue>;
+export interface DataTableRow {
+  id: any;
+  [key: string]: DataTableValue;
+}
 
 export type DataTableRowId = string;
 
@@ -835,15 +838,15 @@ export interface DataTableCell {
 
 ### Props
 
-| Prop name   | Kind             | Reactive | Type                                                | Default value      | Description                                                                     |
+| Prop name   | Kind             | Reactive | Type                                                    | Default value      | Description                                                                                  |
-| :---------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------- |
+| :---------- | :--------------- | :------- | :------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- |
-| columns     | <code>let</code> | No       | <code>number</code>                                 | <code>5</code>     | Specify the number of columns                                                   |
+| columns     | <code>let</code> | No       | <code>number</code>                                     | <code>5</code>     | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
-| rows        | <code>let</code> | No       | <code>number</code>                                 | <code>5</code>     | Specify the number of rows                                                      |
+| rows        | <code>let</code> | No       | <code>number</code>                                     | <code>5</code>     | Specify the number of rows                                                                   |
-| size        | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "tall"</code> | --                 | Set the size of the data table                                                  |
+| size        | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "tall"</code>     | --                 | Set the size of the data table                                                               |
-| zebra       | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows                       |
+| zebra       | <code>let</code> | No       | <code>boolean</code>                                    | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows                                    |
-| showHeader  | <code>let</code> | No       | <code>boolean</code>                                | <code>true</code>  | Set to `false` to hide the header                                               |
+| showHeader  | <code>let</code> | No       | <code>boolean</code>                                    | <code>true</code>  | Set to `false` to hide the header                                                            |
-| headers     | <code>let</code> | No       | <code>string[]</code>                               | <code>[]</code>    | Set the column headers<br />If `headers` has one more items, `count` is ignored |
+| headers     | <code>let</code> | No       | <code>string[] &#124; Partial<DataTableHeader>[]</code> | <code>[]</code>    | Set the column headers<br />Supersedes `columns` if value is a non-empty array               |
-| showToolbar | <code>let</code> | No       | <code>boolean</code>                                | <code>true</code>  | Set to `false` to hide the toolbar                                              |
+| showToolbar | <code>let</code> | No       | <code>boolean</code>                                    | <code>true</code>  | Set to `false` to hide the toolbar                                                           |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -2655,9 +2655,9 @@
           "ts": "type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader"
         },
         {
-          "type": "Record<DataTableKey, DataTableValue>",
+          "type": "{ id: any; [key: string]: DataTableValue; }",
           "name": "DataTableRow",
-          "ts": "type DataTableRow = Record<DataTableKey, DataTableValue>"
+          "ts": "interface DataTableRow { id: any; [key: string]: DataTableValue; }"
         },
         {
           "type": "string",
@@ -3281,7 +3281,7 @@
         {
           "name": "columns",
           "kind": "let",
-          "description": "Specify the number of columns",
+          "description": "Specify the number of columns\nSuperseded by `headers` if `headers` is a non-empty array",
           "type": "number",
           "value": "5",
           "isFunction": false,
@@ -3330,8 +3330,8 @@
         {
           "name": "headers",
           "kind": "let",
-          "description": "Set the column headers\nIf `headers` has one more items, `count` is ignored",
+          "description": "Set the column headers\nSupersedes `columns` if value is a non-empty array",
-          "type": "string[]",
+          "type": "string[] | Partial<DataTableHeader>[]",
           "value": "[]",
           "isFunction": false,
           "constant": false,
@@ -3356,7 +3356,11 @@
         { "type": "forwarded", "name": "mouseleave", "element": "table" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "table" }
+      "rest_props": { "type": "Element", "name": "table" },
+      "extends": {
+        "interface": "DataTableHeader",
+        "import": "\"../DataTable/DataTable\""
+      }
     },
     {
       "moduleName": "DatePicker",

docs/src/pages/components/DataTable.svx

@@ -10,6 +10,8 @@ components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "Toolbar
 
 ### Default
 
+The `DataTable` is keyed for both rendering and sorting. You must define a "key" value per object in the `headers` property and an "id" value in `rows`.
+
 <DataTable
   headers="{[
     { key: "name", value: "Name" },
@@ -824,6 +826,12 @@ In the following example, each row in the sortable data table has an overflow me
 
 <DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />
 
+### Skeleton with object headers
+
+`headers` can also be an array of objects. The type is the same as the `headers` prop type used in `DataTable`.
+
+<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}]} rows={10} />
+
 ### Skeleton without header, toolbar
 
 <DataTableSkeleton showHeader={false} showToolbar={false} />

src/DataTable/DataTable.svelte

@@ -5,7 +5,7 @@
    * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableEmptyHeader
    * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableNonEmptyHeader
    * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
-   * @typedef {Record<DataTableKey, DataTableValue>} DataTableRow
+   * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
    * @typedef {string} DataTableRowId
    * @typedef {{ key: DataTableKey; value: DataTableValue; }} DataTableCell
    * @slot {{ row: DataTableRow; }} expanded-row

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -1,5 +1,10 @@
 <script>
-  /** Specify the number of columns */
+  /** @extends {"../DataTable/DataTable"} DataTableHeader */
+
+  /**
+   * Specify the number of columns
+   * Superseded by `headers` if `headers` is a non-empty array
+   */
   export let columns = 5;
 
   /** Specify the number of rows */
@@ -19,14 +24,17 @@
 
   /**
    * Set the column headers
-   * If `headers` has one more items, `count` is ignored
+   * Supersedes `columns` if value is a non-empty array
-   * @type {string[]}
+   * @type {string[] | Partial<DataTableHeader>[]}
    */
   export let headers = [];
 
   /** Set to `false` to hide the toolbar */
   export let showToolbar = true;
 
+  $: values = headers.map((header) =>
+    header.value !== undefined ? header.value : header
+  );
   $: cols = Array.from(
     { length: headers.length > 0 ? headers.length : columns },
     (_, i) => i
@@ -66,20 +74,20 @@
   >
     <thead>
       <tr>
-        {#each cols as col, i (col)}
+        {#each cols as col (col)}
-          <th>{headers[col] || ''}</th>
+          <th>{values[col] || ''}</th>
         {/each}
       </tr>
     </thead>
     <tbody>
       <tr>
-        {#each cols as col, i (col)}
+        {#each cols as col (col)}
           <td><span></span></td>
         {/each}
       </tr>
-      {#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
+      {#each Array.from({ length: rows - 1 }, (_, i) => i) as row (row)}
         <tr>
-          {#each cols as col, j (col)}
+          {#each cols as col (col)}
             <td></td>
           {/each}
         </tr>

tests/DataTable.test.svelte

@@ -183,6 +183,13 @@
   rows="{10}"
 />
 
+<DataTableSkeleton
+  headers="{[{ value: 'Name' }, { value: 'Protocol' }, { value: 'Port' }, { value: 'Rule' }]}"
+  rows="{10}"
+/>
+
+<DataTableSkeleton headers="{headers}" rows="{10}" />
+
 <DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
 
 <DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />

types/DataTable/DataTable.d.ts

@@ -22,7 +22,10 @@ export interface DataTableNonEmptyHeader {
 
 export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
 
-export type DataTableRow = Record<DataTableKey, DataTableValue>;
+export interface DataTableRow {
+  id: any;
+  [key: string]: DataTableValue;
+}
 
 export type DataTableRowId = string;
 

types/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="svelte" />
+import { DataTableHeader } from "../DataTable/DataTable";
 
-export interface DataTableSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> {
+export interface DataTableSkeletonProps
+  extends DataTableHeader,
+    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> {
   /**
    * Specify the number of columns
+   * Superseded by `headers` if `headers` is a non-empty array
    * @default 5
    */
   columns?: number;
@@ -32,10 +36,10 @@ export interface DataTableSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLEl
 
   /**
    * Set the column headers
-   * If `headers` has one more items, `count` is ignored
+   * Supersedes `columns` if value is a non-empty array
    * @default []
    */
-  headers?: string[];
+  headers?: string[] | Partial<DataTableHeader>[];
 
   /**
    * Set to `false` to hide the toolbar