From c241961d0ab0d6b8c3bf0453c1a21d84027ed62f Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 12 Apr 2023 19:46:33 +0200
Subject: [PATCH] Extracted table header

---
 src/components/runners/RunnersOverview.svelte | 57 +------------------
 src/components/shared/TableHeader.svelte      | 57 +++++++++++++++++++
 2 files changed, 59 insertions(+), 55 deletions(-)
 create mode 100644 src/components/shared/TableHeader.svelte

diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte
index c89191ba..f2edcb60 100644
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -26,6 +26,7 @@
   import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
   import Toastify from "toastify-js";
   import TableBottom from "../shared/TableBottom.svelte";
+  import TableHeader from "../shared/TableHeader.svelte";
 
   $: selectedRunners =
     $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
@@ -213,61 +214,7 @@
                 />
               </th>
               {#each headerGroup.headers as header}
-                <th class="cursor-pointer min-w-[5rem]">
-                  {#if !header.isPlaceholder}
-                    <button
-                      class="w-full"
-                      tabindex="0"
-                      on:click={header.column.getToggleSortingHandler()}
-                    >
-                      <svelte:component
-                        this={flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                      />
-                      {#if header.column
-                        .getIsSorted()
-                        .toString() == "asc" && header.column.getCanSort()}
-                        🔼
-                      {:else if header.column
-                        .getIsSorted()
-                        .toString() == "desc" && header.column.getCanSort()}
-                        🔽
-                      {/if}
-                    </button>
-                  {/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 w-full 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>
+                <TableHeader {header}></TableHeader>
               {/each}
             </tr>
           {/each}
diff --git a/src/components/shared/TableHeader.svelte b/src/components/shared/TableHeader.svelte
new file mode 100644
index 00000000..0ab6d9f3
--- /dev/null
+++ b/src/components/shared/TableHeader.svelte
@@ -0,0 +1,57 @@
+<script>
+  import { flexRender } from "@tanstack/svelte-table";
+  export let header;
+</script>
+
+<th class="cursor-pointer min-w-[5rem]">
+  {#if !header.isPlaceholder}
+    <button
+      class="w-full"
+      tabindex="0"
+      on:click={header.column.getToggleSortingHandler()}
+    >
+      <svelte:component
+        this={flexRender(header.column.columnDef.header, header.getContext())}
+      />
+      {#if header.column
+        .getIsSorted()
+        .toString() == "asc" && header.column.getCanSort()}
+        🔼
+      {:else if header.column
+        .getIsSorted()
+        .toString() == "desc" && header.column.getCanSort()}
+        🔽
+      {/if}
+    </button>
+  {/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 w-full 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>