stuff

src/TableManager.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 
 import axios from 'axios'
 import Button from 'primevue/button'
@@ -8,6 +9,7 @@ import Column from 'primevue/column'
 import Card from 'primevue/card'
 import SplitButton from 'primevue/splitbutton'
 
+const route = useRouter()
 const allTables = ref()
 const activeTables = ref()
 
@@ -43,13 +45,19 @@ function stopTable(tableId: number) {
     .then((resp) => (activeTables.value = resp.data))
 }
 
-const saveButtonSubmenu = [
-  { label: 'Edit' },
+function buildButtonModel(id: number) {
+  return [{
+    label: 'Edit', command: () => {
+      route.push({ name: 'edit', params: { id: id } })
+    }
+  },
   { label: 'Restart' },
   { label: 'Force Stop' },
   { separator: true },
-  { label: 'Delete' },
-]
+  { label: 'Delete' }
+  ]
+}
+
 </script>
 
 <style>
@@ -113,15 +121,13 @@ const saveButtonSubmenu = [
 
     <template #content>
       <DataTable class="Tables" :value="allTables">
-        <Column field="table_name" header="Table Name" />
+        <Column field="table_name" header="Table Name">
+        </Column>
         <Column field="table_link" header="Table Link" />
         <Column header="Close">
           <template #body="slotProps">
-            <SplitButton
-              label="Start"
-              @click="startTable(slotProps.data.id)"
-              :model="saveButtonSubmenu"
-            />
+            <SplitButton label="Start" @click="startTable(slotProps.data.id)"
+              :model="buildButtonModel(slotProps.data.id)" />
           </template>
         </Column>
       </DataTable>