src/components/runners/RunnersOverview.svelte

@@ -14,41 +14,42 @@
       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,
+        },
+      ],
+    },
     // {
-    //   header: "Name",
+    //   accessorKey: "firstname",
-    //   footer: (props) => props.column.id,
+    //   header: () => "firstname",
-    //   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",
+    //   accessorKey: "lastname",
-      header: () => "firstname",
+    //   header: () => "lastname",
-    },
+    // }
-    {
+    // ,
-      accessorKey: "lastname",
-      header: () => "lastname",
-    },
     {
       accessorKey: "group.name",
       header: () => "group",
@@ -214,28 +215,28 @@
     <div class="flex items-center gap-2">
       <button
         class="border rounded p-1"
-        on:click={() => $table.setPageIndex(0)}
+        onClick={() => $table.setPageIndex(0)}
         disabled={!$table.getCanPreviousPage()}
       >
         {"<<"}
       </button>
       <button
         class="border rounded p-1"
-        on:click={() => $table.previousPage()}
+        onClick={() => $table.previousPage()}
         disabled={!$table.getCanPreviousPage()}
       >
         {"<"}
       </button>
       <button
         class="border rounded p-1"
-        on:click={() => $table.nextPage()}
+        onClick={() => $table.nextPage()}
         disabled={!$table.getCanNextPage()}
       >
         {">"}
       </button>
       <button
         class="border rounded p-1"
-        on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
+        onClick={() => $table.setPageIndex($table.getPageCount() - 1)}
         disabled={!$table.getCanNextPage()}
       >
         {">>"}
@@ -252,27 +253,22 @@
         <input
           type="number"
           defaultValue={$table.getState().pagination.pageIndex + 1}
-          on:change={(e) => {
+          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
+      <!-- <select
-        value={$table.getState().pagination.pageSize}
+          value={$table.getState().pagination.pageSize}
-        on:change={(e) => {
+          onChange={e => {
-          const ps = Number(e.target.value);
+            $table.setPageSize(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>
-    <pre>{JSON.stringify($table.getState(), null, 2)}</pre>
     <!-- </Datatable> -->
   {/if}
 {/if}