implemented sorting in ID table

web/src/lib/IDTable.svelte

@@ -12,6 +12,30 @@
       : [],
   );
 
+  let sortKey: keyof (typeof rows)[0] = $state("last");
+  let sortDirection: "asc" | "desc" = $state("asc");
+
+  let rowsSorted = $derived(
+    [...rows].sort((a, b) => {
+      let cmp = String(a[sortKey]).localeCompare(String(b[sortKey]));
+      return sortDirection === "asc" ? cmp : -cmp;
+    }),
+  );
+
+  function handleSortClick(key: keyof (typeof rows)[0]) {
+    if (sortKey === key) {
+      sortDirection = sortDirection === "asc" ? "desc" : "asc";
+    } else {
+      sortKey = key;
+      sortDirection = "asc";
+    }
+  }
+
+  function indicator(key: keyof (typeof rows)[0]) {
+    if (sortKey !== key) return "";
+    return sortDirection === "asc" ? "▲" : "▼";
+  }
+
   onMount(async () => {
     let res = await fetch("/api/mapping");
 
@@ -20,21 +44,45 @@
 </script>
 
 {#if data == null}
-  Loading
+  Loading...
 {:else}
-  <div class="bg-indigo-500 p-2 rounded-2xl overflow-x-auto">
+  <div class="bg-indigo-500 py-2 rounded-2xl overflow-x-auto">
-    <table>
+    <table class="px-10">
       <thead>
         <tr>
-          <th class="text-left pr-5">ID</th>
+          <th
-          <th class="text-left pr-5">Nachname</th>
+            class="text-left pr-5 pl-2 cursor-pointer select-none"
-          <th class="text-left pr-5">Vorname</th>
+            onclick={() => {
+              handleSortClick("id");
+            }}
+          >
+            ID
+            <span class="indicator">{indicator("id")}</span>
+          </th>
+          <th
+            class="text-left pr-5 cursor-pointer select-none"
+            onclick={() => {
+              handleSortClick("last");
+            }}
+          >
+            Nachname
+            <span class="indicator">{indicator("last")}</span>
+          </th>
+          <th
+            class="text-left pr-5 cursor-pointer select-none"
+            onclick={() => {
+              handleSortClick("first");
+            }}
+            >Vorname
+
+            <span class="indicator">{indicator("first")}</span>
+          </th>
         </tr>
       </thead>
-      <tbody class="">
+      <tbody>
-        {#each rows as row}
+        {#each rowsSorted as row}
           <tr class="even:bg-indigo-600">
-            <td class="whitespace-nowrap pr-5">{row.id}</td>
+            <td class="whitespace-nowrap pr-5 pl-2 py-1">{row.id}</td>
             <td class="whitespace-nowrap pr-5">{row.last}</td>
             <td class="whitespace-nowrap pr-5">{row.first}</td>
           </tr>
@@ -43,3 +91,11 @@
     </table>
   </div>
 {/if}
+
+<style lang="css" scoped>
+  @reference "../app.css";
+
+  .indicator {
+    @apply ml-1 w-4 inline-block;
+  }
+</style>