butons...

src/App.vue

@@ -7,6 +7,7 @@ import Button from 'primevue/button'
 import DataTable from "primevue/datatable"
 import Column from "primevue/column"
 import Card from "primevue/card"
+import SplitButton from "primevue/splitbutton"
 
 const allTables = ref()
 const activeTables = ref()
@@ -35,6 +36,13 @@ function stopTable(tableId: number) {
   activate.then((resp) => axios.get('http://localhost/api/active_tables')).then((resp) => activeTables.value = resp.data)
 }
 
+const saveButtonSubmenu = [
+  { label: "Restart" },
+  { label: "Stop" },
+  { separator: true },
+  { label: "Delete" }
+]
+
 </script>
 
 
@@ -46,12 +54,25 @@ function stopTable(tableId: number) {
     padding-left: 15px;
   }
 
-  .ATTables {
+  .Tables {
+    padding-left: 50px;
+  }
+}
+
+.AllTables {
+  margin: 20px;
+
+  h2 {
+    padding-left: 15px;
+  }
+
+  .Tables {
     padding-left: 50px;
   }
 
   .button-box {
-    padding: 10px;
+    padding-top: 25px;
+    padding-bottom: 10px;
   }
 }
 </style>
@@ -63,39 +84,39 @@ function stopTable(tableId: number) {
     </template>
 
     <template #content>
-      <DataTable :exportable="false" :value="activeTables">
+      <DataTable class="Tables" :value="activeTables">
         <Column field="table_name" header="Table Name" />
         <Column field="table_link" header="Table Link">
           <template #body="slotProps">
-            <a :href="slotProps.data.table_link">{{slotProps.data.table_link}}</a>
+            <a :href="slotProps.data.table_link">{{ slotProps.data.table_link }}</a>
           </template>
         </Column>
         <Column header="Close">
           <template #body="slotProps">
-            <Button label="Close" @click="stopTable(slotProps.data.id)"/>
+            <Button label="Close" @click="stopTable(slotProps.data.id)" />
           </template>
         </Column>
       </DataTable>
     </template>
   </Card>
 
-  <Card class="ActiveTables">
+  <Card class="AllTables">
     <template #title>
       <h2>All Tables</h2>
     </template>
 
     <template #content>
-      <DataTable class="ATTables" style="" :exportable="false" :value="allTables">
+      <DataTable class="Tables" :value="allTables">
         <Column field="table_name" header="Table Name" />
         <Column field="table_link" header="Table Link" />
         <Column header="Close">
           <template #body="slotProps">
-            <Button label="Start" @click="startTable(slotProps.data.id)" />
+            <SplitButton label="Start" @click="startTable(slotProps.data.id)" :model="saveButtonSubmenu" />
           </template>
         </Column>
       </DataTable>
       <div class="button-box flex justify-content-end">
-        <Button label="New Table"/>
+        <Button label="New Table" />
       </div>
     </template>
   </Card>