From a5f5550aa01ce43d7a56d139c69ce77e8cb49c61 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Wed, 9 Feb 2022 19:48:20 -0800
Subject: [PATCH] fix(data-table): `headers` should be reactive (#1075)

If `headers` is dynamically updated, clicking a sortable table header will sort the incorrect column. Instead of randomly generating an id and keeping track of it through context, we can simply use the required key in `headers` as the id.
---
 src/DataTable/DataTable.svelte   | 5 +----
 src/DataTable/TableHeader.svelte | 4 +---
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index a10a4dc3..ffbf0e96 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -136,7 +136,7 @@
   const headerItems = writable([]);
   const thKeys = derived(headerItems, () =>
     headers
-      .map(({ key }, i) => ({ key, id: $headerItems[i] }))
+      .map(({ key }, i) => ({ key, id: key }))
       .reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
   );
   const resolvePath = (object, path) =>
@@ -154,9 +154,6 @@
       selectedRowIds = [];
       if (refSelectAll) refSelectAll.checked = false;
     },
-    add: (id) => {
-      headerItems.update((_) => [..._, id]);
-    },
   });
 
   let expanded = false;
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index d825f0bc..8eab24d9 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -18,9 +18,7 @@
   import ArrowUp20 from "../icons/ArrowUp20.svelte";
   import ArrowsVertical20 from "../icons/ArrowsVertical20.svelte";
 
-  const { sortHeader, tableSortable, add } = getContext("DataTable");
-
-  add(id);
+  const { sortHeader, tableSortable } = getContext("DataTable");
 
   $: active = $sortHeader.id === id;
   // TODO: translate with id