From 28f2d8190fd61296d8a8ca89f93ccc27dae96a92 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 26 Nov 2020 10:01:11 -0800
Subject: [PATCH] fix(data-table): require "id" in DataTableRow interface

---
 COMPONENT_INDEX.md                      | 5 ++++-
 docs/src/COMPONENT_API.json             | 4 ++--
 docs/src/pages/components/DataTable.svx | 2 ++
 src/DataTable/DataTable.svelte          | 2 +-
 types/DataTable/DataTable.d.ts          | 5 ++++-
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 88c73be4..8ff71575 100644
--- a/COMPONENT_INDEX.md
+++ b/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;
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 46c52c63..7a1cdbea 100644
--- a/docs/src/COMPONENT_API.json
+++ b/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",
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index d978c060..2dc2889f 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/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" },
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 5efe3212..a932d26f 100644
--- a/src/DataTable/DataTable.svelte
+++ b/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
diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts
index 530ff61c..45282b4d 100644
--- a/types/DataTable/DataTable.d.ts
+++ b/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;