diff --git a/packages/datalib/src/PerspectiveColumnDefinition.ts b/packages/datalib/src/PerspectiveColumnDefinition.ts
index ac2b13596..edc67d988 100644
--- a/packages/datalib/src/PerspectiveColumnDefinition.ts
+++ b/packages/datalib/src/PerspectiveColumnDefinition.ts
@@ -1,14 +1,47 @@
-import { ColumnInfo, ForeignKeyInfo, TableInfo } from 'dbgate-types';
+import { ColumnInfo, DatabaseInfo, ForeignKeyInfo, TableInfo } from 'dbgate-types';
 import { clearConfigCache } from 'prettier';
 import { ChangePerspectiveConfigFunc, PerspectiveConfig } from './PerspectiveConfig';
 
 export abstract class PerspectiveColumnDefinition {
+  constructor(
+    public config: PerspectiveConfig,
+    public setConfig: ChangePerspectiveConfigFunc,
+    public parentColumn: PerspectiveTableColumnDefinition
+  ) {}
   abstract get title();
+  abstract get codeName();
   abstract get props();
-  abstract get isExpanded();
   abstract get isExpandable();
-  abstract get level();
-  abstract toggleExpanded();
+  abstract get childColumns(): PerspectiveColumnDefinition[];
+  get uniqueName() {
+    if (this.parentColumn) return `${this.parentColumn.uniqueName}.${this.codeName}`;
+    return this.codeName;
+  }
+  get level() {
+    if (this.parentColumn) return this.parentColumn.level + 1;
+    return 0;
+  }
+  get isExpanded() {
+    return this.config.expandedColumns.includes(this.uniqueName);
+  }
+
+  toggleExpanded(value?: boolean) {
+    this.includeInColumnSet('expandedColumns', this.uniqueName, value == null ? !this.isExpanded : value);
+  }
+
+  includeInColumnSet(field: keyof PerspectiveConfig, uniqueName: string, isIncluded: boolean) {
+    if (isIncluded) {
+      this.setConfig(cfg => ({
+        ...cfg,
+        [field]: [...(cfg[field] || []), uniqueName],
+      }));
+    } else {
+      this.setConfig(cfg => ({
+        ...cfg,
+        [field]: (cfg[field] || []).filter(x => x != uniqueName),
+      }));
+    }
+  }
 }
 
 export class PerspectiveTableColumnDefinition extends PerspectiveColumnDefinition {
@@ -16,16 +49,22 @@ export class PerspectiveTableColumnDefinition extends PerspectiveColumnDefinitio
   constructor(
     public column: ColumnInfo,
     public table: TableInfo,
-    public config: PerspectiveConfig,
-    public setConfig: ChangePerspectiveConfigFunc
+    public db: DatabaseInfo,
+    config: PerspectiveConfig,
+    setConfig: ChangePerspectiveConfigFunc,
+    parentColumn: PerspectiveTableColumnDefinition
   ) {
-    super();
+    super(config, setConfig, parentColumn);
 
     this.foreignKey =
       table.foreignKeys &&
       table.foreignKeys.find(fk => fk.columns.length == 1 && fk.columns[0].columnName == column.columnName);
   }
 
+  get codeName() {
+    return this.column.columnName;
+  }
+
   get title() {
     return this.column.columnName;
   }
@@ -34,17 +73,19 @@ export class PerspectiveTableColumnDefinition extends PerspectiveColumnDefinitio
     return this.column;
   }
 
-  get isExpanded() {
-    return this.config.expandedColumns.includes(this.column.uniqueName);
-  }
-
   get isExpandable() {
     return !!this.foreignKey;
   }
 
-  get level() {
-    return 0;
+  get childColumns(): PerspectiveColumnDefinition[] {
+    if (!this.foreignKey) return [];
+    const tbl = this?.db?.tables?.find(
+      x => x.pureName == this.foreignKey?.refTableName && x.schemaName == this.foreignKey?.refSchemaName
+    );
+    return (
+      tbl?.columns?.map(
+        col => new PerspectiveTableColumnDefinition(col, tbl, this.db, this.config, this.setConfig, this)
+      ) || []
+    );
   }
-
-  toggleExpanded() {}
 }
diff --git a/packages/web/src/perspectives/PerspectiveColumnRow.svelte b/packages/web/src/perspectives/PerspectiveColumnRow.svelte
index 062a557d1..81893cf1d 100644
--- a/packages/web/src/perspectives/PerspectiveColumnRow.svelte
+++ b/packages/web/src/perspectives/PerspectiveColumnRow.svelte
@@ -10,7 +10,7 @@
   <span class="expandColumnIcon" style={`margin-right: ${5 + column.level * 10}px`}>
     <FontIcon
       icon={column.isExpandable ? plusExpandIcon(column.isExpanded) : 'icon invisible-box'}
-      on:click={() => column.togglExpanded()}
+      on:click={() => column.toggleExpanded()}
     />
   </span>
 
diff --git a/packages/web/src/perspectives/PerspectiveColumns.svelte b/packages/web/src/perspectives/PerspectiveColumns.svelte
index 29820bbf6..d426a0361 100644
--- a/packages/web/src/perspectives/PerspectiveColumns.svelte
+++ b/packages/web/src/perspectives/PerspectiveColumns.svelte
@@ -4,8 +4,23 @@
   import PerspectiveColumnRow from './PerspectiveColumnRow.svelte';
 
   export let columns = [];
+
+  function processFlatColumns(res, columns) {
+    for (const col of columns) {
+      res.push(col);
+      if (col.isExpanded) {
+        processFlatColumns(res, col.childColumns);
+      }
+    }
+  }
+
+  function getFlatColumns(columns) {
+    const res = [];
+    processFlatColumns(res, columns);
+    return res;
+  }
 </script>
 
-{#each columns as column}
+{#each getFlatColumns(columns) as column}
   <PerspectiveColumnRow {column} />
 {/each}
diff --git a/packages/web/src/perspectives/PerspectiveView.svelte b/packages/web/src/perspectives/PerspectiveView.svelte
index 3288610f1..389d4f483 100644
--- a/packages/web/src/perspectives/PerspectiveView.svelte
+++ b/packages/web/src/perspectives/PerspectiveView.svelte
@@ -4,7 +4,7 @@
   import _ from 'lodash';
 
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
-  import { useTableInfo, useViewInfo } from '../utility/metadataLoaders';
+  import { useDatabaseInfo, useTableInfo, useViewInfo } from '../utility/metadataLoaders';
 
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
@@ -32,24 +32,27 @@
     return '300px';
   }
 
+  const dbInfo = useDatabaseInfo({ conid, database });
   const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
   const viewInfo = useViewInfo({ conid, database, schemaName, pureName });
 
   // $: console.log('tableInfo', $tableInfo);
   // $: console.log('viewInfo', $viewInfo);
 
-  function getTableColumns(table, config, setConfig) {
-    return table.columns.map(col => new PerspectiveTableColumnDefinition(col, table, config, setConfig));
+  function getTableColumns(table, dbInfo, config, setConfig) {
+    return table.columns.map(col => new PerspectiveTableColumnDefinition(col, table, dbInfo, config, setConfig, null));
   }
 
-  function getViewColumns(view, config, setConfig) {
+  function getViewColumns(view, dbInfo, config, setConfig) {
     return [];
   }
 
+  $: console.log('CFG', config);
+
   $: columns = $tableInfo
-    ? getTableColumns($tableInfo, config, setConfig)
+    ? getTableColumns($tableInfo, $dbInfo, config, setConfig)
     : $viewInfo
-    ? getViewColumns($viewInfo, config, setConfig)
+    ? getViewColumns($viewInfo, $dbInfo, config, setConfig)
     : null;
 </script>