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

@@ -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;

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");
+  const { sortHeader, tableSortable } = getContext("DataTable");
-
-  add(id);
 
   $: active = $sortHeader.id === id;
   // TODO: translate with id