clickable fk links in column manager

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -335,9 +335,9 @@
     tabComponent,
     scriptTemplate,
     { schemaName, pureName, conid, database, objectTypeField },
-    forceNewTab,
-    initialData,
-    icon
+    forceNewTab?,
+    initialData?,
+    icon?
   ) {
     const connection = await getConnectionInfo({ conid });
     const tooltip = `${getConnectionLabel(connection)}\n${database}\n${fullDisplayName({

packages/web/src/datagrid/ColumnManager.svelte

@@ -19,6 +19,8 @@
   export let display: GridDisplay;
   export let isJsonView = false;
   export let isDynamicStructure = false;
+  export let conid;
+  export let database;
 
   let filter;
   let domFocusField;
@@ -141,6 +143,8 @@
       {display}
       {column}
       {isJsonView}
+      {conid}
+      {database}
       isSelected={selectedColumns.includes(column.uniqueName) || currentColumnUniqueName == column.uniqueName}
       on:click={() => {
         if (domFocusField) domFocusField.focus();

packages/web/src/datagrid/ColumnManagerRow.svelte

@@ -9,6 +9,8 @@
   export let display;
   export let isJsonView = false;
   export let isSelected = false;
+  export let conid;
+  export let database;
 
   const dispatch = createEventDispatcher();
 </script>
@@ -52,7 +54,7 @@
       }}
     />
   {/if}
-  <ColumnLabel {...column} showDataType />
+  <ColumnLabel {...column} showDataType {conid} {database} />
 </div>
 
 <style>

packages/web/src/elements/ColumnLabel.svelte

@@ -8,7 +8,10 @@
 </script>
 
 <script lang="ts">
+  import { openDatabaseObjectDetail } from '../appobj/DatabaseObjectAppObject.svelte';
+
   import FontIcon from '../icons/FontIcon.svelte';
+  import Link from './Link.svelte';
 
   export let notNull = false;
   export let forceIcon = false;
@@ -17,6 +20,9 @@
   export let extInfo = null;
   export let dataType = null;
   export let showDataType = false;
+  export let foreignKey;
+  export let conid = undefined;
+  export let database = undefined;
 
   $: icon = getColumnIcon($$props, forceIcon);
 </script>
@@ -29,8 +35,31 @@
   {#if extInfo}
     <span class="extinfo">{extInfo}</span>
   {/if}
-  {#if showDataType && dataType}
-    <span class="extinfo">{dataType.toLowerCase()}</span>
+  {#if showDataType}
+    {#if foreignKey}
+      <span class="extinfo">
+        <FontIcon icon="icon arrow-right" />
+        {#if conid && database}
+          <Link
+            onClick={e => {
+              e.stopPropagation();
+
+              openDatabaseObjectDetail('TableDataTab', null, {
+                schemaName: foreignKey.refSchemaName,
+                pureName: foreignKey.refTableName,
+                conid,
+                database,
+                objectTypeField: 'tables',
+              });
+            }}>{foreignKey.refTableName}</Link
+          >
+        {:else}
+          {foreignKey.refTableName}
+        {/if}
+      </span>
+    {:else if dataType}
+      <span class="extinfo">{dataType.toLowerCase()}</span>
+    {/if}
   {/if}
 </span>
 

packages/web/src/formview/FormView.svelte

@@ -563,12 +563,7 @@
                   <FontIcon icon="icon invisible-box" />
                 {/if}
                 <span style={`margin-left: ${(col.uniquePath.length - 1) * 20}px`} />
-                <ColumnLabel
-                  {...col}
-                  headerText={col.columnName}
-                  extInfo={col.foreignKey ? ` -> ${col.foreignKey.refTableName}` : null}
-                  showDataType={!col.foreignKey}
-                />
+                <ColumnLabel {...col} headerText={col.columnName} showDataType {conid} {database} />
               </div>
             </td>
             <DataGridCell