From d53afb175b0846dbf1a466e365a3dac4c41c3198 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 29 Jul 2020 13:11:29 +0100
Subject: [PATCH] table sorting for datatable

---
 .../standard-components/src/DataTable.svelte  | 20 +++++++++++++++----
 .../src/icons/ArrowDown.svelte                |  1 +
 .../src/icons/ArrowUp.svelte                  | 10 ++++++++++
 3 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 packages/standard-components/src/icons/ArrowDown.svelte
 create mode 100644 packages/standard-components/src/icons/ArrowUp.svelte

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index dc301598e..fb02deb1d 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -1,6 +1,8 @@
 <script>
   import { onMount } from "svelte"
   import { cssVars, createClasses } from "./cssVars"
+  import ArrowUp from "./icons/ArrowUp.svelte"
+  import ArrowDown from "./icons/ArrowDown.svelte"
   import fsort from "fast-sort"
 
   export let _bb
@@ -80,10 +82,14 @@
     <tr>
       {#each headers as header}
         <th on:click={() => sortColumn(header)}>
-          {header}
-          {#if sort.column === header}
-            {#if sort.direction === 'asc'}v{:else}^{/if}
-          {/if}
+          <span>
+            {header}
+            {#if sort.column === header}
+              <svelte:component
+                style="height: 1em;"
+                this={sort.direction === 'asc' ? ArrowUp : ArrowDown} />
+            {/if}
+          </span>
         </th>
       {/each}
     </tr>
@@ -119,6 +125,12 @@
     color: var(--color);
     font-weight: bold;
     text-transform: capitalize;
+    cursor: pointer;
+  }
+
+  th span {
+    display: flex;
+    align-items: center;
   }
 
   td,
diff --git a/packages/standard-components/src/icons/ArrowDown.svelte b/packages/standard-components/src/icons/ArrowDown.svelte
new file mode 100644
index 000000000..e75c43cb3
--- /dev/null
+++ b/packages/standard-components/src/icons/ArrowDown.svelte
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z"/></svg>
\ No newline at end of file
diff --git a/packages/standard-components/src/icons/ArrowUp.svelte b/packages/standard-components/src/icons/ArrowUp.svelte
new file mode 100644
index 000000000..897c3612d
--- /dev/null
+++ b/packages/standard-components/src/icons/ArrowUp.svelte
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="18"
+  height="18">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414
+    1.414L13 7.828z" />
+</svg>