diff --git a/packages/datalib/src/PerspectiveDisplay.ts b/packages/datalib/src/PerspectiveDisplay.ts
index 7e1985a69..edf859234 100644
--- a/packages/datalib/src/PerspectiveDisplay.ts
+++ b/packages/datalib/src/PerspectiveDisplay.ts
@@ -1,15 +1,21 @@
 import { PerspectiveTableNode, PerspectiveTreeNode } from './PerspectiveTreeNode';
 import _max from 'lodash/max';
+import _range from 'lodash/max';
+import _fill from 'lodash/fill';
+import _findIndex from 'lodash/findIndex';
 
 export class PerspectiveDisplayColumn {
   title: string;
   dataField: string;
-  parentColumns: string[] = [];
-  display: PerspectiveDisplay;
+  parentNodes: PerspectiveTreeNode[] = [];
   colSpanAtLevel = {};
+  columnIndex = 0;
+  dataNode: PerspectiveTreeNode = null;
+
+  constructor(public display: PerspectiveDisplay) {}
 
   get rowSpan() {
-    return this.display.columnLevelCount - this.parentColumns.length;
+    return this.display.columnLevelCount - this.parentNodes.length;
   }
 
   showParent(level: number) {
@@ -25,44 +31,155 @@ export class PerspectiveDisplayColumn {
   }
 
   get columnLevel() {
-    return this.parentColumns.length;
+    return this.parentNodes.length;
   }
 
-  constructor() {}
+  getParentName(level) {
+    return this.parentNodes[level]?.title;
+  }
+
+  // hasParentNode(node: PerspectiveTreeNode) {
+  //   return this.parentNodes.includes(node);
+  // }
+}
+
+class PerspectiveSubRowCollection {
+  rows: CollectedPerspectiveDisplayRow[] = [];
+  // startIndex = 0;
+}
+
+export class CollectedPerspectiveDisplayRow {
+  // startIndex = 0;
+  columnIndexes: number[] = [];
+  rowData: any[] = [];
+  // rowSpans: number[] = null;
+  subRowCollections: PerspectiveSubRowCollection[] = [];
+}
+
+export class PerspectiveDisplayRow {
+  constructor(public display: PerspectiveDisplay) {}
+
+  rowData: any[] = [];
+  rowSpans: number[] = null;
 }
 
 export class PerspectiveDisplay {
   columns: PerspectiveDisplayColumn[] = [];
+  rows: PerspectiveDisplayRow[] = [];
   readonly columnLevelCount: number;
 
-  constructor(public root: PerspectiveTreeNode, public rows: any[]) {
-    this.fillChildren(root.childNodes, []);
-    this.columnLevelCount = _max(this.columns.map(x => x.parentColumns.length)) + 1;
+  constructor(public root: PerspectiveTreeNode, rows: any[]) {
+    this.fillColumns(root.childNodes, []);
+    this.columnLevelCount = _max(this.columns.map(x => x.parentNodes.length)) + 1;
+    const collectedRows = this.collectRows(rows, root.childNodes);
+    console.log('COLLECTED', collectedRows);
+    // this.mergeRows(collectedRows);
   }
 
-  fillChildren(children: PerspectiveTreeNode[], parentColumns: string[]) {
+  fillColumns(children: PerspectiveTreeNode[], parentNodes: PerspectiveTreeNode[]) {
     for (const child of children) {
       if (child.isChecked) {
-        this.processColumn(child, parentColumns);
+        this.processColumn(child, parentNodes);
       }
     }
   }
 
-  processColumn(node: PerspectiveTreeNode, parentColumns: string[]) {
+  processColumn(node: PerspectiveTreeNode, parentNodes: PerspectiveTreeNode[]) {
     if (node.isExpandable) {
       const countBefore = this.columns.length;
-      this.fillChildren(node.childNodes, [...parentColumns, node.title]);
+      this.fillColumns(node.childNodes, [...parentNodes, node]);
 
       if (this.columns.length > countBefore) {
-        this.columns[countBefore].colSpanAtLevel[parentColumns.length] = this.columns.length - countBefore;
+        this.columns[countBefore].colSpanAtLevel[parentNodes.length] = this.columns.length - countBefore;
       }
     } else {
-      const column = new PerspectiveDisplayColumn();
+      const column = new PerspectiveDisplayColumn(this);
       column.title = node.columnTitle;
       column.dataField = node.dataField;
-      column.parentColumns = parentColumns;
+      column.parentNodes = parentNodes;
       column.display = this;
+      column.columnIndex = this.columns.length;
+      column.dataNode = node;
       this.columns.push(column);
     }
   }
+
+  findColumnIndexFromNode(node: PerspectiveTreeNode) {
+    return _findIndex(this.columns, x => x.dataNode.uniqueName == node.uniqueName);
+  }
+
+  collectRows(sourceRows: any[], nodes: PerspectiveTreeNode[]): CollectedPerspectiveDisplayRow[] {
+    const columnNodes = nodes.filter(x => x.isChecked && !x.isExpandable);
+    const treeNodes = nodes.filter(x => x.isChecked && x.isExpandable);
+
+    console.log(
+      'columnNodes',
+      columnNodes.map(x => x.fieldName)
+    );
+
+    const columnIndexes = columnNodes.map(node => this.findColumnIndexFromNode(node));
+
+    // const nodeStartIndexes = new WeakMap();
+    // for (const node of treeNodes) {
+    //   const column = this.columns.find(x => x.hasParentNode(node));
+    //   if (column) nodeStartIndexes.set(node, column.columnIndex);
+    // }
+
+    const res: CollectedPerspectiveDisplayRow[] = [];
+    for (const sourceRow of sourceRows) {
+      // console.log('PROCESS SOURCE', sourceRow);
+      const row = new CollectedPerspectiveDisplayRow();
+      // row.startIndex = startIndex;
+      row.rowData = columnNodes.map(node => sourceRow[node.codeName]);
+      row.columnIndexes = columnIndexes;
+
+      for (const node of treeNodes) {
+        // if (sourceRow.AlbumId == 1) {
+        //   if (node.fieldName == 'ArtistIdRef') {
+        //     console.log('XXX', sourceRow['ArtistIdRef']);
+        //     console.log(require('lodash').keys(sourceRow))
+        //     console.dir(sourceRow);
+        //   }
+        //   console.log(node.fieldName, sourceRow[node.fieldName], sourceRow);
+        // }
+        // console.log('sourceRow[node.fieldName]', sourceRow[node.fieldName]);
+        if (sourceRow[node.fieldName]) {
+          const subrows = new PerspectiveSubRowCollection();
+          // subrows.startIndex = nodeStartIndexes.get(node);
+          subrows.rows = this.collectRows(sourceRow[node.fieldName], node.childNodes);
+          row.subRowCollections.push(subrows);
+        }
+      }
+
+      res.push(row);
+    }
+
+    return res;
+  }
+
+  // mergeRows(rows: PerspectiveDisplayRow[]) {}
+
+  // flattenRows(sourceRow: CollectedPerspectiveDisplayRow) {
+  //   let rowIndex = 0;
+  //   const res = [];
+  //   while (true) {
+  //     const row = new PerspectiveDisplayRow(this);
+  //     row.rowData = _fill(Array(this.columns.length), undefined);
+  //     row.rowSpans = _fill(Array(this.columns.length), 0);
+  //     for (let colIndex = 0; colIndex < this.columns.length; colIndex++) {
+  //       if (colIndex < sourceRow.startIndex) {
+  //         continue;
+  //       }
+  //       if (colIndex < sourceRow.startIndex + sourceRow.rowData.length) {
+  //         if (rowIndex == 0) {
+  //           row.rowData[colIndex] = sourceRow.rowData[sourceRow.startIndex + colIndex];
+  //           row.rowSpans[colIndex] = 1;
+  //         } else {
+  //           row.rowSpans[colIndex] += 1;
+  //         }
+  //       }
+  //       const subrows = sourceRow.subRowCollections.find(x=>x.);
+  //     }
+  //   }
+  // }
 }
diff --git a/packages/web/src/perspectives/PerspectiveTable.svelte b/packages/web/src/perspectives/PerspectiveTable.svelte
index fef44d2c3..43488bf04 100644
--- a/packages/web/src/perspectives/PerspectiveTable.svelte
+++ b/packages/web/src/perspectives/PerspectiveTable.svelte
@@ -33,7 +33,7 @@
 
     for (const child of node.childNodes) {
       if (child.isExpandable && child.isChecked) {
-        loadLevelData(child, rows);
+        await loadLevelData(child, rows);
         // loadProps.push(child.getNodeLoadProps());
       }
     }
@@ -86,7 +86,7 @@
                 <th rowspan={column.rowSpan}>{column.title}</th>
               {/if}
               {#if column.showParent(columnLevel)}
-                <th colspan={column.getColSpan(columnLevel)}>{column.parentColumns[columnLevel]}</th>
+                <th colspan={column.getColSpan(columnLevel)}>{column.getParentName(columnLevel)}</th>
               {/if}
             {/each}
           </tr>