Compare commits
4 Commits
238082b657
...
fd0d45f721
Author | SHA1 | Date | |
---|---|---|---|
fd0d45f721 | |||
5ecf838dd2 | |||
45a7a90cb8 | |||
cac851f2b1 |
@ -14,42 +14,41 @@
|
||||
accessorKey: "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: () => "firstname",
|
||||
// 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: "lastname",
|
||||
// header: () => "lastname",
|
||||
// }
|
||||
// ,
|
||||
{
|
||||
accessorKey: "firstname",
|
||||
header: () => "firstname",
|
||||
},
|
||||
{
|
||||
accessorKey: "lastname",
|
||||
header: () => "lastname",
|
||||
},
|
||||
{
|
||||
accessorKey: "group.name",
|
||||
header: () => "group",
|
||||
@ -215,28 +214,28 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
onClick={() => $table.setPageIndex(0)}
|
||||
on:click={() => $table.setPageIndex(0)}
|
||||
disabled={!$table.getCanPreviousPage()}
|
||||
>
|
||||
{"<<"}
|
||||
</button>
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
onClick={() => $table.previousPage()}
|
||||
on:click={() => $table.previousPage()}
|
||||
disabled={!$table.getCanPreviousPage()}
|
||||
>
|
||||
{"<"}
|
||||
</button>
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
onClick={() => $table.nextPage()}
|
||||
on:click={() => $table.nextPage()}
|
||||
disabled={!$table.getCanNextPage()}
|
||||
>
|
||||
{">"}
|
||||
</button>
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
onClick={() => $table.setPageIndex($table.getPageCount() - 1)}
|
||||
on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
|
||||
disabled={!$table.getCanNextPage()}
|
||||
>
|
||||
{">>"}
|
||||
@ -253,22 +252,27 @@
|
||||
<input
|
||||
type="number"
|
||||
defaultValue={$table.getState().pagination.pageIndex + 1}
|
||||
onChange={(e) => {
|
||||
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}
|
||||
onChange={e => {
|
||||
$table.setPageSize(Number(e.target.value))
|
||||
}}
|
||||
>
|
||||
|
||||
</select> -->
|
||||
<select
|
||||
value={$table.getState().pagination.pageSize}
|
||||
on:change={(e) => {
|
||||
const ps = Number(e.target.value);
|
||||
console.log({ ps });
|
||||
$table.setPageSize(Number(e.target.value));
|
||||
}}
|
||||
>
|
||||
{#each [10, 25, 50, 100, 250] as pageSize}
|
||||
<option value={pageSize}>{pageSize}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<pre>{JSON.stringify($table.getState(), null, 2)}</pre>
|
||||
<!-- </Datatable> -->
|
||||
{/if}
|
||||
{/if}
|
||||
|
Loading…
x
Reference in New Issue
Block a user