Compare commits
2 Commits
b35375c929
...
c241961d0a
| Author | SHA1 | Date | |
|---|---|---|---|
c241961d0a
|
|||
|
8f50555a06
|
@ -25,6 +25,8 @@
|
|||||||
import { groupFilter } from "../shared/tablefilters";
|
import { groupFilter } from "../shared/tablefilters";
|
||||||
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 TableHeader from "../shared/TableHeader.svelte";
|
||||||
|
|
||||||
$: selectedRunners =
|
$: selectedRunners =
|
||||||
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
||||||
@ -212,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}
|
||||||
@ -297,75 +245,10 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-2" />
|
<div class="h-2" />
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
class="border rounded p-1"
|
|
||||||
on:click={() => $table.setPageIndex(0)}
|
|
||||||
disabled={!$table.getCanPreviousPage()}
|
|
||||||
>
|
|
||||||
{"<<"}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="border rounded p-1"
|
|
||||||
on:click={() => $table.previousPage()}
|
|
||||||
disabled={!$table.getCanPreviousPage()}
|
|
||||||
>
|
|
||||||
{"<"}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="border rounded p-1"
|
|
||||||
on:click={() => $table.nextPage()}
|
|
||||||
disabled={!$table.getCanNextPage()}
|
|
||||||
>
|
|
||||||
{">"}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="border rounded p-1"
|
|
||||||
on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
|
|
||||||
disabled={!$table.getCanNextPage()}
|
|
||||||
>
|
|
||||||
{">>"}
|
|
||||||
</button>
|
|
||||||
<span class="flex items-center gap-1">
|
|
||||||
<div>Page</div>
|
|
||||||
<strong>
|
|
||||||
{$table.getState().pagination.pageIndex + 1} of{" "}
|
|
||||||
{$table.getPageCount()}
|
|
||||||
</strong>
|
|
||||||
</span>
|
|
||||||
<span class="flex items-center gap-1">
|
|
||||||
| Go to page:
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
defaultValue={$table.getState().pagination.pageIndex + 1}
|
|
||||||
on:change={(e) => {
|
|
||||||
const page = e.target.value ? Number(e.target.value) - 1 : 0;
|
|
||||||
$table.setPageIndex(page);
|
|
||||||
}}
|
|
||||||
class="border p-1 rounded w-16"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
value={$table.getState().pagination.pageSize}
|
|
||||||
on:input={(e) => {
|
|
||||||
const ps = Number(e.target.value);
|
|
||||||
console.log({ ps });
|
|
||||||
$table.setPageSize(Number(e.target.value));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{#each [25, 50, 100, 250, 500] as pageSize}
|
|
||||||
<option value={pageSize}>{pageSize}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
|
|
||||||
<div>
|
|
||||||
{Object.keys(selected).length} of{" "}
|
|
||||||
{$table.getPreFilteredRowModel().rows.length} Total Rows Selected
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
<TableBottom {table} {selected}></TableBottom>
|
||||||
<style>
|
<style>
|
||||||
thead {
|
thead {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|||||||
71
src/components/shared/TableBottom.svelte
Normal file
71
src/components/shared/TableBottom.svelte
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<script>
|
||||||
|
|
||||||
|
export let table;
|
||||||
|
export let selected;
|
||||||
|
</script>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
class="border rounded p-1"
|
||||||
|
on:click={() => $table.setPageIndex(0)}
|
||||||
|
disabled={!$table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
{"<<"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="border rounded p-1"
|
||||||
|
on:click={() => $table.previousPage()}
|
||||||
|
disabled={!$table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
{"<"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="border rounded p-1"
|
||||||
|
on:click={() => $table.nextPage()}
|
||||||
|
disabled={!$table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
{">"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="border rounded p-1"
|
||||||
|
on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
|
||||||
|
disabled={!$table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
{">>"}
|
||||||
|
</button>
|
||||||
|
<span class="flex items-center gap-1">
|
||||||
|
<div>Page</div>
|
||||||
|
<strong>
|
||||||
|
{$table.getState().pagination.pageIndex + 1} of{" "}
|
||||||
|
{$table.getPageCount()}
|
||||||
|
</strong>
|
||||||
|
</span>
|
||||||
|
<span class="flex items-center gap-1">
|
||||||
|
| Go to page:
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
defaultValue={$table.getState().pagination.pageIndex + 1}
|
||||||
|
on:change={(e) => {
|
||||||
|
const page = e.target.value ? Number(e.target.value) - 1 : 0;
|
||||||
|
$table.setPageIndex(page);
|
||||||
|
}}
|
||||||
|
class="border p-1 rounded w-16"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<select
|
||||||
|
value={$table.getState().pagination.pageSize}
|
||||||
|
on:input={(e) => {
|
||||||
|
const ps = Number(e.target.value);
|
||||||
|
console.log({ ps });
|
||||||
|
$table.setPageSize(Number(e.target.value));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{#each [25, 50, 100, 250, 500] as pageSize}
|
||||||
|
<option value={pageSize}>{pageSize}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
|
||||||
|
<div>
|
||||||
|
{Object.keys(selected).length} of{" "}
|
||||||
|
{$table.getPreFilteredRowModel().rows.length} Total Rows Selected
|
||||||
|
</div>
|
||||||
57
src/components/shared/TableHeader.svelte
Normal file
57
src/components/shared/TableHeader.svelte
Normal 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>
|
||||||
Loading…
x
Reference in New Issue
Block a user