perspective: open table ctx menu

packages/web/src/perspectives/PerspectiveHeaderControl.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveDisplayColumn } from 'dbgate-datalib';
-  import _ from 'lodash';
+  import _, { mapKeys } from 'lodash';
 
   import DropDownButton from '../buttons/DropDownButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
@@ -17,15 +17,10 @@
       ? _.findIndex(config.sort?.[parentUniqueName], x => x.uniqueName == uniqueName)
       : -1;
   $: isSortDefined = config.sort?.[parentUniqueName]?.length > 0;
-
 </script>
 
 {#if column.isVisible(columnLevel)}
-  <th
-    rowspan={column.rowSpan}
-    class="columnHeader"
-    data-column={column.columnIndex}
-  >
+  <th rowspan={column.rowSpan} class="columnHeader" data-column={column.columnIndex}>
     <div class="wrap">
       <div class="label">
         {column.title}
@@ -51,7 +46,12 @@
   </th>
 {/if}
 {#if column.showParent(columnLevel)}
-  <th colspan={column.getColSpan(columnLevel)} class="tableHeader">{column.getParentName(columnLevel)}</th>
+  <th
+    colspan={column.getColSpan(columnLevel)}
+    class="tableHeader"
+    {..._.mapKeys(column.getParentDataAttributes(columnLevel), (v, k) => `data-${k}`)}
+    >{column.getParentName(columnLevel)}</th
+  >
 {/if}
 
 <style>

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -30,6 +30,7 @@
   import PerspectiveHeaderControl from './PerspectiveHeaderControl.svelte';
   import createRef from '../utility/createRef';
   import { getPerspectiveNodeMenu } from './perspectiveMenu';
+  import openNewTab from '../utility/openNewTab';
 
   const dbg = debug('dbgate:PerspectivaTable');
   export const activator = createActivator('PerspectiveTable', true);
@@ -176,6 +177,28 @@
       registerCloseHandler(() => {
         td.classList.remove('highlight');
       });
+
+      const pureName = td.getAttribute('data-pureName');
+      const schemaName = td.getAttribute('data-schemaName');
+      if (pureName) {
+        res.push({
+          text: `Open table ${pureName}`,
+          onClick: () => {
+            openNewTab({
+              title: pureName,
+              icon: 'img table',
+              tabComponent: 'TableDataTab',
+              props: {
+                schemaName,
+                pureName,
+                conid,
+                database,
+                objectTypeField: 'tables',
+              },
+            });
+          },
+        });
+      }
     }
 
     res.push([