From 91348df434cec2a9e1b732f7a179d0d9b171e854 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 5 Jun 2022 12:27:24 -0700
Subject: [PATCH] refactor(data-table): pass down sortable props instead of
 using context

---
 src/DataTable/DataTable.svelte   |  5 +++--
 src/DataTable/TableHeader.svelte | 23 ++++++++++++++---------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index bd6b79c7..66dc3840 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -155,7 +155,6 @@
   };
 
   setContext("DataTable", {
-    sortHeader,
     tableSortable,
     batchSelectedIds,
     tableRows,
@@ -344,7 +343,9 @@
             <TableHeader
               id="{header.key}"
               style="{formatHeaderWidth(header)}"
-              disableSorting="{header.sort === false}"
+              sortable="{sortable && header.sort !== false}"
+              sortDirection="{$sortHeader.sortDirection}"
+              active="{$sortHeader.id === header.key}"
               on:click="{() => {
                 dispatch('click', { header });
 
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index 836a3171..a9c4d9c1 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -1,6 +1,15 @@
 <script>
-  /** Set to `true` to disable sorting on this specific cell */
-  export let disableSorting = false;
+  /** Set to `true` for the sortable variant */
+  export let sortable = false;
+
+  /**
+   * Specify the sort direction
+   * @type {"none" | "ascending" | "descending"}
+   */
+  export let sortDirection = "none";
+
+  /** Set to `true` if the column sorting */
+  export let active = false;
 
   /** Specify the `scope` attribute */
   export let scope = "col";
@@ -14,21 +23,17 @@
   /** Set an id for the top-level element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  import { getContext } from "svelte";
   import ArrowUp from "../icons/ArrowUp.svelte";
   import ArrowsVertical from "../icons/ArrowsVertical.svelte";
 
-  const { sortHeader, tableSortable } = getContext("DataTable");
-
-  $: active = $sortHeader.id === id;
   // TODO: translate with id
   $: ariaLabel = translateWithId();
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
-{#if $tableSortable && !disableSorting}
+{#if sortable}
   <th
-    aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
+    aria-sort="{active ? sortDirection : 'none'}"
     scope="{scope}"
     data-header="{id}"
     {...$$restProps}
@@ -40,7 +45,7 @@
       class:bx--table-sort="{true}"
       class:bx--table-sort--active="{active}"
       class:bx--table-sort--ascending="{active &&
-        $sortHeader.sortDirection === 'descending'}"
+        sortDirection === 'descending'}"
       on:click
     >
       <div class:bx--table-header-label="{true}">