Moved sort onclick to header only

src/components/runners/RunnersOverview.svelte

@@ -35,7 +35,7 @@
     {
       accessorKey: "distance",
       header: () => "distance",
-      filterFn: `equals`,
+      canFilter: false,
     },
   ];
 
@@ -129,19 +129,21 @@
         {#each $table.getHeaderGroups() as headerGroup}
           <tr>
             {#each headerGroup.headers as header}
-              <th on:click={header.column.getToggleSortingHandler()}>
+              <th>
                 {#if !header.isPlaceholder}
-                  <svelte:component
+                  <div on:click={header.column.getToggleSortingHandler()}>
-                    this={flexRender(
+                    <svelte:component
-                      header.column.columnDef.header,
+                      this={flexRender(
-                      header.getContext()
+                        header.column.columnDef.header,
-                    )}
+                        header.getContext()
-                  />
+                      )}
-                  {#if header.column.getIsSorted().toString() == "asc"}
+                    />
-                    🔼
+                    {#if header.column.getIsSorted().toString() == "asc"}
-                  {:else if header.column.getIsSorted().toString() == "desc"}
+                      🔼
-                    🔽
+                    {:else if header.column.getIsSorted().toString() == "desc"}
-                  {/if}
+                      🔽
+                    {/if}
+                  </div>
                 {/if}
                 {#if header.column.getCanFilter()}
                   <div class="relative max-w-xs">