table sorting for datatable

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,

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>

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>