Improve vuetify tables headers and readability

packages/playground/src/components/k8s_deployment_table.vue

@@ -72,10 +72,17 @@
       :headers="[
         { title: 'PLACEHOLDER', key: 'data-table-select' },
         { title: 'Name', key: 'name' },
-        { title: 'Public IPv4', key: 'ipv4', sortable: false },
-        { title: 'Public IPv6', key: 'ipv6', sortable: false },
-        { title: 'Planetary Network IP', key: 'planetary', sortable: false },
-        { title: 'Mycelium Network IP', key: 'mycelium', sortable: false },
+        {
+          title: 'Networks',
+          key: 'networks',
+          sortable: false,
+          children: [
+            { title: 'Public IPv4', key: 'ipv4', sortable: false },
+            { title: 'Public IPv6', key: 'ipv6', sortable: false },
+            { title: 'Planetary IP', key: 'planetary', sortable: false },
+            { title: 'Mycelium IP', key: 'mycelium', sortable: false },
+          ],
+        },
         { title: 'Workers', key: 'workersLength' },
         { title: 'Billing Rate', key: 'billing' },
         { title: 'Created At', key: 'created' },

packages/playground/src/components/list_table.vue

@@ -55,7 +55,7 @@
     </template>
 
     <template #bottom>
-      <v-row class="mt-5" v-if="loading && items.length === 0">
+      <v-row class="my-5" v-if="loading && items.length === 0">
         <v-spacer />
         <div class="d-flex my-6 align-center justify-center">
           <v-progress-circular indeterminate :width="3" :size="30" />
@@ -64,7 +64,7 @@
       </v-row>
       <template v-else-if="!loading && items.length === 0 && (noDataText || $slots['no-data-text'])">
         <VContainer>
-          <VRow justify="center" align="center" class="mt-5">
+          <VRow justify="center" align="center" class="my-5">
             <slot name="no-data-text" v-if="$slots['no-data-text']" />
             <p v-else v-text="noDataText" />
           </VRow>

packages/playground/src/components/ssh_keys/SshTable.vue

@@ -1,17 +1,16 @@
 <template>
-  <v-card class="pt-6 pl-6 pr-6 mb-4">
-    <div class="head">
-      <h3 class="text-light text-subtitle-1">
-        <v-icon>mdi-key-chain</v-icon>
-        SSH Keys
-      </h3>
-    </div>
-
-    <div class="table mt-3">
+  <v-card>
+    <v-card-title>
+      <v-icon icon="mdi-key-chain" />
+      SSH Keys
+    </v-card-title>
+
+    <v-divider />
+
+    <v-card-text>
       <v-data-table
         show-select
         :no-data-text="capitalize(`No keys found.`)"
-        class="pa-5"
         v-model="selectedKeys"
         :loading="loading"
         :headers="headers"
@@ -20,7 +19,7 @@
         @click:row="(_: any, { item }: any) => $emit('view', item)"
       >
         <template #loading>
-          <div class="w-100 text-center" v-if="loading && loadingMessage">
+          <div class="text-center" v-if="loading && loadingMessage">
             <small>{{ loadingMessage }}</small>
           </div>
         </template>
@@ -92,9 +91,12 @@
 
         <template #bottom></template>
       </v-data-table>
-    </div>
+    </v-card-text>
 
-    <div class="bottom mt-3 d-flex justify-end">
+    <v-divider />
+
+    <v-card-actions>
+      <v-spacer />
       <v-tooltip location="bottom" text="Export all selected keys.">
         <template #activator="{ props }">
           <v-btn
@@ -127,7 +129,7 @@
           </v-btn>
         </template>
       </v-tooltip>
-    </div>
+    </v-card-actions>
   </v-card>
 </template>
 
@@ -220,22 +222,7 @@ export default defineComponent({
 </script>
 
 <style>
-.head {
-  border-bottom: 1px solid #8d848d;
-  padding-bottom: 15px;
-}
-
-.bottom {
-  width: 100%;
-  border-top: 1px solid #8d848d;
-  padding: 15px;
-}
 .activation {
   cursor: pointer;
 }
-.v-data-table-rows-loading td {
-  padding: 0 !important;
-  margin: 0 !important;
-  height: 25px !important;
-}
 </style>

packages/playground/src/components/vm_deployment_table.vue

@@ -237,14 +237,21 @@ async function loadDeployments() {
 }
 
 const filteredHeaders = computed(() => {
-  let headers = [
+  const headers = [
     { title: "PLACEHOLDER", key: "data-table-select" },
     { title: "Name", key: "name" },
-    { title: "Public IPv4", key: "ipv4", sortable: false },
-    { title: "Public IPv6", key: "ipv6", sortable: false },
-    { title: "Planetary Network IP", key: "planetary", sortable: false },
-    { title: "Mycelium Network IP", key: "mycelium", sortable: false },
-    { title: "WireGuard", key: "wireguard", sortable: false },
+    {
+      title: "Networks",
+      key: "networks",
+      sortable: false,
+      children: [
+        { title: "Public IPv4", key: "ipv4", sortable: false },
+        { title: "Public IPv6", key: "ipv6", sortable: false },
+        { title: "Planetary IP", key: "planetary", sortable: false },
+        { title: "Mycelium IP", key: "mycelium", sortable: false },
+        { title: "WireGuard", key: "wireguard", sortable: false },
+      ],
+    },
     { title: "Flist", key: "flist" },
     { title: "Cost", key: "billing" },
     { title: "Created At", key: "created" },
@@ -270,20 +277,22 @@ const filteredHeaders = computed(() => {
 
   const flistSolutions = [ProjectName.VM, ProjectName.Fullvm] as string[];
 
-  if (!IPV6Solutions.includes(props.projectName)) {
-    headers = headers.filter(h => h.key !== "ipv6");
-  }
+  if (headers[2].children) {
+    if (!IPV6Solutions.includes(props.projectName)) {
+      headers[2].children = headers[2].children.filter(h => h.key !== "ipv6");
+    }
 
-  if (!IPV4Solutions.includes(props.projectName)) {
-    headers = headers.filter(h => h.key !== "ipv4");
-  }
+    if (!IPV4Solutions.includes(props.projectName)) {
+      headers[2].children = headers[2].children.filter(h => h.key !== "ipv4");
+    }
 
-  if (!WireguardSolutions.includes(props.projectName)) {
-    headers = headers.filter(h => h.key !== "wireguard");
-  }
+    if (!WireguardSolutions.includes(props.projectName)) {
+      headers[2].children = headers[2].children.filter(h => h.key !== "wireguard");
+    }
 
-  if (!flistSolutions.includes(props.projectName)) {
-    headers = headers.filter(h => h.key !== "flist");
+    if (!flistSolutions.includes(props.projectName)) {
+      headers[2].children = headers[2].children.filter(h => h.key !== "flist");
+    }
   }
 
   return headers;

packages/playground/src/global.css → packages/playground/src/global.scss

@@ -148,3 +148,32 @@ a {
   border-radius: 4px;
   border-left: 5px solid #1c81dd;
 }
+
+/* Update tables styles */
+.v-table {
+  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+}
+
+table {
+  thead {
+    tr {
+      th {
+        border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+
+        &:not(.v-data-table__th--sorted) i {
+          opacity: 0.1 !important;
+        }
+      }
+
+      &:first-of-type th:last-of-type {
+        border-right: none;
+      }
+    }
+  }
+
+  tbody tr {
+    td:not(:last-of-type) {
+      border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+}

packages/playground/src/main.ts

@@ -1,5 +1,5 @@
 import "mosha-vue-toastify/dist/style.css";
-import "./global.css";
+import "./global.scss";
 
 import { createPinia } from "pinia";
 import { createApp } from "vue";

packages/playground/src/types/index.ts

@@ -87,7 +87,13 @@ export interface Flist {
   entryPoint: string;
 }
 
-export type VDataTableHeader = { title: string; key: string; sortable?: boolean; [key: string]: any }[];
+export type VDataTableHeader = {
+  title: string;
+  key: string;
+  sortable?: boolean;
+  children?: VDataTableHeader;
+  [key: string]: any;
+}[];
 
 export enum ProjectName {
   Kubernetes = "Kubernetes",

packages/playground/src/views/farms.vue

@@ -206,16 +206,13 @@ const headers: VDataTableHeader = [
   { title: "ID", key: "farmId", sortable: false },
   { title: "Name", key: "name", sortable: false },
   {
-    title: "Total Public IPs",
-    key: "totalPublicIp",
-    align: "start",
-    sortable: false,
-  },
-  {
-    title: "Available Public IPs",
-    key: "freePublicIp",
-    align: "start",
+    title: "Public IPs",
+    key: "publicIps",
     sortable: false,
+    children: [
+      { title: "Total", key: "totalPublicIp", sortable: false },
+      { title: "Available", key: "freePublicIp", sortable: false },
+    ],
   },
   {
     title: "Certification Type",

packages/playground/src/weblets/tf_contracts_list.vue

@@ -195,13 +195,27 @@ const baseTableHeaders: VDataTableHeader = [
 // Define specific table headers for each contract type
 const nodeTableHeaders: VDataTableHeader = [
   ...baseTableHeaders,
-  { title: "Solution Type", key: "solutionType" },
-  { title: "Solution Name", key: "solutionName" },
+  {
+    title: "Solution",
+    key: "solution",
+    sortable: false,
+    children: [
+      { title: "Type", key: "solutionType" },
+      { title: "Name", key: "solutionName" },
+    ],
+  },
   { title: "Type", key: "deploymentType" },
   { title: "Expiration", key: "expiration" },
-  { title: "Node ID", key: "nodeId" },
   { title: "Farm ID", key: "farmId" },
-  { title: "Node Status", key: "nodeStatus", sortable: false },
+  {
+    title: "Node",
+    key: "node",
+    sortable: false,
+    children: [
+      { title: "ID", key: "nodeId" },
+      { title: "Status", key: "nodeStatus", sortable: false },
+    ],
+  },
   { title: "Details", key: "actions", sortable: false },
 ];
 
@@ -214,9 +228,16 @@ const nameTableHeaders: VDataTableHeader = [
 
 const RentTableHeaders: VDataTableHeader = [
   ...baseTableHeaders,
-  { title: "Node ID", key: "nodeId" },
   { title: "Farm ID", key: "farmId" },
-  { title: "Node Status", key: "nodeStatus", sortable: false },
+  {
+    title: "Node",
+    key: "node",
+    sortable: false,
+    children: [
+      { title: "ID", key: "nodeId" },
+      { title: "Status", key: "nodeStatus", sortable: false },
+    ],
+  },
   { title: "Details", key: "actions", sortable: false },
 ];