Basic details and delete buttons

src/components/runners/RunnersOverview.svelte

@@ -9,6 +9,7 @@
     getFilteredRowModel,
     getPaginationRowModel,
     getSortedRowModel,
+    renderComponent,
   } from "@tanstack/svelte-table";
   import {
     RunnerService,
@@ -22,6 +23,7 @@
   import { onMount } from "svelte";
   import InputElement from "../shared/InputElement.svelte";
   import { groupFilter } from "../shared/tablefilters";
+  import TableActions from "../shared/TableActions.svelte";
 
   $: selected =
     $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
@@ -65,6 +67,20 @@
       },
       enableColumnFilter: false,
     },
+    {
+      accessorKey: "id",
+      header: () => $_("action"),
+      cell: (info) => {
+        return renderComponent(TableActions, {
+          detailsLink: `./${info.getValue()}`,
+          deleteAction: () => {
+            console.log(info.getValue());
+          },
+          deleteEnabled: true,
+        });
+      },
+      enableColumnFilter: false,
+    },
   ];
 
   //