lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

wip: pagination

Browse Source
This commit is contained in:
Philipp Dormann 2023-04-12 15:36:45 +02:00
parent 9bec95ede8
commit a59dbbe50e
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
1 changed files with 90 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/runners/RunnersOverview.svelte
View File

@ -8,34 +8,46 @@
} from "@tanstack/svelte-table";
const columns = [
// {
// accessorKey: "id",
// cell: (info) => info.getValue(),
// footer: (info) => info.column.id,
// },
// {
// accessorFn: (row) => row.lastName,
// id: "lastName",
// cell: (info) => info.getValue(),
// header: () => "Last Name",
// footer: (info) => info.column.id,
// },
{
accessorKey: "id",
header: () => "id",
},
{
header: "Name",
footer: (props) => props.column.id,
columns: [
{
accessorKey: "firstname",
header: () => "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: "middlename",
// header: () => "middlename",
// accessorKey: "firstname",
// header: () => "firstname",
// },
{
accessorKey: "lastname",
header: () => "lastname",
},
// {
// accessorKey: "lastname",
// header: () => "lastname",
// }
// ,
{
accessorKey: "group.name",
header: () => "group",
@ -165,6 +177,64 @@
{/each}
</tbody>
</table>
<div class="h-2" />
<div class="flex items-center gap-2">
<button
class="border rounded p-1"
onClick={() => $table.setPageIndex(0)}
disabled={!$table.getCanPreviousPage()}
>
{"<<"}
</button>
<button
class="border rounded p-1"
onClick={() => $table.previousPage()}
disabled={!$table.getCanPreviousPage()}
>
{"<"}
</button>
<button
class="border rounded p-1"
onClick={() => $table.nextPage()}
disabled={!$table.getCanNextPage()}
>
{">"}
</button>
<button
class="border rounded p-1"
onClick={() => $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}
onChange={(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> -->
</div>
<!-- </Datatable> -->
{/if}
{/if}