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,
+    },
   ];
 
   //

src/components/shared/TableActions.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { _ } from "svelte-i18n";
+
+  export let detailsLink;
+  export let detailsAction;
+  export let deleteEnabled;
+  export let deleteAction;
+</script>
+
+{#if detailsLink}
+  <a href={detailsLink} class="text-indigo-600 hover:text-indigo-900"
+    >{$_("details")}</a
+  >
+{:else if detailsAction}
+  <button href={detailsLink} class="text-indigo-600 hover:text-indigo-900"
+    >{$_("details")}</button
+  >
+{/if}
+{#if deleteEnabled}
+  <button
+    tabindex="0"
+	on:click={deleteAction}
+    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+    >{$_("delete")}</button
+  >
+{/if}