diff --git a/packages/datalib/src/PerspectiveDataPattern.ts b/packages/datalib/src/PerspectiveDataPattern.ts
index 9540307fc..e61b0f6f8 100644
--- a/packages/datalib/src/PerspectiveDataPattern.ts
+++ b/packages/datalib/src/PerspectiveDataPattern.ts
@@ -4,8 +4,9 @@ import _isString from 'lodash/isString';
 import _isPlainObject from 'lodash/isPlainObject';
 import _isNumber from 'lodash/isNumber';
 import _isBoolean from 'lodash/isBoolean';
+import _isArray from 'lodash/isArray';
 
-export type PerspectiveDataPatternColumnType = 'null' | 'string' | 'number' | 'boolean' | 'object';
+export type PerspectiveDataPatternColumnType = 'null' | 'string' | 'number' | 'boolean' | 'json';
 
 export interface PerspectiveDataPatternColumn {
   name: string;
@@ -27,6 +28,7 @@ function detectValueType(value): PerspectiveDataPatternColumnType {
   if (_isString(value)) return 'string';
   if (_isNumber(value)) return 'number';
   if (_isBoolean(value)) return 'boolean';
+  if (_isPlainObject(value) || _isArray(value)) return 'json';
   if (value == null) return 'null';
 }
 
@@ -42,10 +44,19 @@ function addObjectToColumns(columns: PerspectiveDataPatternColumn[], row) {
         };
         columns.push(column);
       }
-      const type = detectValueType(row[key]);
+      const value = row[key];
+      const type = detectValueType(value);
       if (!column.types.includes(type)) {
         column.types.push(type);
       }
+      if (_isPlainObject(value)) {
+        addObjectToColumns(column.columns, value);
+      }
+      if (_isArray(value)) {
+        for (const item of value) {
+          addObjectToColumns(column.columns, item);
+        }
+      }
     }
   }
 }
diff --git a/packages/datalib/src/PerspectiveTreeNode.ts b/packages/datalib/src/PerspectiveTreeNode.ts
index 746f54b93..692d2921f 100644
--- a/packages/datalib/src/PerspectiveTreeNode.ts
+++ b/packages/datalib/src/PerspectiveTreeNode.ts
@@ -729,6 +729,10 @@ export class PerspectivePatternColumnNode extends PerspectiveTreeNode {
     super(dbs, config, setConfig, parentNode, dataProvider, databaseConfig, designerId);
   }
 
+  get isChildColumn() {
+    return this.parentNode instanceof PerspectivePatternColumnNode;
+  }
+
   // matchChildRow(parentRow: any, childRow: any): boolean {
   //   if (!this.foreignKey) return false;
   //   return parentRow[this.foreignKey.columns[0].columnName] == childRow[this.foreignKey.columns[0].refColumnName];
@@ -797,7 +801,7 @@ export class PerspectivePatternColumnNode extends PerspectiveTreeNode {
   }
 
   get isExpandable() {
-    return !!this.foreignKey;
+    return this.column.columns.length > 0;
   }
 
   get isSortable() {
@@ -809,6 +813,20 @@ export class PerspectivePatternColumnNode extends PerspectiveTreeNode {
   }
 
   generateChildNodes(): PerspectiveTreeNode[] {
+    return this.column.columns.map(
+      column =>
+        new PerspectivePatternColumnNode(
+          this.owner,
+          column,
+          this.dbs,
+          this.config,
+          this.setConfig,
+          this.dataProvider,
+          this.databaseConfig,
+          this,
+          null
+        )
+    );
     return [];
     // if (!this.foreignKey) return [];
     // const tbl = this?.db?.tables?.find(
@@ -1237,7 +1255,7 @@ export class PerspectiveCustomJoinTreeNode extends PerspectiveTableNode {
     // console.log('CUSTOM JOIN', this.customJoin);
     // console.log('this.getDataLoadColumns()', this.getDataLoadColumns());
     const isMongo = isCollectionInfo(this.table);
-    
+
     return {
       schemaName: this.table.schemaName,
       pureName: this.table.pureName,
@@ -1355,44 +1373,6 @@ function findDesignerIdForNode<T extends PerspectiveTreeNode>(
   return node;
 }
 
-export function getCollectionChildPerspectiveNodes(
-  designerId: string,
-  collection: CollectionInfo,
-  dbs: MultipleDatabaseInfo,
-  config: PerspectiveConfig,
-  setConfig: ChangePerspectiveConfigFunc,
-  dataProvider: PerspectiveDataProvider,
-  databaseConfig: PerspectiveDatabaseConfig,
-  parentNode: PerspectiveTreeNode
-) {
-  if (!collection) return [];
-  const db = parentNode.db;
-
-  const pattern = dataProvider.dataPatterns[designerId];
-  if (!pattern) return [];
-
-  const columnNodes = pattern.columns.map(col =>
-    findDesignerIdForNode(
-      config,
-      parentNode,
-      designerId =>
-        new PerspectivePatternColumnNode(
-          collection,
-          col,
-          dbs,
-          config,
-          setConfig,
-          dataProvider,
-          databaseConfig,
-          parentNode,
-          designerId
-        )
-    )
-  );
-
-  return columnNodes;
-}
-
 export function getTableChildPerspectiveNodes(
   table: TableInfo | ViewInfo | CollectionInfo,
   dbs: MultipleDatabaseInfo,
@@ -1405,7 +1385,7 @@ export function getTableChildPerspectiveNodes(
   if (!table) return [];
   const db = parentNode.db;
 
-  const pattern = dataProvider.dataPatterns[parentNode.designerId];
+  const pattern = dataProvider?.dataPatterns?.[parentNode.designerId];
 
   const tableOrView = isTableInfo(table) || isViewInfo(table) ? table : null;