wip: pagination

src/components/runners/RunnersOverview.svelte

@@ -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",
     },
     {
-      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: "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}