lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

Extracted table header

Browse Source
This commit is contained in:
Nicolai Ort 2023-04-12 19:46:33 +02:00
parent 8f50555a06
commit c241961d0a
Signed by: niggl
GPG Key ID: 13AFA55AF62F269F
2 changed files with 59 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/runners/RunnersOverview.svelte
View File

@ -26,6 +26,7 @@
import DeleteRunnerModal from "./DeleteRunnerModal.svelte"; import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import TableBottom from "../shared/TableBottom.svelte"; import TableBottom from "../shared/TableBottom.svelte";
import TableHeader from "../shared/TableHeader.svelte";
$: selectedRunners = $: selectedRunners =
$table?.getSelectedRowModel().rows.map((row) => row.original) || []; $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
@ -213,61 +214,7 @@
/> />
</th> </th>
{#each headerGroup.headers as header} {#each headerGroup.headers as header}
<th class="cursor-pointer min-w-[5rem]"> <TableHeader {header}></TableHeader>
{#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>
{/each} {/each}
</tr> </tr>
{/each} {/each}

57
src/components/shared/TableHeader.svelte Normal file
View File

@ -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>