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

Added sort

Browse Source
This commit is contained in:
Nicolai Ort 2023-04-12 16:02:00 +02:00
parent c5d7ec25b5
commit 842248e4c4
Signed by: niggl
GPG Key ID: 13AFA55AF62F269F
1 changed files with 41 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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()}
<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 header.column.getIsSorted().toString() == "asc"}
🔼
{:else if header.column.getIsSorted().toString() == "desc"}
🔽
{/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>