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

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",
-          "type": "string[]",
+          "description": "Set the column headers\nSupersedes `columns` if value is a non-empty array",
+          "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} />