@visactor/vtable 1.15.2 → 1.16.0-alpha.0

package/es/layout/pivot-header-layout.js

@@ -4,11 +4,11 @@ import { HierarchyState } from "../ts-types";
 
 import { IndicatorDimensionKeyPlaceholder } from "../tools/global";
 
-import { diffCellAddress } from "../tools/diff-cell";
+import { diffCellAddress, diffCellAddressForGridTree, diffCellAddressForGridTreeOnColumn } from "../tools/diff-cell";
 
 import { checkHasCartesianChart, checkHasChart, getChartAxes, getChartDataId, getChartSpec, getRawChartSpec, isCartesianChart, isHasCartesianChartInline, isNoChartDataRenderNothing, isShareChartSpec } from "./chart-helper/get-chart-spec";
 
-import { DimensionTree, countLayoutTree, dealHeader, dealHeaderForTreeMode, generateLayoutTree } from "./tree-helper";
+import { DimensionTree, countLayoutTree, dealHeader, dealHeaderForGridTreeMode, dealHeaderForTreeMode, generateLayoutTree } from "./tree-helper";
 
 import { cloneDeep, isArray, isValid } from "@visactor/vutils";
 
@@ -23,7 +23,7 @@ const defaultDimension = {
 
 export class PivotHeaderLayoutMap {
     constructor(table, dataset, columnDimensionTree, rowDimensionTree) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         this.colIndex = 0, this._showHeader = !0, this.columnHeaderObjs = [], this.rowHeaderObjs = [], 
         this._cornerHeaderCellFullPathIds = [], this._columnHeaderCellFullPathIds = [], 
         this._rowHeaderCellFullPathIds = [], this._rowHeaderCellFullPathIds_FULL = [], this._cornerHeaderCellIds = [], 
@@ -48,14 +48,16 @@ export class PivotHeaderLayoutMap {
         this.showColumnHeader = null === (_g = table.options.showColumnHeader) || void 0 === _g || _g, 
         this.rowHeaderTitle = table.options.rowHeaderTitle, this.columnHeaderTitle = table.options.columnHeaderTitle, 
         this.rowHierarchyType = null !== (_h = table.options.rowHierarchyType) && void 0 !== _h ? _h : "grid", 
-        this.rowExpandLevel = null !== (_j = table.options.rowExpandLevel) && void 0 !== _j ? _j : 1, 
-        this.rowHierarchyIndent = null !== (_k = table.options.rowHierarchyIndent) && void 0 !== _k ? _k : 20, 
+        this.columnHierarchyType = null !== (_j = table.options.columnHierarchyType) && void 0 !== _j ? _j : "grid", 
+        this.rowExpandLevel = null !== (_k = table.options.rowExpandLevel) && void 0 !== _k ? _k : 1, 
+        this.columnExpandLevel = null !== (_l = table.options.columnExpandLevel) && void 0 !== _l ? _l : 1, 
+        this.rowHierarchyIndent = null !== (_m = table.options.rowHierarchyIndent) && void 0 !== _m ? _m : 20, 
         this.rowHierarchyTextStartAlignment = table.options.rowHierarchyTextStartAlignment, 
         this.cornerSetting = Object.assign({
             titleOnDimension: "column",
             forceShowHeader: !1
         }, table.options.corner), dataset && (this.rowTree = dataset.rowHeaderTree, this.columnTree = dataset.colHeaderTree), 
-        null === (_l = this.indicatorsDefine) || void 0 === _l || _l.forEach((indicator => {
+        null === (_o = this.indicatorsDefine) || void 0 === _o || _o.forEach((indicator => {
             "string" == typeof indicator ? this.indicatorKeys.push(indicator) : this.indicatorKeys.push(indicator.indicatorKey);
         })), this.columnDimensionTree = columnDimensionTree, this.rowDimensionTree = rowDimensionTree, 
         this.colDimensionKeys = this.columnDimensionTree.dimensionKeysIncludeVirtual.valueArr(), 
@@ -70,7 +72,7 @@ export class PivotHeaderLayoutMap {
             return !1;
         }))), this.resetColumnHeaderLevelCount(), this._generateColHeaderIds(), this.colIndex = 0, 
         this._generateRowHeaderIds(), this._rowHeaderCellFullPathIds_FULL = transpose(this._rowHeaderCellFullPathIds_FULL), 
-        "tree" === table.options.rowHierarchyType && (null === (_m = this.extensionRows) || void 0 === _m ? void 0 : _m.length) >= 1 && (this.generateExtensionRowTree(), 
+        "tree" === table.options.rowHierarchyType && (null === (_p = this.extensionRows) || void 0 === _p ? void 0 : _p.length) >= 1 && (this.generateExtensionRowTree(), 
         this.extensionRows.forEach((extensionRow => {
             const rowKeys = [];
             extensionRow.rows.forEach((row => {
@@ -78,17 +80,17 @@ export class PivotHeaderLayoutMap {
             })), this._extensionRowDimensionKeys.push(rowKeys), this.fullRowDimensionKeys = this.fullRowDimensionKeys.concat(rowKeys);
         }))), this.sharedVar.seqId = Math.max(this.sharedVar.seqId, this._headerObjects.length);
         let rowDimensionKeys, colDimensionKeys = this.columnDimensionTree.dimensionKeysIncludeVirtual.valueArr();
-        !this.dataset || this._table.isPivotChart() || 0 !== (null !== (_p = null === (_o = this.dataset.records) || void 0 === _o ? void 0 : _o.length) && void 0 !== _p ? _p : 0) || this.dataset.customColTree || (colDimensionKeys = this.columnsDefine.map((define => "string" == typeof define ? define : define.dimensionKey)), 
+        !this.dataset || this._table.isPivotChart() || 0 !== (null !== (_r = null === (_q = this.dataset.records) || void 0 === _q ? void 0 : _q.length) && void 0 !== _r ? _r : 0) || this.dataset.customColTree || (colDimensionKeys = this.columnsDefine.map((define => "string" == typeof define ? define : define.dimensionKey)), 
         this.indicatorsAsCol && colDimensionKeys.push(this.indicatorDimensionKey)), colDimensionKeys = this.columnHeaderTitle ? [ "" ].concat(colDimensionKeys) : colDimensionKeys;
         let extensionRowDimensions = [];
-        if ("tree" === this.rowHierarchyType && (null === (_q = this.extensionRows) || void 0 === _q ? void 0 : _q.length) >= 1) {
+        if ("tree" === this.rowHierarchyType && (null === (_s = this.extensionRows) || void 0 === _s ? void 0 : _s.length) >= 1) {
             const rowTreeFirstKey = [];
             rowTreeFirstKey.push(this.rowDimensionKeys[0]), this._extensionRowDimensionKeys.forEach((extensionRowKeys => {
                 rowTreeFirstKey.push(extensionRowKeys[0]);
             })), extensionRowDimensions = this.extensionRows.reduce(((dimensions, cur) => dimensions.concat(cur.rows)), []), 
             rowDimensionKeys = this.rowHeaderTitle ? [ "" ].concat(rowTreeFirstKey) : rowTreeFirstKey;
         } else rowDimensionKeys = this.rowDimensionTree.dimensionKeysIncludeVirtual.valueArr(), 
-        !this.dataset || this._table.isPivotChart() || 0 !== (null !== (_s = null === (_r = this.dataset.records) || void 0 === _r ? void 0 : _r.length) && void 0 !== _s ? _s : 0) || this.dataset.customRowTree || (rowDimensionKeys = this.rowsDefine.map((define => "string" == typeof define ? define : define.dimensionKey)), 
+        !this.dataset || this._table.isPivotChart() || 0 !== (null !== (_u = null === (_t = this.dataset.records) || void 0 === _t ? void 0 : _t.length) && void 0 !== _u ? _u : 0) || this.dataset.customRowTree || (rowDimensionKeys = this.rowsDefine.map((define => "string" == typeof define ? define : define.dimensionKey)), 
         this.indicatorsAsCol || rowDimensionKeys.push(this.indicatorDimensionKey)), rowDimensionKeys = this.rowHeaderTitle ? [ "" ].concat(rowDimensionKeys) : rowDimensionKeys;
         this.cornerHeaderObjs = this._addCornerHeaders(colDimensionKeys, rowDimensionKeys, this.columnsDefine.concat(...this.rowsDefine, ...extensionRowDimensions)), 
         this.colIndex = 0, this._headerObjectMap = this._headerObjects.reduce(((o, e) => (o[e.id] = e, 
@@ -141,10 +143,13 @@ export class PivotHeaderLayoutMap {
     }
     _generateColHeaderIds() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        if ((null === (_a = this.columnDimensionTree.tree.children) || void 0 === _a ? void 0 : _a.length) >= 1) {
+        if ((null === (_a = this.columnDimensionTree.tree.children) || void 0 === _a ? void 0 : _a.length) >= 1) if ("grid-tree" === this.columnHierarchyType) {
+            const startCol = 0;
+            this._addHeadersForGridTreeMode(this._columnHeaderCellFullPathIds, startCol, this.columnDimensionTree.tree.children, [], this.columnDimensionTree.totalLevel, this._getColumnHeaderTreeExpandedMaxLevelCount(), !0, this.columnsDefine, this.columnHeaderObjs, !1);
+        } else {
             let startRow = 0;
-            if (this.dataset && !this._table.isPivotChart() && 0 === (null !== (_c = null === (_b = this.dataset.records) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : 0) && !this.dataset.customColTree && !this.dataset.customRowTree && this.indicatorsAsCol && this.columnDimensionTree.totalLevel < this.columnHeaderLevelCount) {
-                startRow = this.columnHeaderLevelCount - this.columnDimensionTree.totalLevel;
+            if (this.dataset && !this._table.isPivotChart() && 0 === (null !== (_c = null === (_b = this.dataset.records) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : 0) && !this.dataset.customColTree && !this.dataset.customRowTree && this.indicatorsAsCol && this._getColumnHeaderTreeExpandedMaxLevelCount() < this.columnHeaderLevelCount) {
+                startRow = this.columnHeaderLevelCount - this._getColumnHeaderTreeExpandedMaxLevelCount();
                 for (let i = 0; i < startRow; i++) this._columnHeaderCellFullPathIds.unshift([]);
             }
             this._addHeaders(this._columnHeaderCellFullPathIds, startRow, this.columnDimensionTree.tree.children, [], this.columnHeaderObjs);
@@ -170,10 +175,13 @@ export class PivotHeaderLayoutMap {
     }
     _generateRowHeaderIds() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if ((null === (_a = this.rowDimensionTree.tree.children) || void 0 === _a ? void 0 : _a.length) >= 1) if ("tree" === this.rowHierarchyType) this._addHeadersForTreeMode(this._rowHeaderCellFullPathIds_FULL, 0, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, !0, this.rowsDefine, this.rowHeaderObjs); else {
+        if ((null === (_a = this.rowDimensionTree.tree.children) || void 0 === _a ? void 0 : _a.length) >= 1) if ("tree" === this.rowHierarchyType) this._addHeadersForTreeMode(this._rowHeaderCellFullPathIds_FULL, 0, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, !0, this.rowsDefine, this.rowHeaderObjs); else if ("grid-tree" === this.rowHierarchyType) {
+            const startRow = 0;
+            this._addHeadersForGridTreeMode(this._rowHeaderCellFullPathIds_FULL, startRow, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, this._getRowHeaderTreeExpandedMaxLevelCount(), !0, this.rowsDefine, this.rowHeaderObjs, !0);
+        } else {
             let startRow = 0;
-            if (this.dataset && !this._table.isPivotChart() && 0 === (null !== (_c = null === (_b = this.dataset.records) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : 0) && !this.dataset.customColTree && !this.dataset.customRowTree && !this.indicatorsAsCol && this.rowDimensionTree.totalLevel < this.rowHeaderLevelCount) {
-                startRow = this.rowHeaderLevelCount - this.rowDimensionTree.totalLevel;
+            if (this.dataset && !this._table.isPivotChart() && 0 === (null !== (_c = null === (_b = this.dataset.records) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : 0) && !this.dataset.customColTree && !this.dataset.customRowTree && !this.indicatorsAsCol && this._getRowHeaderTreeExpandedMaxLevelCount() < this.rowHeaderLevelCount) {
+                startRow = this.rowHeaderLevelCount - this._getRowHeaderTreeExpandedMaxLevelCount();
                 for (let i = 0; i < startRow; i++) this._rowHeaderCellFullPathIds_FULL.unshift([]);
             }
             this._addHeaders(this._rowHeaderCellFullPathIds_FULL, startRow, this.rowDimensionTree.tree.children, [], this.rowHeaderObjs);
@@ -197,6 +205,12 @@ export class PivotHeaderLayoutMap {
             this.rowHeaderObjs.push(cell), this._headerObjects[id] = cell;
         }
     }
+    _getRowHeaderTreeExpandedMaxLevelCount() {
+        return "tree" === this.rowHierarchyType ? 1 : "grid-tree" === this.rowHierarchyType ? "row" === this.cornerSetting.titleOnDimension ? this.rowDimensionTree.totalLevel : this.indicatorsAsCol ? this.rowDimensionTree.expandedMaxLevel : this.rowDimensionTree.expandedMaxLevel + 1 : this.rowDimensionTree.totalLevel;
+    }
+    _getColumnHeaderTreeExpandedMaxLevelCount() {
+        return "grid-tree" === this.columnHierarchyType ? "column" === this.cornerSetting.titleOnDimension ? this.columnDimensionTree.totalLevel : !1 === this.indicatorsAsCol ? this.columnDimensionTree.expandedMaxLevel : this.columnDimensionTree.expandedMaxLevel + 1 : this.columnDimensionTree.totalLevel;
+    }
     _addHeaders(_headerCellIds, row, header, roots, results) {
         const _this = this;
         _headerCellIds[row] || function(row) {
@@ -223,6 +237,19 @@ export class PivotHeaderLayoutMap {
             dealHeaderForTreeMode(hd, _headerCellIds, results, roots, row, totalLevel, show, dimensions, this);
         }
     }
+    _addHeadersForGridTreeMode(_headerCellIds, row, header, roots, totalLevel, expandedMaxLevel, show, dimensions, results, isRowTree) {
+        const _this = this;
+        _headerCellIds[row] || function(row) {
+            const newRow = _headerCellIds[row] = [];
+            if (0 === _this.colIndex) return newRow;
+            const prev = _headerCellIds[row - 1];
+            for (let col = 0; col < (null == prev ? void 0 : prev.length); col++) newRow[col] = prev[col];
+        }(row);
+        for (let i = 0; i < header.length; i++) {
+            const hd = header[i];
+            dealHeaderForGridTreeMode(hd, _headerCellIds, results, roots, row, totalLevel, expandedMaxLevel, show, dimensions, isRowTree, this.indicatorsAsCol, this);
+        }
+    }
     _addCornerHeaders(colDimensionKeys, rowDimensionKeys, dimensions) {
         var _a, _b;
         const results = [];
@@ -654,8 +681,9 @@ export class PivotHeaderLayoutMap {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (this.showHeader && this.showColumnHeader) {
             if (this._table.isPivotChart() && this.indicatorsAsCol && !(null === (_b = null === (_a = this.dataset) || void 0 === _a ? void 0 : _a.colKeys) || void 0 === _b ? void 0 : _b.length) && 0 === (null === (_d = null === (_c = this.columnDimensionTree) || void 0 === _c ? void 0 : _c.tree) || void 0 === _d ? void 0 : _d.level) && !this.hasTwoIndicatorAxes) return void (this.columnHeaderLevelCount = 0);
-            let count = this.indicatorsAsCol && this.hideIndicatorName && this.colDimensionKeys[this.colDimensionKeys.length - 1] === this.indicatorDimensionKey ? this.columnDimensionTree.totalLevel - 1 : this.columnDimensionTree.totalLevel;
-            return 0 === count && this.dataset && !(null === (_e = this.dataset.customColTree) || void 0 === _e ? void 0 : _e.length) ? "row" === this.cornerSetting.titleOnDimension && this.cornerSetting.forceShowHeader ? count = 1 : this._table.isPivotChart() || 0 !== (null !== (_g = null === (_f = this.dataset.records) || void 0 === _f ? void 0 : _f.length) && void 0 !== _g ? _g : 0) || "column" !== this.cornerSetting.titleOnDimension && "all" !== this.cornerSetting.titleOnDimension || (count = null !== (_h = this.columnsDefine.length) && void 0 !== _h ? _h : 0) : !this.dataset || this._table.isPivotChart() || 0 !== (null !== (_k = null === (_j = this.dataset.records) || void 0 === _j ? void 0 : _j.length) && void 0 !== _k ? _k : 0) || this.dataset.customColTree || "column" !== this.cornerSetting.titleOnDimension && "all" !== this.cornerSetting.titleOnDimension || (count = null !== (_l = this.columnsDefine.length) && void 0 !== _l ? _l : 0, 
+            let count = this._getColumnHeaderTreeExpandedMaxLevelCount();
+            return this.indicatorsAsCol && this.hideIndicatorName && this.colDimensionKeys[this.colDimensionKeys.length - 1] === this.indicatorDimensionKey && count--, 
+            0 === count && this.dataset && !(null === (_e = this.dataset.customColTree) || void 0 === _e ? void 0 : _e.length) ? "row" === this.cornerSetting.titleOnDimension && this.cornerSetting.forceShowHeader ? count = 1 : this._table.isPivotChart() || 0 !== (null !== (_g = null === (_f = this.dataset.records) || void 0 === _f ? void 0 : _f.length) && void 0 !== _g ? _g : 0) || "column" !== this.cornerSetting.titleOnDimension && "all" !== this.cornerSetting.titleOnDimension || (count = null !== (_h = this.columnsDefine.length) && void 0 !== _h ? _h : 0) : !this.dataset || this._table.isPivotChart() || 0 !== (null !== (_k = null === (_j = this.dataset.records) || void 0 === _j ? void 0 : _j.length) && void 0 !== _k ? _k : 0) || this.dataset.customColTree || "column" !== this.cornerSetting.titleOnDimension && "all" !== this.cornerSetting.titleOnDimension || (count = null !== (_l = this.columnsDefine.length) && void 0 !== _l ? _l : 0, 
             !this.hideIndicatorName && this.indicatorsAsCol && count++), this.columnHeaderTitle && (count += 1), 
             this._table.isPivotChart() && this.indicatorsAsCol && !this.hasTwoIndicatorAxes && checkHasCartesianChart(this.indicatorsDefine) && (count -= 1), 
             void (this.columnHeaderLevelCount = count);
@@ -669,7 +697,7 @@ export class PivotHeaderLayoutMap {
                 const extensionRowCount = null !== (_b = null === (_a = this.extensionRows) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0;
                 return this.rowHeaderTitle ? void (this.rowHeaderLevelCount = 2 + extensionRowCount) : void (this.rowHeaderLevelCount = 1 + extensionRowCount);
             }
-            const rowLevelCount = this.rowDimensionTree.totalLevel;
+            const rowLevelCount = this._getRowHeaderTreeExpandedMaxLevelCount();
             let count = rowLevelCount;
             return 0 === count && this.dataset && !(null === (_c = this.dataset.customRowTree) || void 0 === _c ? void 0 : _c.length) ? "column" === this.cornerSetting.titleOnDimension && this.cornerSetting.forceShowHeader ? count = 1 : this._table.isPivotChart() || 0 !== (null !== (_e = null === (_d = this.dataset.records) || void 0 === _d ? void 0 : _d.length) && void 0 !== _e ? _e : 0) || "row" !== this.cornerSetting.titleOnDimension && "all" !== this.cornerSetting.titleOnDimension || (count = null !== (_f = this.rowsDefine.length) && void 0 !== _f ? _f : 0) : !this.dataset || this._table.isPivotChart() || 0 !== (null !== (_h = null === (_g = this.dataset.records) || void 0 === _g ? void 0 : _g.length) && void 0 !== _h ? _h : 0) || this.dataset.customRowTree || "row" !== this.cornerSetting.titleOnDimension && "all" !== this.cornerSetting.titleOnDimension || (count = this.rowsDefine.length, 
             this.hideIndicatorName || this.indicatorsAsCol || count++), !this.indicatorsAsCol && this.hideIndicatorName && this.rowDimensionKeys[this.rowDimensionKeys.length - 1] === this.indicatorDimensionKey && (count = rowLevelCount - 1), 
@@ -691,7 +719,7 @@ export class PivotHeaderLayoutMap {
     }
     get colCount() {
         var _a, _b, _c;
-        return (this.columnDimensionTree.totalLevel > 0 || this._table.isPivotChart() || (null === (_a = this.dataset.records) || void 0 === _a ? void 0 : _a.length) > 0 || this.dataset.records && !Array.isArray(this.dataset.records) ? null !== (_c = null === (_b = this._columnHeaderCellIds[0]) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : this.columnDimensionTree.tree.size : 0) + this.rowHeaderLevelCount + this.rightHeaderColCount + this.leftRowSeriesNumberColumnCount;
+        return (this._getColumnHeaderTreeExpandedMaxLevelCount() > 0 || this._table.isPivotChart() || (null === (_a = this.dataset.records) || void 0 === _a ? void 0 : _a.length) > 0 || this.dataset.records && !Array.isArray(this.dataset.records) ? null !== (_c = null === (_b = this._columnHeaderCellIds[0]) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : this.columnDimensionTree.tree.size : 0) + this.rowHeaderLevelCount + this.rightHeaderColCount + this.leftRowSeriesNumberColumnCount;
     }
     get rowCount() {
         var _a, _b, _c, _d;
@@ -899,8 +927,18 @@ export class PivotHeaderLayoutMap {
         }
         let colPath = this.getColHeaderPathCache(col, row), rowPath = this.getRowHeaderPathCache(col, row);
         const recordCol = this.getBodyIndexByCol(col), recordRow = this.getBodyIndexByRow(row) + this.currentPageStartIndex;
-        if (!colPath && row >= 0 && recordCol >= 0 && (colPath = this.columnDimensionTree.getTreePath(recordCol, this.showHeader && this.showColumnHeader ? row - (this.columnHeaderTitle ? 1 : 0) : this.columnDimensionTree.totalLevel), 
-        this.setColHeaderPathCache(col, row, colPath)), !rowPath && col >= 0 && recordRow >= 0) {
+        if (!colPath && row >= 0 && recordCol >= 0) {
+            if (colPath = [], "grid-tree" === this.columnHierarchyType) {
+                const col_pathIds = [];
+                this._columnHeaderCellFullPathIds.map((arr => {
+                    col_pathIds.push(arr[recordCol]);
+                }));
+                const findedRowPath = this.getTreePathByCellIds(col_pathIds);
+                colPath.push(...findedRowPath);
+            } else colPath = this.columnDimensionTree.getTreePath(recordCol, this.showHeader && this.showColumnHeader ? row - (this.columnHeaderTitle ? 1 : 0) : this.columnDimensionTree.totalLevel);
+            this.setColHeaderPathCache(col, row, colPath);
+        }
+        if (!rowPath && col >= 0 && recordRow >= 0) {
             if (rowPath = [], "tree" === this.rowHierarchyType) {
                 const row_pathIds = this._rowHeaderCellFullPathIds[recordRow];
                 let findTree = this.rowDimensionTree, level = 0;
@@ -912,10 +950,13 @@ export class PivotHeaderLayoutMap {
                         if (!(null == hd ? void 0 : hd.parentCellId)) break;
                         pathIds.unshift(hd.parentCellId), cellId = hd.parentCellId;
                     }
-                    const findedRowPath = findTree.getTreePathByCellIds(pathIds);
+                    const findedRowPath = this.getTreePathByCellIds(pathIds);
                     rowPath.push(...findedRowPath), findTree = this._rowHeaderExtensionTree[row_pathIds[level]], 
                     level++;
                 }
+            } else if ("grid-tree" === this.rowHierarchyType) {
+                const row_pathIds = this._rowHeaderCellFullPathIds[recordRow], findedRowPath = this.getTreePathByCellIds(row_pathIds);
+                rowPath.push(...findedRowPath);
             } else rowPath = this.rowDimensionTree.getTreePath(recordRow, this.showHeader && this.showRowHeader ? col - (this.rowHeaderTitle ? 1 : 0) - this.leftRowSeriesNumberColumnCount : this.rowDimensionTree.totalLevel);
             this.setRowHeaderPathCache(col, row, rowPath);
         }
@@ -925,6 +966,16 @@ export class PivotHeaderLayoutMap {
             cellLocation: this.getCellLocation(col, row)
         };
     }
+    getTreePathByCellIds(row_pathIds) {
+        const paths = [];
+        for (let i = 0; i < row_pathIds.length; i++) {
+            const id = row_pathIds[i];
+            if (i > 0 && id === row_pathIds[i - 1]) continue;
+            const hd = this._headerObjects[id];
+            (null == hd ? void 0 : hd.define) && paths.push(hd.define);
+        }
+        return paths;
+    }
     getCellHeaderPaths(col, row) {
         var _a, _b;
         const headerPathsWidthNode = this.getCellHeaderPathsWithTreeNode(col, row), headerPaths = {
@@ -983,16 +1034,19 @@ export class PivotHeaderLayoutMap {
     toggleHierarchyState(col, row) {
         var _a, _b, _c, _d, _e, _f;
         this.colIndex = 0;
-        const oldRowHeaderCellIds = this._rowHeaderCellFullPathIds_FULL.slice(0), oldRowHeaderCellPositons = oldRowHeaderCellIds.map(((id, row) => ({
+        const lastLevelIndex = (this.indicatorsAsCol ? this.rowHeaderLevelCount - 1 : this.rowHeaderLevelCount - 2) - this.leftRowSeriesNumberColumnCount, oldRowHeaderCellIds = this._rowHeaderCellFullPathIds_FULL.slice(0), oldRowHeaderCellPositons = oldRowHeaderCellIds.map(((id, row) => ({
             col: col,
             row: row + this.columnHeaderLevelCount
         }))), hd = this.getHeader(col, row);
         if (hd.define.hierarchyState = hd.define.hierarchyState === HierarchyState.collapse ? HierarchyState.expand : HierarchyState.collapse, 
-        this.rowDimensionTree.reset(this.rowDimensionTree.tree.children), this._rowHeaderCellFullPathIds_FULL = [], 
-        this.rowDimensionKeys = this.rowDimensionTree.dimensionKeysIncludeVirtual.valueArr(), 
+        this.rowDimensionTree.reset(this.rowDimensionTree.tree.children), this.resetRowHeaderLevelCount(), 
+        this._rowHeaderCellFullPathIds_FULL = [], this.rowDimensionKeys = this.rowDimensionTree.dimensionKeysIncludeVirtual.valueArr(), 
         this.fullRowDimensionKeys = [], this.fullRowDimensionKeys = this.fullRowDimensionKeys.concat(this.rowDimensionKeys), 
-        this._addHeadersForTreeMode(this._rowHeaderCellFullPathIds_FULL, 0, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, !0, this.rowsDefine, this.rowHeaderObjs), 
-        this.rowHeaderTitle) {
+        "tree" === this.rowHierarchyType) this._addHeadersForTreeMode(this._rowHeaderCellFullPathIds_FULL, 0, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, !0, this.rowsDefine, this.rowHeaderObjs); else if ("grid-tree" === this.rowHierarchyType) {
+            const startRow = 0;
+            this._addHeadersForGridTreeMode(this._rowHeaderCellFullPathIds_FULL, startRow, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, this._getRowHeaderTreeExpandedMaxLevelCount(), !0, this.rowsDefine, this.rowHeaderObjs, !0);
+        }
+        if (this.rowHeaderTitle) {
             const id = ++this.sharedVar.seqId, firstColIds = Array(this.rowCount - this.columnHeaderLevelCount).fill(id);
             this._rowHeaderCellFullPathIds_FULL.unshift(firstColIds);
             const cell = {
@@ -1011,12 +1065,53 @@ export class PivotHeaderLayoutMap {
             };
             this.rowHeaderObjs.push(cell), this._headerObjects[id] = cell;
         }
-        this._rowHeaderCellFullPathIds_FULL = transpose(this._rowHeaderCellFullPathIds_FULL), 
+        let diffCell;
+        if (this._rowHeaderCellFullPathIds_FULL = transpose(this._rowHeaderCellFullPathIds_FULL), 
         "tree" === this.rowHierarchyType && (null === (_f = this.extensionRows) || void 0 === _f ? void 0 : _f.length) >= 1 && this.generateExtensionRowTree(), 
         this.colIndex = 0, this._headerObjectMap = this._headerObjects.reduce(((o, e) => (o[e.id] = e, 
-        o)), {}), this._CellHeaderPathMap = new Map, this._largeCellRangeCache.length = 0;
-        const diffCell = diffCellAddress(col, row, oldRowHeaderCellIds.map((oldCellId => oldCellId[col - this.leftRowSeriesNumberColumnCount])), this._rowHeaderCellFullPathIds_FULL.map((newCellId => newCellId[col - this.leftRowSeriesNumberColumnCount])), oldRowHeaderCellPositons, this);
+        o)), {}), this._CellHeaderPathMap = new Map, this._largeCellRangeCache.length = 0, 
+        "tree" === this.rowHierarchyType) diffCell = diffCellAddress(col, row, oldRowHeaderCellIds.map((oldCellId => oldCellId[col - this.leftRowSeriesNumberColumnCount])), this._rowHeaderCellFullPathIds_FULL.map((newCellId => newCellId[col - this.leftRowSeriesNumberColumnCount])), oldRowHeaderCellPositons, this); else {
+            const new_lastLevelIndex = (this.indicatorsAsCol ? this.rowHeaderLevelCount - 1 : this.rowHeaderLevelCount - 2) - this.leftRowSeriesNumberColumnCount;
+            diffCell = diffCellAddressForGridTree(col, row, oldRowHeaderCellIds.map((oldCellId => oldCellId[lastLevelIndex])), this._rowHeaderCellFullPathIds_FULL.map((newCellId => newCellId[new_lastLevelIndex])), oldRowHeaderCellPositons, this);
+        }
         return this.generateCellIdsConsiderHideHeader(), this.setPagination(this.pagination), 
+        "grid-tree" === this.rowHierarchyType && this.setColumnWidths(), diffCell;
+    }
+    toggleHierarchyStateForColumnTree(col, row) {
+        var _a, _b, _c, _d, _e;
+        this.colIndex = 0;
+        const lastLevelIndex = this.indicatorsAsCol ? this.columnHeaderLevelCount - 2 : this.columnHeaderLevelCount - 1, oldColumnHeaderCellIds = this._columnHeaderCellFullPathIds.slice(0), oldColumnHeaderCellPositons = oldColumnHeaderCellIds[this.columnHeaderLevelCount - 1].map(((id, col) => ({
+            col: col + this.rowHeaderLevelCount,
+            row: row
+        }))), hd = this.getHeader(col, row);
+        if (hd.define.hierarchyState = hd.define.hierarchyState === HierarchyState.collapse ? HierarchyState.expand : HierarchyState.collapse, 
+        this.columnDimensionTree.reset(this.columnDimensionTree.tree.children), this.resetColumnHeaderLevelCount(), 
+        this._columnHeaderCellFullPathIds = [], this.colDimensionKeys = this.columnDimensionTree.dimensionKeysIncludeVirtual.valueArr(), 
+        "grid-tree" === this.columnHierarchyType) {
+            const startRow = 0;
+            this._addHeadersForGridTreeMode(this._columnHeaderCellFullPathIds, startRow, this.columnDimensionTree.tree.children, [], this.columnDimensionTree.totalLevel, this._getColumnHeaderTreeExpandedMaxLevelCount(), !0, this.columnsDefine, this.columnHeaderObjs, !1);
+        }
+        if (this.columnHeaderTitle) {
+            const id = ++this.sharedVar.seqId, firstRowIds = Array(this.colCount - this.rowHeaderLevelCount - this.rightFrozenColCount).fill(id);
+            this._columnHeaderCellFullPathIds.unshift(firstRowIds);
+            const cell = {
+                id: id,
+                title: "string" == typeof this.columnHeaderTitle.title ? this.columnHeaderTitle.title : this.columnsDefine.reduce(((title, value) => "string" == typeof value ? title : title + (title ? `/${value.title}` : `${value.title}`)), ""),
+                field: void 0,
+                headerType: null !== (_b = null === (_a = this.columnHeaderTitle) || void 0 === _a ? void 0 : _a.headerType) && void 0 !== _b ? _b : "text",
+                style: null === (_c = this.columnHeaderTitle) || void 0 === _c ? void 0 : _c.headerStyle,
+                define: {
+                    id: id,
+                    disableHeaderHover: !!(null === (_d = this.columnHeaderTitle) || void 0 === _d ? void 0 : _d.disableHeaderHover),
+                    disableHeaderSelect: !!(null === (_e = this.columnHeaderTitle) || void 0 === _e ? void 0 : _e.disableHeaderSelect)
+                }
+            };
+            this.columnHeaderObjs.push(cell), this._headerObjects[id] = cell;
+        }
+        this.colIndex = 0, this._headerObjectMap = this._headerObjects.reduce(((o, e) => (o[e.id] = e, 
+        o)), {}), this._CellHeaderPathMap = new Map, this._largeCellRangeCache.length = 0;
+        const new_lastLevelIndex = this.indicatorsAsCol ? this.columnHeaderLevelCount - 2 : this.columnHeaderLevelCount - 1, diffCell = diffCellAddressForGridTreeOnColumn(col, row, oldColumnHeaderCellIds[lastLevelIndex], this._columnHeaderCellFullPathIds[new_lastLevelIndex], oldColumnHeaderCellPositons, this);
+        return this.generateCellIdsConsiderHideHeader(), "grid-tree" === this.columnHierarchyType && this.setColumnWidths(), 
         diffCell;
     }
     isHeaderForColWidth(col, row) {
@@ -1595,8 +1690,8 @@ export class PivotHeaderLayoutMap {
         null === (_a = this.rowTree) || void 0 === _a || _a.forEach(((node, index) => {
             const beforeRowDimension = beforeRowDimensions.find((item => item.dimensionKey === node.dimensionKey && item.value === node.value));
             beforeRowDimension && this._table._syncHierarchyState(beforeRowDimension, node);
-        })), this.columnDimensionTree = new DimensionTree(null !== (_b = this.columnTree) && void 0 !== _b ? _b : [], this.sharedVar), 
-        this.rowDimensionTree = new DimensionTree(null !== (_c = this.rowTree) && void 0 !== _c ? _c : [], this.sharedVar, this.rowHierarchyType, "tree" === this.rowHierarchyType ? this.rowExpandLevel : void 0), 
+        })), this.columnDimensionTree = new DimensionTree(null !== (_b = this.columnTree) && void 0 !== _b ? _b : [], this.sharedVar, this.columnHierarchyType, "grid" !== this.columnHierarchyType ? this.columnExpandLevel : void 0), 
+        this.rowDimensionTree = new DimensionTree(null !== (_c = this.rowTree) && void 0 !== _c ? _c : [], this.sharedVar, this.rowHierarchyType, "grid" !== this.rowHierarchyType ? this.rowExpandLevel : void 0), 
         this.resetColumnHeaderLevelCount(), this._generateColHeaderIds(), this.colIndex = 0, 
         this._generateRowHeaderIds(), this._rowHeaderCellFullPathIds_FULL = transpose(this._rowHeaderCellFullPathIds_FULL), 
         this._headerObjectMap = this._headerObjects.reduce(((o, e) => (o[e.id] = e, o)), {}), 
@@ -1636,6 +1731,7 @@ export class PivotHeaderLayoutMap {
         }
     }
     generateCellIdsConsiderHideHeader() {
+        var _a, _b, _c, _d;
         if (this._columnHeaderCellIds = this._columnHeaderCellFullPathIds.slice(), !this.showColumnHeader) if (this.indicatorsAsCol && !this.hideIndicatorName) {
             const indicatorIndex = this.colDimensionKeys.indexOf(IndicatorDimensionKeyPlaceholder), indicatorIds = this._columnHeaderCellIds.splice(indicatorIndex, 1);
             this._columnHeaderCellIds.splice(0, this._columnHeaderCellIds.length), this._columnHeaderCellIds.push(indicatorIds[0]);
@@ -1666,6 +1762,15 @@ export class PivotHeaderLayoutMap {
                 _cellIds.splice(0, _cellIds.length), _cellIds.push(indicator[0]), this._cornerHeaderCellIds[index] = _cellIds;
             }));
         }
+        if ("grid-tree" === this.rowHierarchyType && "column" === this.cornerSetting.titleOnDimension) this._cornerHeaderCellIds[0].length < this._rowHeaderCellIds[0].length ? this._cornerHeaderCellIds.forEach(((cellIds, index) => {
+            const oldLength = cellIds.length;
+            cellIds.length = this._rowHeaderCellIds[0].length, cellIds.fill(cellIds[0], oldLength);
+        })) : this._cornerHeaderCellIds[0].length > this._rowHeaderCellIds[0].length && this._cornerHeaderCellIds.forEach(((cellIds, index) => {
+            cellIds.length = this._rowHeaderCellIds[0].length;
+        })); else if ("grid-tree" === this.columnHierarchyType && "row" === this.cornerSetting.titleOnDimension) if ((null === (_a = this._cornerHeaderCellIds) || void 0 === _a ? void 0 : _a.length) < (null === (_b = this._columnHeaderCellIds) || void 0 === _b ? void 0 : _b.length)) {
+            const oldLength = this._cornerHeaderCellIds.length;
+            this._cornerHeaderCellIds.length = this._columnHeaderCellIds.length, this._cornerHeaderCellIds.fill(this._cornerHeaderCellIds[0], oldLength);
+        } else (null === (_c = this._cornerHeaderCellIds) || void 0 === _c ? void 0 : _c.length) > (null === (_d = this._columnHeaderCellIds) || void 0 === _d ? void 0 : _d.length) && (this._cornerHeaderCellIds.length = this._columnHeaderCellIds.length);
     }
     enableUseGetBodyCache() {
         this._useGetBodyCache = !0, this._getBodyCache.clear();