diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 2da9656f..88c73be4 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -835,15 +835,15 @@ export interface DataTableCell {
 
 ### Props
 
-| Prop name   | Kind             | Reactive | Type                                                | Default value      | Description                                                                     |
-| :---------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------- |
-| columns     | <code>let</code> | No       | <code>number</code>                                 | <code>5</code>     | Specify the number of columns                                                   |
-| 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                                                  |
-| 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                                               |
-| headers     | <code>let</code> | No       | <code>string[]</code>                               | <code>[]</code>    | Set the column headers<br />If `headers` has one more items, `count` is ignored |
-| showToolbar | <code>let</code> | No       | <code>boolean</code>                                | <code>true</code>  | Set to `false` to hide the toolbar                                              |
+| Prop name   | Kind             | Reactive | Type                                                    | Default value      | Description                                                                                  |
+| :---------- | :--------------- | :------- | :------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- |
+| 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                                                                   |
+| 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                                    |
+| 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[] &#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                                                           |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 79579b29..46c52c63 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -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",
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 8998770a..d978c060 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -824,6 +824,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} />
diff --git a/src/DataTableSkeleton/DataTableSkeleton.svelte b/src/DataTableSkeleton/DataTableSkeleton.svelte
index 854714ce..2ee4ade3 100644
--- a/src/DataTableSkeleton/DataTableSkeleton.svelte
+++ b/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
-   * @type {string[]}
+   * Supersedes `columns` if value is a non-empty array
+   * @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)}
-          <th>{headers[col] || ''}</th>
+        {#each cols as col (col)}
+          <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>
diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte
index d0733fe3..4e0cba5b 100644
--- a/tests/DataTable.test.svelte
+++ b/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" />
diff --git a/types/DataTableSkeleton/DataTableSkeleton.d.ts b/types/DataTableSkeleton/DataTableSkeleton.d.ts
index 27ebf0f1..73167a0e 100644
--- a/types/DataTableSkeleton/DataTableSkeleton.d.ts
+++ b/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