Compare commits

...

4 Commits

Author SHA1 Message Date
fd0d45f721
debug table 2023-04-12 15:52:19 +02:00
5ecf838dd2
cleanup headers 2023-04-12 15:52:13 +02:00
45a7a90cb8
pagination size 2023-04-12 15:52:05 +02:00
cac851f2b1
fix pagination next prev 2023-04-12 15:51:46 +02:00

View File

@ -14,42 +14,41 @@
accessorKey: "id", accessorKey: "id",
header: () => "id", header: () => "id",
}, },
{
header: "Name",
footer: (props) => props.column.id,
columns: [
{
accessorKey: "firstname",
cell: (info) => info.getValue(),
footer: (props) => props.column.id,
},
{
accessorFn: (row) => row.lastname,
id: "lastname",
cell: (info) => info.getValue(),
header: () => "Nachname",
footer: (props) => props.column.id,
},
{
accessorFn: (row) => `${row.firstname} ${row.lastname}`,
id: "fullname",
header: "Voller Name",
cell: (info) => info.getValue(),
// footer: (props) => props.column.id,
// filterFn: "fuzzy",
// sortingFn: fuzzySort,
},
],
},
// { // {
// accessorKey: "firstname", // header: "Name",
// header: () => "firstname", // footer: (props) => props.column.id,
// columns: [
// {
// accessorKey: "firstname",
// cell: (info) => info.getValue(),
// footer: (props) => props.column.id,
// },
// {
// accessorFn: (row) => row.lastname,
// id: "lastname",
// cell: (info) => info.getValue(),
// header: () => "Nachname",
// footer: (props) => props.column.id,
// },
// {
// accessorFn: (row) => `${row.firstname} ${row.lastname}`,
// id: "fullname",
// header: "Voller Name",
// cell: (info) => info.getValue(),
// // footer: (props) => props.column.id,
// // filterFn: "fuzzy",
// // sortingFn: fuzzySort,
// },
// ],
// }, // },
// { {
// accessorKey: "lastname", accessorKey: "firstname",
// header: () => "lastname", header: () => "firstname",
// } },
// , {
accessorKey: "lastname",
header: () => "lastname",
},
{ {
accessorKey: "group.name", accessorKey: "group.name",
header: () => "group", header: () => "group",
@ -215,28 +214,28 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
class="border rounded p-1" class="border rounded p-1"
onClick={() => $table.setPageIndex(0)} on:click={() => $table.setPageIndex(0)}
disabled={!$table.getCanPreviousPage()} disabled={!$table.getCanPreviousPage()}
> >
{"<<"} {"<<"}
</button> </button>
<button <button
class="border rounded p-1" class="border rounded p-1"
onClick={() => $table.previousPage()} on:click={() => $table.previousPage()}
disabled={!$table.getCanPreviousPage()} disabled={!$table.getCanPreviousPage()}
> >
{"<"} {"<"}
</button> </button>
<button <button
class="border rounded p-1" class="border rounded p-1"
onClick={() => $table.nextPage()} on:click={() => $table.nextPage()}
disabled={!$table.getCanNextPage()} disabled={!$table.getCanNextPage()}
> >
{">"} {">"}
</button> </button>
<button <button
class="border rounded p-1" class="border rounded p-1"
onClick={() => $table.setPageIndex($table.getPageCount() - 1)} on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
disabled={!$table.getCanNextPage()} disabled={!$table.getCanNextPage()}
> >
{">>"} {">>"}
@ -253,22 +252,27 @@
<input <input
type="number" type="number"
defaultValue={$table.getState().pagination.pageIndex + 1} defaultValue={$table.getState().pagination.pageIndex + 1}
onChange={(e) => { on:change={(e) => {
const page = e.target.value ? Number(e.target.value) - 1 : 0; const page = e.target.value ? Number(e.target.value) - 1 : 0;
$table.setPageIndex(page); $table.setPageIndex(page);
}} }}
class="border p-1 rounded w-16" class="border p-1 rounded w-16"
/> />
</span> </span>
<!-- <select <select
value={$table.getState().pagination.pageSize} value={$table.getState().pagination.pageSize}
onChange={e => { on:change={(e) => {
$table.setPageSize(Number(e.target.value)) const ps = Number(e.target.value);
}} console.log({ ps });
> $table.setPageSize(Number(e.target.value));
}}
</select> --> >
{#each [10, 25, 50, 100, 250] as pageSize}
<option value={pageSize}>{pageSize}</option>
{/each}
</select>
</div> </div>
<pre>{JSON.stringify($table.getState(), null, 2)}</pre>
<!-- </Datatable> --> <!-- </Datatable> -->
{/if} {/if}
{/if} {/if}