Fixes to the sort column

src/components/Table/SortArrow.svelte

@@ -5,6 +5,12 @@
    */
   type SortDirection = 'ascending' | 'descending';
   export let sortDirection: SortDirection = 'ascending';
+
+  /**
+   * Whether or not this arrow is currently sorting. It is false by default.
+   * @type {boolean}
+   */
+  export let active: boolean = false;
 </script>
 
 <svg
@@ -13,19 +19,23 @@
   viewBox="0 0 15 21"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
+  class="avoid-clicks"
 >
   <path
-    class:active="{sortDirection === 'ascending'}"
+    class:active="{sortDirection === 'descending' && active}"
     d="M6.76474 20.2244L0.236082 13.4649C-0.0786943 13.139 -0.0786943 12.6104 0.236082 12.2845C0.550521 11.959 1.19794 11.96 1.51305 12.2845L7.33483 12.2845L13 12.2845C13.43 11.8545 14.1195 11.9593 14.4339 12.2849C14.7487 12.6107 14.7487 13.1394 14.4339 13.4653L7.90492 20.2244C7.59015 20.5503 7.07952 20.5503 6.76474 20.2244Z"
   ></path>
   <path
-    class:active="{sortDirection === 'descending'}"
+    class:active="{sortDirection === 'ascending' && active}"
     d="M7.90518 0.244414L14.4338 7.00385C14.7486 7.32973 14.7486 7.85838 14.4338 8.18427C14.1194 8.50981 13.472 8.50876 13.1569 8.18427L7.33509 8.18427L1.66992 8.18427C1.23992 8.61427 0.550443 8.50946 0.236003 8.18392C-0.0787725 7.85803 -0.0787725 7.32938 0.236003 7.0035L6.765 0.244414C7.07978 -0.0814713 7.5904 -0.0814713 7.90518 0.244414Z"
   ></path>
 </svg>
 
 <style lang="scss">
   @import '../../scss/colours/thematic/tr';
+  .avoid-clicks {
+    pointer-events: none;
+  }
   path {
     fill: var(--theme-colour-brand-rules, $tr-muted-grey);
     &.active {

src/components/Table/Table.svelte

@@ -101,6 +101,14 @@
    */
   export let sortField: string = Object.keys(data[0])[0];
 
+  /**
+   * The columns that are allowed to sort. It's all of them by default.
+   * @type {string}
+   */
+  export let sortableFields: string[] = Object.keys(data[0]).filter(
+    (f) => f !== 'searchStr'
+  );
+
   /**
    * The direction of the sort. By default it's ascending.
    * @type {SortDirection}
@@ -265,7 +273,7 @@
               <th
                 scope="col"
                 class="table--thead--th"
-                class:sortable
+                class:sortable="{sortable && sortableFields.includes(field)}"
                 class:sort-ascending="{sortable &&
                   sortField === field &&
                   sortDirection === 'ascending'}"
@@ -277,12 +285,12 @@
                 style="text-align: {fieldAlignments[field]}"
               >
                 {field}
-                {#if sortable}
+                {#if sortable && sortableFields.includes(field)}
-                  <div
+                  <div class="table--thead--sortarrow avoid-clicks">
-                    class="table--thead--sortarrow"
+                    <SortArrow
-                    class:invisible="{sortField !== field}"
+                      bind:sortDirection
-                  >
+                      active="{sortField === field}"
-                    <SortArrow bind:sortDirection />
+                    />
                   </div>
                 {/if}
               </th>
@@ -446,6 +454,10 @@
     }
   }
 
+  .avoid-clicks {
+    pointer-events: none;
+  }
+
   section.input {
     margin: 0.5rem 0 0 0;
     padding: 0;

src/components/Table/stories/docs/sort.md

@@ -1,5 +1,7 @@
 Allow users to sort the table by setting the `sortable` input. Specify the starting order by setting `sortField` to a column name and `sortDirection` to `ascending` or `descending`.
 
+By default, all fields are sortable. If you'd like to limit the columns where sorting is allowed, provide a list to the `sortableFields` option.
+
 ```svelte
 <Table
   data="{yourData}"