Compare commits
4 Commits
238082b657
...
fd0d45f721
Author | SHA1 | Date | |
---|---|---|---|
fd0d45f721 | |||
5ecf838dd2 | |||
45a7a90cb8 | |||
cac851f2b1 |
@ -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}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user