Compare commits
2 Commits
9111ad147c
...
845737ee8e
Author | SHA1 | Date | |
---|---|---|---|
845737ee8e | |||
6993511c67 |
|
@ -11,6 +11,9 @@
|
|||
getSortedRowModel,
|
||||
} from "@tanstack/svelte-table";
|
||||
|
||||
$: selected =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
|
||||
|
||||
const columns = [
|
||||
{
|
||||
accessorKey: "id",
|
||||
|
@ -60,6 +63,7 @@
|
|||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import InputElement from "../shared/InputElement.svelte";
|
||||
$: active_deletes = [];
|
||||
let dataLoaded = false;
|
||||
export let current_runners = [];
|
||||
|
@ -85,6 +89,7 @@
|
|||
pageSize: tablePageCount[0],
|
||||
},
|
||||
},
|
||||
enableRowSelection: true,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
|
@ -137,6 +142,14 @@
|
|||
<thead>
|
||||
{#each $table.getHeaderGroups() as headerGroup}
|
||||
<tr class="select-none">
|
||||
<th class="inset-y-0 left-0 px-4 py-2 text-left bg-stone-100 w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={$table.getIsAllRowsSelected()}
|
||||
indeterminate={$table.getIsSomeRowsSelected()}
|
||||
on:change={() => $table.toggleAllRowsSelected()}
|
||||
/>
|
||||
</th>
|
||||
{#each headerGroup.headers as header}
|
||||
<th class="cursor-pointer">
|
||||
{#if !header.isPlaceholder}
|
||||
|
@ -192,6 +205,13 @@
|
|||
<tbody>
|
||||
{#each $table.getRowModel().rows as row}
|
||||
<tr>
|
||||
<td class="inset-y-0 left-0 px-4 py-2">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={row.getIsSelected()}
|
||||
on:change={() => row.toggleSelected()}
|
||||
/>
|
||||
</td>
|
||||
{#each row.getVisibleCells() as cell}
|
||||
<td>
|
||||
<svelte:component
|
||||
|
@ -269,6 +289,10 @@
|
|||
</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}
|
||||
|
||||
|
|
20
src/components/shared/InputElement.svelte
Normal file
20
src/components/shared/InputElement.svelte
Normal file
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
let className = "";
|
||||
export { className as class };
|
||||
|
||||
export let type;
|
||||
</script>
|
||||
|
||||
<input
|
||||
class={`border-1 border-stone-300 border rounded-md shadow ${className} ${
|
||||
type === "checkbox" && "w-5 h-5 text-orange-400"
|
||||
}`}
|
||||
{type}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:change
|
||||
on:keydown
|
||||
on:keyup
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
/>
|
Loading…
Reference in New Issue
Block a user