diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 78306b87..2d95134a 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -926,31 +926,33 @@ None.
 ### Types
 
 ```ts
-export type DataTableKey = string;
+export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
 
 export type DataTableValue = any;
 
-export interface DataTableEmptyHeader {
-  key: DataTableKey;
+export interface DataTableEmptyHeader<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   empty: boolean;
-  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
+  display?: (item: DataTableValue, row: Row) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
   columnMenu?: boolean;
   width?: string;
   minWidth?: string;
 }
 
-export interface DataTableNonEmptyHeader {
-  key: DataTableKey;
+export interface DataTableNonEmptyHeader<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   value: DataTableValue;
-  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
+  display?: (item: DataTableValue, row: Row) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
   columnMenu?: boolean;
   width?: string;
   minWidth?: string;
 }
 
-export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
+export type DataTableHeader<Row = DataTableRow> =
+  | DataTableNonEmptyHeader<Row>
+  | DataTableEmptyHeader<Row>;
 
 export interface DataTableRow {
   id: any;
@@ -959,8 +961,8 @@ export interface DataTableRow {
 
 export type DataTableRowId = any;
 
-export interface DataTableCell {
-  key: DataTableKey;
+export interface DataTableCell<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   value: DataTableValue;
   display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
 }
@@ -975,9 +977,9 @@ export interface DataTableCell {
 | expandedRowIds      | No       | <code>let</code> | Yes      | <code>ReadonlyArray<DataTableRowId></code>                          | <code>[]</code>        | Specify the row ids to be expanded                                                                                  |
 | expandable          | No       | <code>let</code> | Yes      | <code>boolean</code>                                                | <code>false</code>     | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true`             |
 | sortDirection       | No       | <code>let</code> | Yes      | <code>"none" &#124; "ascending" &#124; "descending"</code>          | <code>"none"</code>    | Specify the sort direction                                                                                          |
-| sortKey             | No       | <code>let</code> | Yes      | <code>DataTableKey</code>                                           | <code>null</code>      | Specify the header key to sort by                                                                                   |
-| headers             | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableHeader></code>                         | <code>[]</code>        | Specify the data table headers                                                                                      |
-| rows                | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableRow></code>                            | <code>[]</code>        | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids               |
+| sortKey             | No       | <code>let</code> | Yes      | <code>DataTableKey<Row></code>                                      | <code>null</code>      | Specify the header key to sort by                                                                                   |
+| headers             | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableHeader<Row>></code>                    | <code>[]</code>        | Specify the data table headers                                                                                      |
+| rows                | No       | <code>let</code> | No       | <code>ReadonlyArray<Row></code>                                     | <code>[]</code>        | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids               |
 | size                | No       | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table                                                                                      |
 | title               | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>        | Specify the title of the data table                                                                                 |
 | description         | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>        | Specify the description of the data table                                                                           |
@@ -995,29 +997,29 @@ export interface DataTableCell {
 
 ### Slots
 
-| Slot name    | Default | Props                                                                                          | Fallback                                                                 |
-| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
-| --           | Yes     | --                                                                                             | --                                                                       |
-| cell         | No      | <code>{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> |
-| cell-header  | No      | <code>{ header: DataTableNonEmptyHeader; } </code>                                             | <code>{header.value}</code>                                              |
-| description  | No      | --                                                                                             | <code>{description}</code>                                               |
-| expanded-row | No      | <code>{ row: DataTableRow; } </code>                                                           | --                                                                       |
-| title        | No      | --                                                                                             | <code>{title}</code>                                                     |
+| Slot name    | Default | Props                                                                                      | Fallback                                                                 |
+| :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
+| --           | Yes     | --                                                                                         | --                                                                       |
+| cell         | No      | <code>{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> |
+| cell-header  | No      | <code>{ header: DataTableNonEmptyHeader; } </code>                                         | <code>{header.value}</code>                                              |
+| description  | No      | --                                                                                         | <code>{description}</code>                                               |
+| expanded-row | No      | <code>{ row: Row; } </code>                                                                | --                                                                       |
+| title        | No      | --                                                                                         | <code>{title}</code>                                                     |
 
 ### Events
 
-| Event name           | Type       | Detail                                                                                                  |
-| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
-| click                | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code>                    |
-| click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                     |
-| click:header         | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
-| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code>                                             |
-| click:row            | dispatched | <code>DataTableRow</code>                                                                               |
-| mouseenter:row       | dispatched | <code>DataTableRow</code>                                                                               |
-| mouseleave:row       | dispatched | <code>DataTableRow</code>                                                                               |
-| click:row--expand    | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code>                                                  |
-| click:row--select    | dispatched | <code>{ selected: boolean; row: DataTableRow; }</code>                                                  |
-| click:cell           | dispatched | <code>DataTableCell</code>                                                                              |
+| Event name           | Type       | Detail                                                                                                       |
+| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
+| click                | dispatched | <code>{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }</code>                        |
+| click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                          |
+| click:header         | dispatched | <code>{ header: DataTableHeader<Row>; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
+| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code>                                                  |
+| click:row            | dispatched | <code>Row</code>                                                                                             |
+| mouseenter:row       | dispatched | <code>Row</code>                                                                                             |
+| mouseleave:row       | dispatched | <code>Row</code>                                                                                             |
+| click:row--expand    | dispatched | <code>{ expanded: boolean; row: Row; }</code>                                                                |
+| click:row--select    | dispatched | <code>{ selected: boolean; row: Row; }</code>                                                                |
+| click:cell           | dispatched | <code>DataTableCell<Row></code>                                                                              |
 
 ## `DataTableSkeleton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 0f8d88fd..0ea1b3e9 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -2381,7 +2381,7 @@
           "name": "headers",
           "kind": "let",
           "description": "Specify the data table headers",
-          "type": "ReadonlyArray<DataTableHeader>",
+          "type": "ReadonlyArray<DataTableHeader<Row>>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2393,7 +2393,7 @@
           "name": "rows",
           "kind": "let",
           "description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids",
-          "type": "ReadonlyArray<DataTableRow>",
+          "type": "ReadonlyArray<Row>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2464,7 +2464,7 @@
           "name": "sortKey",
           "kind": "let",
           "description": "Specify the header key to sort by",
-          "type": "DataTableKey",
+          "type": "DataTableKey<Row>",
           "value": "null",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2648,7 +2648,7 @@
           "name": "cell",
           "default": false,
           "fallback": "{cell.display ? cell.display(cell.value, row) : cell.value}",
-          "slot_props": "{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }"
+          "slot_props": "{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }"
         },
         {
           "name": "cell-header",
@@ -2665,7 +2665,7 @@
         {
           "name": "expanded-row",
           "default": false,
-          "slot_props": "{ row: DataTableRow; }"
+          "slot_props": "{ row: Row; }"
         },
         {
           "name": "title",
@@ -2678,7 +2678,7 @@
         {
           "type": "dispatched",
           "name": "click",
-          "detail": "{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }"
+          "detail": "{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }"
         },
         {
           "type": "dispatched",
@@ -2688,45 +2688,37 @@
         {
           "type": "dispatched",
           "name": "click:header",
-          "detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
+          "detail": "{ header: DataTableHeader<Row>; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
         },
         {
           "type": "dispatched",
           "name": "click:header--select",
           "detail": "{ indeterminate: boolean; selected: boolean; }"
         },
-        { "type": "dispatched", "name": "click:row", "detail": "DataTableRow" },
-        {
-          "type": "dispatched",
-          "name": "mouseenter:row",
-          "detail": "DataTableRow"
-        },
-        {
-          "type": "dispatched",
-          "name": "mouseleave:row",
-          "detail": "DataTableRow"
-        },
+        { "type": "dispatched", "name": "click:row", "detail": "Row" },
+        { "type": "dispatched", "name": "mouseenter:row", "detail": "Row" },
+        { "type": "dispatched", "name": "mouseleave:row", "detail": "Row" },
         {
           "type": "dispatched",
           "name": "click:row--expand",
-          "detail": "{ expanded: boolean; row: DataTableRow; }"
+          "detail": "{ expanded: boolean; row: Row; }"
         },
         {
           "type": "dispatched",
           "name": "click:row--select",
-          "detail": "{ selected: boolean; row: DataTableRow; }"
+          "detail": "{ selected: boolean; row: Row; }"
         },
         {
           "type": "dispatched",
           "name": "click:cell",
-          "detail": "DataTableCell"
+          "detail": "DataTableCell<Row>"
         }
       ],
       "typedefs": [
         {
-          "type": "string",
-          "name": "DataTableKey",
-          "ts": "type DataTableKey = string"
+          "type": "Exclude<keyof Row, \"id\">",
+          "name": "DataTableKey<Row=DataTableRow>",
+          "ts": "type DataTableKey<Row=DataTableRow> = Exclude<keyof Row, \"id\">"
         },
         {
           "type": "any",
@@ -2734,19 +2726,19 @@
           "ts": "type DataTableValue = any"
         },
         {
-          "type": "{ key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
-          "name": "DataTableEmptyHeader",
-          "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
+          "type": "{ key: DataTableKey<Row>; empty: boolean; display?: (item: DataTableValue, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
+          "name": "DataTableEmptyHeader<Row=DataTableRow>",
+          "ts": "interface DataTableEmptyHeader<Row=DataTableRow> { key: DataTableKey<Row>; empty: boolean; display?: (item: DataTableValue, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
         },
         {
-          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
-          "name": "DataTableNonEmptyHeader",
-          "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
+          "type": "{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
+          "name": "DataTableNonEmptyHeader<Row=DataTableRow>",
+          "ts": "interface DataTableNonEmptyHeader<Row=DataTableRow> { key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
         },
         {
-          "type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
-          "name": "DataTableHeader",
-          "ts": "type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader"
+          "type": "DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>",
+          "name": "DataTableHeader<Row=DataTableRow>",
+          "ts": "type DataTableHeader<Row=DataTableRow> = DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>"
         },
         {
           "type": "{ id: any; [key: string]: DataTableValue; }",
@@ -2759,12 +2751,12 @@
           "ts": "type DataTableRowId = any"
         },
         {
-          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }",
-          "name": "DataTableCell",
-          "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }"
+          "type": "{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }",
+          "name": "DataTableCell<Row=DataTableRow>",
+          "ts": "interface DataTableCell<Row=DataTableRow> { key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }"
         }
       ],
-      "generics": null,
+      "generics": ["Row", "Row extends DataTableRow = DataTableRow"],
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
index dc30a09d..f8109317 100644
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@@ -1,33 +1,31 @@
 import type { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
-export type DataTableKey = string;
+export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
 
 export type DataTableValue = any;
 
-export interface DataTableEmptyHeader<Row extends DataTableRow = DataTableRow> {
-  key: keyof Row;
+export interface DataTableEmptyHeader<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   empty: boolean;
-  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
+  display?: (item: DataTableValue, row: Row) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
   columnMenu?: boolean;
   width?: string;
   minWidth?: string;
 }
 
-export interface DataTableNonEmptyHeader<
-  Row extends DataTableRow = DataTableRow
-> {
-  key: keyof Row;
+export interface DataTableNonEmptyHeader<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   value: DataTableValue;
-  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
+  display?: (item: DataTableValue, row: Row) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
   columnMenu?: boolean;
   width?: string;
   minWidth?: string;
 }
 
-export type DataTableHeader<Row extends DataTableRow = DataTableRow> =
+export type DataTableHeader<Row = DataTableRow> =
   | DataTableNonEmptyHeader<Row>
   | DataTableEmptyHeader<Row>;
 
@@ -38,15 +36,15 @@ export interface DataTableRow {
 
 export type DataTableRowId = any;
 
-export interface DataTableCell<Row extends DataTableRow = DataTableRow> {
-  key: keyof Row;
+export interface DataTableCell<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   value: DataTableValue;
   display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
 }
 
 type $RestProps = SvelteHTMLElements["div"];
 
-type $Props = {
+type $Props<Row> = {
   /**
    * Specify the data table headers
    * @default []
@@ -94,7 +92,7 @@ type $Props = {
    * Specify the header key to sort by
    * @default null
    */
-  sortKey?: DataTableKey;
+  sortKey?: DataTableKey<Row>;
 
   /**
    * Specify the sort direction
@@ -185,7 +183,8 @@ type $Props = {
   [key: `data-${string}`]: any;
 };
 
-export type DataTableProps = Omit<$RestProps, keyof $Props> & $Props;
+export type DataTableProps<Row> = Omit<$RestProps, keyof $Props<Row>> &
+  $Props<Row>;
 
 export default class DataTable<
   Row extends DataTableRow = DataTableRow
@@ -209,21 +208,15 @@ export default class DataTable<
     ["click:row"]: CustomEvent<Row>;
     ["mouseenter:row"]: CustomEvent<Row>;
     ["mouseleave:row"]: CustomEvent<Row>;
-    ["click:row--expand"]: CustomEvent<{
-      expanded: boolean;
-      row: Row;
-    }>;
-    ["click:row--select"]: CustomEvent<{
-      selected: boolean;
-      row: Row;
-    }>;
-    ["click:cell"]: CustomEvent<DataTableCell>;
+    ["click:row--expand"]: CustomEvent<{ expanded: boolean; row: Row }>;
+    ["click:row--select"]: CustomEvent<{ selected: boolean; row: Row }>;
+    ["click:cell"]: CustomEvent<DataTableCell<Row>>;
   },
   {
     default: {};
     cell: {
-      row: DataTableRow;
-      cell: DataTableCell;
+      row: Row;
+      cell: DataTableCell<Row>;
       rowIndex: number;
       cellIndex: number;
     };