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

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

@ -8,6 +8,7 @@
getCoreRowModel, getCoreRowModel,
getFilteredRowModel, getFilteredRowModel,
getPaginationRowModel, getPaginationRowModel,
getSortedRowModel,
} from "@tanstack/svelte-table"; } from "@tanstack/svelte-table";
const columns = [ const columns = [
@ -19,22 +20,22 @@
{ {
accessorKey: "firstname", accessorKey: "firstname",
header: () => "firstname", header: () => "firstname",
filterFn: `includesString` filterFn: `includesString`,
}, },
{ {
accessorKey: "lastname", accessorKey: "lastname",
header: () => "lastname", header: () => "lastname",
filterFn: `includesString` filterFn: `includesString`,
}, },
{ {
accessorKey: "group.name", accessorKey: "group.name",
header: () => "group", header: () => "group",
filterFn: `includesString` filterFn: `includesString`,
}, },
{ {
accessorKey: "distance", accessorKey: "distance",
header: () => "distance", header: () => "distance",
filterFn: `equals` filterFn: `equals`,
}, },
]; ];
@ -78,6 +79,7 @@
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(), getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
}); });
const table = createSvelteTable(options); const table = createSvelteTable(options);
onMount(() => { onMount(() => {
@ -127,7 +129,7 @@
{#each $table.getHeaderGroups() as headerGroup} {#each $table.getHeaderGroups() as headerGroup}
<tr> <tr>
{#each headerGroup.headers as header} {#each headerGroup.headers as header}
<th> <th on:click={header.column.getToggleSortingHandler()}>
{#if !header.isPlaceholder} {#if !header.isPlaceholder}
<svelte:component <svelte:component
this={flexRender( this={flexRender(
@ -135,6 +137,12 @@
header.getContext() header.getContext()
)} )}
/> />
{#if header.column.getIsSorted().toString() == "asc"}
🔼
{:else if header.column.getIsSorted().toString() == "desc"}
🔽
{/if}
{/if}
{#if header.column.getCanFilter()} {#if header.column.getCanFilter()}
<div class="relative max-w-xs"> <div class="relative max-w-xs">
<input <input
@ -165,7 +173,6 @@
</div> </div>
</div> </div>
{/if} {/if}
{/if}
</th> </th>
{/each} {/each}
</tr> </tr>