Extracted table bottom

src/components/runners/RunnersOverview.svelte

@@ -25,6 +25,7 @@
   import { groupFilter } from "../shared/tablefilters";
   import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
   import Toastify from "toastify-js";
+  import TableBottom from "../shared/TableBottom.svelte";
 
   $: selectedRunners =
     $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
@@ -297,75 +298,10 @@
       </table>
     </div>
     <div class="h-2" />
-    <div class="flex items-center gap-2">
+
-      <button
-        class="border rounded p-1"
-        on:click={() => $table.setPageIndex(0)}
-        disabled={!$table.getCanPreviousPage()}
-      >
-        {"<<"}
-      </button>
-      <button
-        class="border rounded p-1"
-        on:click={() => $table.previousPage()}
-        disabled={!$table.getCanPreviousPage()}
-      >
-        {"<"}
-      </button>
-      <button
-        class="border rounded p-1"
-        on:click={() => $table.nextPage()}
-        disabled={!$table.getCanNextPage()}
-      >
-        {">"}
-      </button>
-      <button
-        class="border rounded p-1"
-        on:click={() => $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}
-          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}
-        on:input={(e) => {
-          const ps = Number(e.target.value);
-          console.log({ ps });
-          $table.setPageSize(Number(e.target.value));
-        }}
-      >
-        {#each [25, 50, 100, 250, 500] as pageSize}
-          <option value={pageSize}>{pageSize}</option>
-        {/each}
-      </select>
-    </div>
-    <!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
-    <div>
-      {Object.keys(selected).length} of{" "}
-      {$table.getPreFilteredRowModel().rows.length} Total Rows Selected
-    </div>
   {/if}
 {/if}
-
+<TableBottom {table} {selected}></TableBottom>
 <style>
   thead {
     background: #fff;

src/components/shared/TableBottom.svelte

@@ -0,0 +1,71 @@
+<script>
+
+    export let table;
+    export let selected;
+</script>
+<div class="flex items-center gap-2">
+    <button
+      class="border rounded p-1"
+      on:click={() => $table.setPageIndex(0)}
+      disabled={!$table.getCanPreviousPage()}
+    >
+      {"<<"}
+    </button>
+    <button
+      class="border rounded p-1"
+      on:click={() => $table.previousPage()}
+      disabled={!$table.getCanPreviousPage()}
+    >
+      {"<"}
+    </button>
+    <button
+      class="border rounded p-1"
+      on:click={() => $table.nextPage()}
+      disabled={!$table.getCanNextPage()}
+    >
+      {">"}
+    </button>
+    <button
+      class="border rounded p-1"
+      on:click={() => $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}
+        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}
+      on:input={(e) => {
+        const ps = Number(e.target.value);
+        console.log({ ps });
+        $table.setPageSize(Number(e.target.value));
+      }}
+    >
+      {#each [25, 50, 100, 250, 500] as pageSize}
+        <option value={pageSize}>{pageSize}</option>
+      {/each}
+    </select>
+  </div>
+  <!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
+  <div>
+    {Object.keys(selected).length} of{" "}
+    {$table.getPreFilteredRowModel().rows.length} Total Rows Selected
+  </div>