debug table

src/components/runners/RunnersOverview.svelte

@@ -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}