Added sort

src/components/runners/RunnersOverview.svelte

@@ -8,6 +8,7 @@
     getCoreRowModel,
     getFilteredRowModel,
     getPaginationRowModel,
+    getSortedRowModel,
   } from "@tanstack/svelte-table";
 
   const columns = [
@@ -19,22 +20,22 @@
     {
       accessorKey: "firstname",
       header: () => "firstname",
-      filterFn: `includesString`
+      filterFn: `includesString`,
     },
     {
       accessorKey: "lastname",
       header: () => "lastname",
-      filterFn: `includesString`
+      filterFn: `includesString`,
     },
     {
       accessorKey: "group.name",
       header: () => "group",
-      filterFn: `includesString`
+      filterFn: `includesString`,
     },
     {
       accessorKey: "distance",
       header: () => "distance",
-      filterFn: `equals`
+      filterFn: `equals`,
     },
   ];
 
@@ -78,6 +79,7 @@
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
   });
   const table = createSvelteTable(options);
   onMount(() => {
@@ -127,7 +129,7 @@
         {#each $table.getHeaderGroups() as headerGroup}
           <tr>
             {#each headerGroup.headers as header}
-              <th>
+              <th on:click={header.column.getToggleSortingHandler()}>
                 {#if !header.isPlaceholder}
                   <svelte:component
                     this={flexRender(
@@ -135,37 +137,42 @@
                       header.getContext()
                     )}
                   />
-                  {#if header.column.getCanFilter()}
+                  {#if header.column.getIsSorted().toString() == "asc"}
-                    <div class="relative max-w-xs">
+                    🔼
-                      <input
+                  {:else if header.column.getIsSorted().toString() == "desc"}
-                        title="name-search"
+                    🔽
-                        value={header.column.getFilterValue() || ""}
-                        on:keyup={(e) => {
-                          header.column.setFilterValue(e.target.value);
-                        }}
-                        type="text"
-                        class="block rounded-md border-gray-200 py-2 pl-8 text-xs focus:border-blue-500 focus:ring-blue-500"
-                        placeholder=""
-                      />
-                      <div
-                        class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
-                      >
-                        <svg
-                          class="h-3.5 w-3.5 text-gray-400"
-                          xmlns="http://www.w3.org/2000/svg"
-                          width={16}
-                          height={16}
-                          fill="currentColor"
-                          viewBox="0 0 16 16"
-                        >
-                          <path
-                            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
                   {/if}
                 {/if}
+                {#if header.column.getCanFilter()}
+                  <div class="relative max-w-xs">
+                    <input
+                      title="name-search"
+                      value={header.column.getFilterValue() || ""}
+                      on:keyup={(e) => {
+                        header.column.setFilterValue(e.target.value);
+                      }}
+                      type="text"
+                      class="block rounded-md border-gray-200 py-2 pl-8 text-xs focus:border-blue-500 focus:ring-blue-500"
+                      placeholder=""
+                    />
+                    <div
+                      class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
+                    >
+                      <svg
+                        class="h-3.5 w-3.5 text-gray-400"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width={16}
+                        height={16}
+                        fill="currentColor"
+                        viewBox="0 0 16 16"
+                      >
+                        <path
+                          d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                {/if}
               </th>
             {/each}
           </tr>