From a9cdac4f74a80afe3d0ce677ed5256201b75b29b Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 12 Apr 2023 15:40:43 +0200
Subject: [PATCH] Added filter

---
 src/components/runners/RunnersOverview.svelte | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte
index ab1e8c15..d0d00e8c 100644
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -5,6 +5,7 @@
     createSvelteTable,
     flexRender,
     getCoreRowModel,
+    getFilteredRowModel,
   } from "@tanstack/svelte-table";
 
   const columns = [
@@ -95,6 +96,7 @@
     data: [],
     columns: columns,
     getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
   });
   const table = createSvelteTable(options);
   onMount(() => {
@@ -154,6 +156,36 @@
                       header.getContext()
                     )}
                   />
+                  {#if header.column.getCanFilter()}
+                    <div class="relative max-w-xs">
+                      <input
+                        title="name-search"
+                        value={header.column.getFilterValue() || ""}
+                        on:keydown={(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}
               </th>
             {/each}