@visactor/vtable 1.15.2 → 1.16.0-alpha.0

package/dist/vtable.js

@@ -29230,9 +29230,9 @@
             this.delLast();
         }
         addAndReorder(index, newValue) {
-            const lastIndex = this.getLastIndex();
-            this.adjustOrder(index, index + 1, lastIndex - index);
             if (isValid$3(newValue)) {
+                const lastIndex = this.getLastIndex();
+                this.adjustOrder(index, index + 1, lastIndex - index);
                 this.put(index, newValue);
             }
         }
@@ -30745,7 +30745,7 @@
         hasHierarchyStateExpand = false;
         beforeChangedRecordsMap = new Map();
         registedAggregators = {};
-        rowHierarchyType;
+        rowHierarchyType = 'grid';
         fieldAggregators = [];
         columns;
         lastFilterRules;
@@ -36038,7 +36038,11 @@
         if (layoutMap.isHeader(col, row)) {
             const hd = layoutMap.getHeader(col, row);
             if (isValid$3(hd?.hierarchyLevel)) {
-                cellHierarchyIndent = (hd.hierarchyLevel ?? 0) * (layoutMap.rowHierarchyIndent ?? 0);
+                cellHierarchyIndent =
+                    (hd.hierarchyLevel ?? 0) *
+                        (layoutMap.rowHierarchyType === 'tree'
+                            ? layoutMap.rowHierarchyIndent ?? 0
+                            : 0);
                 if (layoutMap.rowHierarchyTextStartAlignment &&
                     !table.internalProps.headerHelper.getHierarchyIcon(col, row)) {
                     cellHierarchyIndent += table.internalProps.headerHelper.getHierarchyIconWidth();
@@ -42804,7 +42808,10 @@
                 }
                 if (isValid$3(hd?.hierarchyLevel)) {
                     cellHierarchyIndent =
-                        (hd.hierarchyLevel ?? 0) * (layoutMap.rowHierarchyIndent ?? 0);
+                        (hd.hierarchyLevel ?? 0) *
+                            (layoutMap.rowHierarchyType === 'tree'
+                                ? layoutMap.rowHierarchyIndent ?? 0
+                                : 0);
                     if (layoutMap.rowHierarchyTextStartAlignment &&
                         !table.internalProps.headerHelper.getHierarchyIcon(col, row)) {
                         cellHierarchyIndent += table.internalProps.headerHelper.getHierarchyIconWidth();
@@ -43808,10 +43815,11 @@
                         y = cellGroup._prev?.attribute.y + table.getRowHeight(cellGroup._prev.row);
                     }
                     else if (part) {
-                        const baseCellGroup = table.scenegraph.highPerformanceGetCell(col, rowEnd + 1, true);
+                        const baseRowIndex = rowEnd === table.rowCount - table.bottomFrozenRowCount - 1 ? rowEnd : rowEnd + 1;
+                        const baseCellGroup = table.scenegraph.highPerformanceGetCell(col, baseRowIndex, true);
                         y = baseCellGroup.attribute.y;
                         if (isValid$3(y)) {
-                            for (let r = row; r <= rowEnd; r++) {
+                            for (let r = row; r < baseRowIndex; r++) {
                                 y -= table.getRowHeight(r);
                             }
                         }
@@ -43837,9 +43845,15 @@
                         y = cellGroup._next?.attribute.y - table.getRowHeight(cellGroup.row);
                     }
                     else if (part) {
-                        const baseCellGroup = table.scenegraph.highPerformanceGetCell(col, rowStart - 1, true);
-                        y = baseCellGroup.attribute.y;
-                        for (let r = rowStart - 1; r < row; r++) {
+                        const baseRowIndex = rowStart <= table.frozenRowCount ? table.frozenRowCount : rowStart - 1;
+                        if (rowStart <= table.frozenRowCount) {
+                            y = 0;
+                        }
+                        else {
+                            const baseCellGroup = table.scenegraph.highPerformanceGetCell(col, baseRowIndex, true);
+                            y = baseCellGroup.attribute.y;
+                        }
+                        for (let r = baseRowIndex; r < row; r++) {
                             const height = table.getRowHeight(r);
                             y += height;
                         }
@@ -44492,7 +44506,6 @@
         rowStart = 0;
         rowEnd = 0;
         referenceRow = 0;
-        bodyTopRow;
         bodyBottomRow;
         screenRowCount;
         firstScreenRowLimit;
@@ -44551,6 +44564,9 @@
         get bodyLeftCol() {
             return this.table.frozenColCount;
         }
+        get bodyTopRow() {
+            return this.table.frozenRowCount;
+        }
         setParamsForColumn() {
             this.bodyRightCol = this.table.colCount - 1 - this.table.rightFrozenColCount;
             const totalActualBodyColCount = Math.min(this.colLimit, this.bodyRightCol - this.bodyLeftCol + 1);
@@ -44570,7 +44586,6 @@
             this.colUpdatePos = this.bodyRightCol;
         }
         setParamsForRow() {
-            this.bodyTopRow = this.table.frozenRowCount;
             this.bodyBottomRow = this.table.rowCount - 1 - this.table.bottomFrozenRowCount;
             const totalActualBodyRowCount = Math.min(this.rowLimit, this.bodyBottomRow - this.bodyTopRow + 1);
             this.totalActualBodyRowCount = totalActualBodyRowCount;
@@ -44589,7 +44604,6 @@
             this.rowUpdatePos = this.bodyBottomRow;
         }
         refreshRowCount() {
-            this.bodyTopRow = this.table.frozenRowCount;
             this.bodyBottomRow = this.table.rowCount - 1 - this.table.bottomFrozenRowCount;
             const totalActualBodyRowCount = Math.min(this.rowLimit, this.bodyBottomRow - this.bodyTopRow + 1);
             this.totalActualBodyRowCount = totalActualBodyRowCount;
@@ -45782,8 +45796,8 @@
             rowUpdatePos = isValid$3(rowUpdatePos) ? (isValid$3(pos) ? Math.min(rowUpdatePos, pos) : rowUpdatePos) : pos;
         }
         if (isNumber$4(updateAfter)) {
-            for (let col = 0; col < table.colCount; col++) {
-                for (let row = updateAfter; row < table.rowCount; row++) {
+            for (let col = 0; col < Math.max(table.colCount, table.internalProps._oldColCount ?? table.colCount); col++) {
+                for (let row = updateAfter; row < Math.max(table.rowCount, table.internalProps._oldRowCount ?? table.rowCount); row++) {
                     const cellGroup = scene.highPerformanceGetCell(col, row, true);
                     cellGroup && (cellGroup.needUpdate = true);
                 }
@@ -45800,7 +45814,7 @@
                 const minRow = Math.min(...addRows);
                 scene.proxy.rowUpdatePos = Math.min(minRow, scene.proxy.rowUpdatePos);
             }
-            scene.proxy.rowUpdateDirection = 'up';
+            scene.proxy.rowUpdateDirection = 'down';
             scene.proxy.updateCellGroups(scene.proxy.screenRowCount * 2);
             updateBottomFrozeCellGroups();
         }
@@ -46652,6 +46666,116 @@
             container.appendChild(newNode);
         }
     }
+    function resetRowFrozen(scene) {
+        if (scene.frozenRowCount > scene.table.frozenRowCount) {
+            scene.bodyGroup.setAttribute('width', scene.colHeaderGroup.attribute.width);
+            scene.bodyGroup.setAttribute('x', scene.colHeaderGroup.attribute.x);
+            scene.rowHeaderGroup.setAttribute('width', scene.cornerHeaderGroup.attribute.width);
+            for (let i = 0; i < scene.frozenRowCount - scene.table.frozenRowCount; i++) {
+                moveRowFromColHeaderToBody(scene);
+                moveRowFromCornerHeaderToRowHeader(scene);
+                moveRowFromTopRightCornerToRight(scene);
+            }
+        }
+        else if (scene.frozenRowCount < scene.table.frozenRowCount) {
+            scene.colHeaderGroup.setAttribute('width', scene.bodyGroup.attribute.width);
+            scene.colHeaderGroup.setAttribute('x', scene.bodyGroup.attribute.x);
+            scene.cornerHeaderGroup.setAttribute('width', scene.rowHeaderGroup.attribute.width);
+            for (let i = 0; i < scene.table.frozenRowCount - scene.frozenRowCount; i++) {
+                moveRowFromBodyToColHeader(scene);
+                moveRowFromRowHeaderToCornerHeader(scene);
+                moveRowFromRightToTopRightCorner(scene);
+            }
+        }
+        updateReactComponentContainer(scene);
+        scene.recreateAllSelectRangeComponents();
+        scene.frozenRowCount = scene.table.frozenRowCount;
+        scene.frozenColCount = scene.rowHeaderGroup?.childrenCount ?? 0;
+        scene.proxy.rowStart = scene.bodyGroup.firstChild?.firstChild?.row ?? scene.table.frozenRowCount;
+        scene.bodyGroup.setAttribute('y', scene.colHeaderGroup.attribute.height);
+        scene.rowHeaderGroup.setAttribute('y', scene.cornerHeaderGroup.attribute.height);
+        scene.updateContainer();
+        scene.updateBorderSizeAndPosition();
+        scene.hasFrozen = true;
+    }
+    function moveRowFromBodyToColHeader(scene) {
+        let hasSetedHeight = false;
+        for (let i = 0; i < scene.bodyGroup.childrenCount; i++) {
+            const colGroup = scene.bodyGroup.children[i];
+            const rowCell = colGroup.firstChild;
+            scene.colHeaderGroup.children[i]?.appendChild(rowCell);
+            if (!hasSetedHeight) {
+                scene.colHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height + rowCell.attribute.height);
+                scene.bodyGroup.setAttribute('height', scene.bodyGroup.attribute.height - rowCell.attribute.height);
+                hasSetedHeight = true;
+            }
+        }
+    }
+    function moveRowFromRowHeaderToCornerHeader(scene) {
+        let hasSetedHeight = false;
+        for (let i = 0; i < scene.rowHeaderGroup.childrenCount; i++) {
+            const colGroup = scene.rowHeaderGroup.children[i];
+            const rowCell = colGroup.firstChild;
+            scene.cornerHeaderGroup.children[i]?.appendChild(rowCell);
+            if (!hasSetedHeight) {
+                scene.cornerHeaderGroup.setAttribute('height', scene.cornerHeaderGroup.attribute.height + rowCell.attribute.height);
+                scene.rowHeaderGroup.setAttribute('height', scene.rowHeaderGroup.attribute.height - rowCell.attribute.height);
+                hasSetedHeight = true;
+            }
+        }
+    }
+    function moveRowFromRightToTopRightCorner(scene) {
+        let hasSetedHeight = false;
+        for (let i = 0; i < scene.rightFrozenGroup.childrenCount; i++) {
+            const colGroup = scene.rightFrozenGroup.children[i];
+            const rowCell = colGroup.firstChild;
+            scene.rightTopCornerGroup.children[i]?.appendChild(rowCell);
+            if (!hasSetedHeight) {
+                scene.rightTopCornerGroup.setAttribute('height', scene.rightTopCornerGroup.attribute.height + rowCell.attribute.height);
+                scene.rightFrozenGroup.setAttribute('height', scene.rightFrozenGroup.attribute.height - rowCell.attribute.height);
+                hasSetedHeight = true;
+            }
+        }
+    }
+    function moveRowFromColHeaderToBody(scene) {
+        let hasSetedHeight = false;
+        for (let i = 0; i < scene.colHeaderGroup.childrenCount; i++) {
+            const colGroup = scene.colHeaderGroup.children[i];
+            const rowCell = colGroup.lastChild;
+            insertBefore(scene.bodyGroup.children[i], rowCell, scene.bodyGroup.children[i].firstChild);
+            if (!hasSetedHeight) {
+                scene.colHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height - rowCell.attribute.height);
+                scene.bodyGroup.setAttribute('height', scene.bodyGroup.attribute.height + rowCell.attribute.height);
+                hasSetedHeight = true;
+            }
+        }
+    }
+    function moveRowFromCornerHeaderToRowHeader(scene) {
+        let hasSetedHeight = false;
+        for (let i = 0; i < scene.cornerHeaderGroup.childrenCount; i++) {
+            const colGroup = scene.cornerHeaderGroup.children[i];
+            const rowCell = colGroup.lastChild;
+            insertBefore(scene.rowHeaderGroup.children[i], rowCell, scene.rowHeaderGroup.children[i].firstChild);
+            if (!hasSetedHeight) {
+                scene.cornerHeaderGroup.setAttribute('height', scene.cornerHeaderGroup.attribute.height - rowCell.attribute.height);
+                scene.rowHeaderGroup.setAttribute('height', scene.rowHeaderGroup.attribute.height + rowCell.attribute.height);
+                hasSetedHeight = true;
+            }
+        }
+    }
+    function moveRowFromTopRightCornerToRight(scene) {
+        let hasSetedHeight = false;
+        for (let i = 0; i < scene.rightTopCornerGroup.childrenCount; i++) {
+            const colGroup = scene.rightTopCornerGroup.children[i];
+            const rowCell = colGroup.lastChild;
+            insertBefore(scene.rightFrozenGroup.children[i], rowCell, scene.rightFrozenGroup.children[i].firstChild);
+            if (!hasSetedHeight) {
+                scene.rightTopCornerGroup.setAttribute('height', scene.rightTopCornerGroup.attribute.height - rowCell.attribute.height);
+                scene.rightFrozenGroup.setAttribute('height', scene.rightFrozenGroup.attribute.height + rowCell.attribute.height);
+                hasSetedHeight = true;
+            }
+        }
+    }
 
     function updateChartSizeForResizeColWidth(scenegraph, col) {
         const { table } = scenegraph;
@@ -47370,8 +47494,8 @@
             }
         });
         if (isNumber$4(updateAfter)) {
-            for (let col = updateAfter; col < table.colCount; col++) {
-                for (let row = 0; row < table.rowCount; row++) {
+            for (let col = updateAfter; col < Math.max(table.colCount, table.internalProps._oldColCount ?? table.colCount); col++) {
+                for (let row = 0; row < Math.max(table.rowCount, table.internalProps._oldRowCount ?? table.rowCount); row++) {
                     const cellGroup = scene.highPerformanceGetCell(col, row, true);
                     cellGroup && (cellGroup.needUpdate = true);
                 }
@@ -47422,6 +47546,10 @@
                 if (bottomColGroup && bottomColGroup.parent === scene.bottomFrozenGroup) {
                     scene.bottomFrozenGroup.removeChild(bottomColGroup);
                 }
+                const headerColGroup = scene.getColGroup(col, true);
+                if (headerColGroup && headerColGroup.parent === scene.colHeaderGroup) {
+                    scene.colHeaderGroup.removeChild(headerColGroup);
+                }
             }
         }
         if (col >= proxy.colStart && col <= proxy.colEnd) {
@@ -48743,6 +48871,9 @@
         resetFrozen() {
             resetFrozen(this);
         }
+        resetRowFrozen() {
+            resetRowFrozen(this);
+        }
         updateCellLayoutWidthCertainWidth(columnGroup, detaRow, col) {
             const width = columnGroup.attribute.width;
             let isUpdate = false;
@@ -48945,6 +49076,13 @@
             this.resetFrozen();
             this.component.updateScrollBar();
         }
+        updateRowFrozen() {
+            if (this.clear) {
+                return;
+            }
+            this.resetRowFrozen();
+            this.component.updateScrollBar();
+        }
         dealWidthRightFrozen(rightFrozenColCount) {
             if (this.clear) {
                 this.table.internalProps.rightFrozenColCount = rightFrozenColCount;
@@ -49107,6 +49245,27 @@
             this.component.updateScrollBar();
             this.updateNextFrame();
         }
+        updateCornerHeaderCells() {
+            for (let col = 0; col < this.table.frozenColCount; col++) {
+                for (let row = 0; row < this.table.frozenRowCount; row++) {
+                    updateCell$1(col, row, this.table, false);
+                }
+            }
+        }
+        updateRowHeaderCells() {
+            for (let col = 0; col < this.table.frozenColCount; col++) {
+                for (let row = this.table.frozenRowCount; row < this.table.rowCount; row++) {
+                    updateCell$1(col, row, this.table, false);
+                }
+            }
+        }
+        updateColumnHeaderCells() {
+            for (let row = 0; row < this.table.frozenRowCount; row++) {
+                for (let col = this.table.frozenColCount; col < this.table.colCount; col++) {
+                    updateCell$1(col, row, this.table, false);
+                }
+            }
+        }
         getColumnGroupX(col) {
             if (col < this.table.rowHeaderLevelCount) {
                 return this.table.getColsWidth(0, col - 1);
@@ -51155,7 +51314,8 @@
                 }
             ];
             this.frozen = {
-                col: -1
+                col: -1,
+                row: -1
             };
             this.tablePosition = {
                 absoluteX: 0,
@@ -51234,7 +51394,8 @@
                 }
             ];
             this.frozen = {
-                col: -1
+                col: -1,
+                row: -1
             };
             this.scroll = {
                 horizontalBarPos: 0,
@@ -51631,6 +51792,12 @@
                 this.table.scenegraph.updateFrozenIcon(0, this.table.colCount - 1);
             }
         }
+        setFrozenRow(row) {
+            if (row !== this.frozen.row) {
+                this.frozen.row = row;
+                this.table.scenegraph.updateRowFrozen();
+            }
+        }
         checkVerticalScrollBarEnd() {
             const totalHeight = this.table.getAllRowsHeight();
             const scrollTop = this.scroll.verticalBarPos;
@@ -56907,7 +57074,7 @@
         sharedVar;
         hasHideNode = false;
         sizeIncludeParent = false;
-        rowExpandLevel;
+        setExpandLevel;
         hierarchyType;
         tree = {
             id: 0,
@@ -56922,17 +57089,20 @@
             hierarchyState: undefined
         };
         totalLevel = 0;
+        expandedMaxLevel = 0;
         dimensionKeys = new NumberMap();
         dimensionKeysIncludeVirtual = new NumberMap();
         cache = new Map();
         constructor(tree, sharedVar, hierarchyType = 'grid', rowExpandLevel = undefined) {
             this.sizeIncludeParent = rowExpandLevel !== null && rowExpandLevel !== undefined;
-            this.rowExpandLevel = rowExpandLevel;
+            this.setExpandLevel = rowExpandLevel;
             this.hierarchyType = hierarchyType;
             this.sharedVar = sharedVar;
             this.reset(tree);
         }
         reset(tree) {
+            this.totalLevel = 0;
+            this.expandedMaxLevel = 0;
             this.hasHideNode = false;
             this.cache.clear();
             this.dimensionKeys = new NumberMap();
@@ -56976,6 +57146,7 @@
                 children.forEach((n) => {
                     n.level = (node.level ?? 0) + 1;
                     this.totalLevel = Math.max(this.totalLevel, n.level + 1);
+                    this.expandedMaxLevel = Math.max(this.expandedMaxLevel, n.level + 1);
                     size += this.setTreeNode(n, size, node);
                 });
             }
@@ -56987,18 +57158,23 @@
                 });
             }
             else if (!node.hierarchyState &&
-                node.level + 1 < this.rowExpandLevel &&
+                node.level + 1 < this.setExpandLevel &&
                 (children?.length >= 1 || children === true)) {
-                node.hierarchyState = HierarchyState.expand;
+                if (!(children[0]?.indicatorKey && this.hierarchyType === 'grid-tree')) {
+                    node.hierarchyState = HierarchyState.expand;
+                }
                 children?.length >= 1 &&
                     children.forEach((n) => {
                         n.level = (node.level ?? 0) + 1;
                         this.totalLevel = Math.max(this.totalLevel, n.level + 1);
+                        this.expandedMaxLevel = Math.max(this.expandedMaxLevel, n.level + 1);
                         size += this.setTreeNode(n, size, node);
                     });
             }
             else if (children?.length >= 1 || children === true) {
-                node.hierarchyState = HierarchyState.collapse;
+                if (!(children[0]?.indicatorKey && this.hierarchyType === 'grid-tree')) {
+                    node.hierarchyState = HierarchyState.collapse;
+                }
                 children?.length >= 1 &&
                     children.forEach((n) => {
                         n.level = (node.level ?? 0) + 1;
@@ -57019,22 +57195,6 @@
             path.shift();
             return path;
         }
-        getTreePathByCellIds(ids) {
-            const path = [];
-            let nodes = this.tree.children;
-            for (let i = 0; i < ids.length; i++) {
-                const id = ids[i];
-                const pathNode = this.findNodeById(nodes, id);
-                if (pathNode) {
-                    path.push(pathNode);
-                    nodes = pathNode.children;
-                }
-                else {
-                    break;
-                }
-            }
-            return path;
-        }
         findNodeById(nodes, id) {
             return nodes.find(node => {
                 return node.id === id;
@@ -57263,6 +57423,146 @@
             layoutMap.colIndex++;
         }
     }
+    function dealHeaderForGridTreeMode(hd, _headerCellIds, results, roots, row, totalLevel, expandedMaxLevel, show, dimensions, isRowTree, indicatorsAsCol, layoutMap) {
+        const id = hd.id;
+        const dimensionInfo = layoutMap.rowsDefine?.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === hd.dimensionKey) ??
+            layoutMap.columnsDefine?.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === hd.dimensionKey);
+        const indicatorInfo = layoutMap.indicatorsDefine?.find(indicator => {
+            if (typeof indicator === 'string') {
+                return false;
+            }
+            if (hd.indicatorKey) {
+                return indicator.indicatorKey === hd.indicatorKey;
+            }
+            return indicator.title === hd.value && !hd.dimensionKey;
+        });
+        const cell = {
+            id,
+            title: hd.value ?? indicatorInfo?.title,
+            field: hd.dimensionKey,
+            style: typeof (indicatorInfo ?? dimensionInfo)?.headerStyle === 'function'
+                ? (indicatorInfo ?? dimensionInfo)?.headerStyle
+                : Object.assign({}, (indicatorInfo ?? dimensionInfo)?.headerStyle),
+            headerType: indicatorInfo?.headerType ?? dimensionInfo?.headerType ?? 'text',
+            headerIcon: indicatorInfo?.headerIcon ?? dimensionInfo?.headerIcon,
+            define: Object.assign(hd, {
+                linkJump: (indicatorInfo ?? dimensionInfo)?.linkJump,
+                linkDetect: (indicatorInfo ?? dimensionInfo)?.linkDetect,
+                templateLink: (indicatorInfo ?? dimensionInfo)?.templateLink,
+                keepAspectRatio: (indicatorInfo ?? dimensionInfo)?.keepAspectRatio ?? false,
+                imageAutoSizing: (indicatorInfo ?? dimensionInfo)?.imageAutoSizing,
+                headerCustomRender: (indicatorInfo ?? dimensionInfo)?.headerCustomRender,
+                headerCustomLayout: (indicatorInfo ?? dimensionInfo)?.headerCustomLayout,
+                dragHeader: dimensionInfo?.dragHeader,
+                disableHeaderHover: !!(indicatorInfo ?? dimensionInfo)?.disableHeaderHover,
+                disableHeaderSelect: !!(indicatorInfo ?? dimensionInfo)?.disableHeaderSelect,
+                showSort: indicatorInfo?.showSort ?? dimensionInfo?.showSort,
+                hide: indicatorInfo?.hide
+            }),
+            fieldFormat: indicatorInfo?.headerFormat ?? dimensionInfo?.headerFormat,
+            dropDownMenu: indicatorInfo?.dropDownMenu ?? dimensionInfo?.dropDownMenu,
+            pivotInfo: {
+                value: hd.value,
+                dimensionKey: hd.dimensionKey,
+                isPivotCorner: false
+            },
+            hierarchyLevel: hd.level,
+            dimensionTotalLevel: totalLevel,
+            hierarchyState: hd.hierarchyState,
+            width: dimensionInfo?.width,
+            minWidth: dimensionInfo?.minWidth,
+            maxWidth: dimensionInfo?.maxWidth,
+            showSort: indicatorInfo?.showSort ?? dimensionInfo?.showSort,
+            sort: indicatorInfo?.sort,
+            description: dimensionInfo?.description,
+            parentCellId: roots[roots.length - 1]
+        };
+        if (indicatorInfo) {
+            if (indicatorInfo.customRender) {
+                hd.customRender = indicatorInfo.customRender;
+            }
+            if (!isValid$3(layoutMap._indicators?.find(indicator => indicator.indicatorKey === indicatorInfo.indicatorKey))) {
+                layoutMap._indicators?.push({
+                    id: ++layoutMap.sharedVar.seqId,
+                    indicatorKey: indicatorInfo.indicatorKey,
+                    field: indicatorInfo.indicatorKey,
+                    fieldFormat: indicatorInfo?.format,
+                    cellType: indicatorInfo?.cellType ?? indicatorInfo?.columnType ?? 'text',
+                    chartModule: 'chartModule' in indicatorInfo ? indicatorInfo.chartModule : null,
+                    chartSpec: 'chartSpec' in indicatorInfo ? indicatorInfo.chartSpec : null,
+                    noDataRenderNothing: 'noDataRenderNothing' in indicatorInfo ? indicatorInfo.noDataRenderNothing : false,
+                    sparklineSpec: 'sparklineSpec' in indicatorInfo ? indicatorInfo.sparklineSpec : null,
+                    style: indicatorInfo?.style,
+                    icon: indicatorInfo?.icon,
+                    define: Object.assign({}, hd, indicatorInfo, {
+                        dragHeader: dimensionInfo?.dragHeader
+                    }),
+                    width: indicatorInfo?.width,
+                    minWidth: indicatorInfo?.minWidth,
+                    maxWidth: indicatorInfo?.maxWidth,
+                    disableColumnResize: indicatorInfo?.disableColumnResize
+                });
+            }
+        }
+        else if (hd.indicatorKey) {
+            if (!isValid$3(layoutMap._indicators?.find(indicator => indicator.indicatorKey === hd.indicatorKey))) {
+                layoutMap._indicators?.push({
+                    id: ++layoutMap.sharedVar.seqId,
+                    indicatorKey: hd.indicatorKey,
+                    field: hd.indicatorKey,
+                    cellType: 'text',
+                    define: Object.assign({}, hd)
+                });
+            }
+        }
+        results[id] = cell;
+        layoutMap._headerObjects[id] = cell;
+        for (let r = row - 1; r >= 0; r--) {
+            _headerCellIds[r][layoutMap.colIndex] = roots[r];
+        }
+        _headerCellIds[row][layoutMap.colIndex] = id;
+        const span = Math.min((isRowTree ? indicatorsAsCol : !indicatorsAsCol) ? expandedMaxLevel : expandedMaxLevel - 1, hd.levelSpan ?? 1000);
+        if (span > 0) {
+            for (let r = row + 1; r < span; r++) {
+                if (!_headerCellIds[r]) {
+                    _headerCellIds[r] = [];
+                    for (let col = 0; col < layoutMap.colIndex; col++) {
+                        _headerCellIds[r][col] = _headerCellIds[row][col];
+                    }
+                }
+                _headerCellIds[r][layoutMap.colIndex] = id;
+            }
+        }
+        if ((hd.hierarchyState === HierarchyState.expand && hd).children?.length >= 1) {
+            layoutMap._addHeadersForGridTreeMode(_headerCellIds, row + (hd.levelSpan ?? 1), hd.children ?? [], [...roots, ...Array(hd.levelSpan ?? 1).fill(id)], totalLevel, expandedMaxLevel, show && hd.hierarchyState === HierarchyState.expand, dimensions, results, isRowTree);
+        }
+        else {
+            const needSupplementLength = (isRowTree ? indicatorsAsCol : !indicatorsAsCol)
+                ? expandedMaxLevel
+                : expandedMaxLevel - 1;
+            for (let r = row + 1; r < needSupplementLength; r++) {
+                if (!_headerCellIds[r]) {
+                    _headerCellIds[r] = [];
+                }
+                _headerCellIds[r][layoutMap.colIndex] = id;
+            }
+            if (row <= needSupplementLength - 1 &&
+                ((isRowTree && indicatorsAsCol === false) || (!isRowTree && indicatorsAsCol === true))) {
+                let lastIndidcatorChildren = hd;
+                const levelSpan = needSupplementLength - row;
+                while (lastIndidcatorChildren) {
+                    if (lastIndidcatorChildren.children?.[0].indicatorKey) {
+                        break;
+                    }
+                    lastIndidcatorChildren = lastIndidcatorChildren.children[0];
+                }
+                layoutMap._addHeadersForGridTreeMode(_headerCellIds, expandedMaxLevel - 1, lastIndidcatorChildren.children ?? [], [...roots, ...Array(Math.max(levelSpan, hd.levelSpan ?? 1)).fill(id)], totalLevel, expandedMaxLevel, true, dimensions, results, isRowTree);
+            }
+            else {
+                layoutMap.colIndex++;
+            }
+        }
+    }
     function dealHeaderForTreeMode(hd, _headerCellIds, results, roots, row, totalLevel, show, dimensions, layoutMap) {
         const id = hd.id;
         const dimensionInfo = dimensions.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === hd.dimensionKey);
@@ -57538,13 +57838,13 @@
             if (table.options.indicatorsAsCol !== false && table.options.supplementIndicatorNodes !== false) {
                 table.internalProps.columnTree = supplementIndicatorNodesForCustomTree(table.internalProps.columnTree, options.indicators);
             }
-            columnDimensionTree = new DimensionTree(table.internalProps.columnTree ?? [], table.layoutNodeId);
+            columnDimensionTree = new DimensionTree(table.internalProps.columnTree ?? [], table.layoutNodeId, table.options.columnHierarchyType, table.options.columnHierarchyType !== 'grid' ? table.options.columnExpandLevel ?? 1 : undefined);
         }
         if (options.rowTree) {
             if (table.options.indicatorsAsCol === false && table.options.supplementIndicatorNodes !== false) {
                 table.internalProps.rowTree = supplementIndicatorNodesForCustomTree(table.internalProps.rowTree, options.indicators);
             }
-            rowDimensionTree = new DimensionTree(table.internalProps.rowTree ?? [], table.layoutNodeId, table.options.rowHierarchyType, table.options.rowHierarchyType === 'tree' ? table.options.rowExpandLevel ?? 1 : undefined);
+            rowDimensionTree = new DimensionTree(table.internalProps.rowTree ?? [], table.layoutNodeId, table.options.rowHierarchyType, table.options.rowHierarchyType !== 'grid' ? table.options.rowExpandLevel ?? 1 : undefined);
         }
         const rowKeys = rowDimensionTree?.dimensionKeys?.count
             ? rowDimensionTree.dimensionKeys.valueArr()
@@ -57611,7 +57911,7 @@
             }
             return keys;
         }, []) ?? [];
-        if (options.rowHierarchyType === 'tree' && (options.extensionRows?.length ?? 0) >= 1) {
+        if (options.rowHierarchyType !== 'grid' && (options.extensionRows?.length ?? 0) >= 1) {
             options.extensionRows?.forEach(extensionRow => {
                 const extension_rowKeys = [];
                 extensionRow.rows.forEach(row => {
@@ -59198,7 +59498,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.15.2";
+        version = "1.16.0-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -59557,6 +59857,7 @@
         }
         set frozenRowCount(frozenRowCount) {
             this.internalProps.frozenRowCount = frozenRowCount;
+            this.stateManager.setFrozenRow(this.internalProps.frozenRowCount);
         }
         get rightFrozenColCount() {
             return this.internalProps?.layoutMap?.rightFrozenColCount ?? this.internalProps?.rightFrozenColCount ?? 0;
@@ -72782,34 +73083,134 @@
 
     function diffCellAddress(col, row, oldCellIds, newCellIds, oldRowHeaderCellPositons, layout) {
         const columnHeaderStart = layout.columnHeaderLevelCount;
-        const addCellPositions = [];
-        const removeCellPositions = [];
+        const addCellPositionsRowDirection = [];
+        const removeCellPositionsRowDirection = [];
         for (let i = 0; i < oldCellIds.length; i++) {
             if (!newCellIds.includes(oldCellIds[i])) {
-                removeCellPositions.push(oldRowHeaderCellPositons[i]);
+                removeCellPositionsRowDirection.push(oldRowHeaderCellPositons[i]);
             }
         }
         for (let i = 0; i < newCellIds.length; i++) {
             if (!oldCellIds.includes(newCellIds[i])) {
                 const newCellAddr = { col, row: columnHeaderStart + i };
-                addCellPositions.push(newCellAddr);
+                addCellPositionsRowDirection.push(newCellAddr);
             }
         }
         let parentId = layout.getParentCellId(col, row);
         let parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
-        const updateCellPositions = [];
-        parentCellAddress && updateCellPositions.push(parentCellAddress);
+        const updateCellPositionsRowDirection = [];
+        parentCellAddress && updateCellPositionsRowDirection.push(parentCellAddress);
         while (parentId) {
             parentId = layout.getParentCellId(parentCellAddress.col, parentCellAddress.row);
             if (parentId) {
                 parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
-                updateCellPositions.push(parentCellAddress);
+                updateCellPositionsRowDirection.push(parentCellAddress);
             }
         }
         return {
-            addCellPositions,
-            removeCellPositions,
-            updateCellPositions
+            addCellPositionsRowDirection,
+            removeCellPositionsRowDirection,
+            updateCellPositionsRowDirection
+        };
+    }
+    function diffCellAddressForGridTree(col, row, oldCellIds, newCellIds, oldRowHeaderCellPositons, layout) {
+        const columnHeaderStart = layout.columnHeaderLevelCount;
+        const addCellPositionsRowDirection = [];
+        const removeCellPositionsRowDirection = [];
+        for (let i = 0; i < oldCellIds.length; i++) {
+            if (!newCellIds.includes(oldCellIds[i])) {
+                removeCellPositionsRowDirection.push(oldRowHeaderCellPositons[i]);
+            }
+        }
+        for (let i = 0; i < newCellIds.length; i++) {
+            if (!oldCellIds.includes(newCellIds[i])) {
+                const newCellAddr = { col, row: columnHeaderStart + i };
+                addCellPositionsRowDirection.push(newCellAddr);
+            }
+        }
+        let parentId = layout.getParentCellId(col, row);
+        let parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
+        const updateCellPositionsRowDirection = [];
+        parentCellAddress && updateCellPositionsRowDirection.push(parentCellAddress);
+        while (parentId) {
+            parentId = layout.getParentCellId(parentCellAddress.col, parentCellAddress.row);
+            if (parentId) {
+                parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
+                updateCellPositionsRowDirection.push(parentCellAddress);
+            }
+        }
+        const addCellPositionsColumnDirection = [];
+        const removeCellPositionsColumnDirection = [];
+        if (layout.rowHierarchyType === 'grid-tree' &&
+            layout.cornerSetting.titleOnDimension === 'column' &&
+            layout.rowHeaderLevelCount !== layout._cornerHeaderCellIds[0].length) {
+            if (layout.rowHeaderLevelCount > layout._cornerHeaderCellIds[0].length) {
+                for (let i = layout._cornerHeaderCellIds[0].length; i < layout.rowHeaderLevelCount; i++) {
+                    addCellPositionsColumnDirection.push({ col: i, row });
+                }
+            }
+            else {
+                for (let i = layout.rowHeaderLevelCount; i < layout._cornerHeaderCellIds[0].length; i++) {
+                    removeCellPositionsColumnDirection.push({ col: i, row });
+                }
+            }
+        }
+        return {
+            addCellPositionsRowDirection,
+            removeCellPositionsRowDirection,
+            updateCellPositionsRowDirection,
+            addCellPositionsColumnDirection,
+            removeCellPositionsColumnDirection
+        };
+    }
+    function diffCellAddressForGridTreeOnColumn(col, row, oldCellIds, newCellIds, oldRowHeaderCellPositons, layout) {
+        const rowHeaderStart = layout.rowHeaderLevelCount;
+        const addCellPositionsColumnDirection = [];
+        const removeCellPositionsColumnDirection = [];
+        for (let i = 0; i < oldCellIds.length; i++) {
+            if (!newCellIds.includes(oldCellIds[i])) {
+                removeCellPositionsColumnDirection.push(oldRowHeaderCellPositons[i]);
+            }
+        }
+        for (let i = 0; i < newCellIds.length; i++) {
+            if (!oldCellIds.includes(newCellIds[i])) {
+                const newCellAddr = { col: rowHeaderStart + i, row };
+                addCellPositionsColumnDirection.push(newCellAddr);
+            }
+        }
+        let parentId = layout.getParentCellId(col, row);
+        let parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
+        const updateCellPositionsColumnDirection = [];
+        parentCellAddress && updateCellPositionsColumnDirection.push(parentCellAddress);
+        while (parentCellAddress && parentId) {
+            parentId = layout.getParentCellId(parentCellAddress.col, parentCellAddress.row);
+            if (parentId) {
+                parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
+                updateCellPositionsColumnDirection.push(parentCellAddress);
+            }
+        }
+        const addCellPositionsRowDirection = [];
+        const removeCellPositionsRowDirection = [];
+        if (layout.columnHierarchyType === 'grid-tree' &&
+            layout.cornerSetting.titleOnDimension === 'row' &&
+            layout.columnHeaderLevelCount !== layout._cornerHeaderCellIds.length) {
+            if (layout.columnHeaderLevelCount > layout._cornerHeaderCellIds.length) {
+                for (let i = layout._cornerHeaderCellIds.length; i < layout.columnHeaderLevelCount; i++) {
+                    addCellPositionsRowDirection.push({ col, row: i });
+                }
+            }
+            else {
+                for (let i = layout.columnHeaderLevelCount; i < layout._cornerHeaderCellIds.length; i++) {
+                    removeCellPositionsRowDirection.push({ col, row: i });
+                }
+            }
+        }
+        return {
+            addCellPositionsColumnDirection,
+            removeCellPositionsColumnDirection,
+            updateCellPositionsColumnDirection,
+            addCellPositionsRowDirection,
+            removeCellPositionsRowDirection
         };
     }
 
@@ -72853,7 +73254,9 @@
         cornerSetting;
         _indicatorShowType = 'column';
         rowHierarchyType;
+        columnHierarchyType;
         rowExpandLevel;
+        columnExpandLevel;
         rowHierarchyIndent;
         rowHierarchyTextStartAlignment = false;
         rowDimensionKeys = [];
@@ -72909,7 +73312,9 @@
             this.rowHeaderTitle = table.options.rowHeaderTitle;
             this.columnHeaderTitle = table.options.columnHeaderTitle;
             this.rowHierarchyType = table.options.rowHierarchyType ?? 'grid';
+            this.columnHierarchyType = table.options.columnHierarchyType ?? 'grid';
             this.rowExpandLevel = table.options.rowExpandLevel ?? 1;
+            this.columnExpandLevel = table.options.columnExpandLevel ?? 1;
             this.rowHierarchyIndent = table.options.rowHierarchyIndent ?? 20;
             this.rowHierarchyTextStartAlignment = table.options.rowHierarchyTextStartAlignment;
             this.cornerSetting = Object.assign({ titleOnDimension: 'column', forceShowHeader: false }, table.options.corner);
@@ -73121,20 +73526,26 @@
         }
         _generateColHeaderIds() {
             if (this.columnDimensionTree.tree.children?.length >= 1) {
-                let startRow = 0;
-                if (this.dataset &&
-                    !this._table.isPivotChart() &&
-                    (this.dataset.records?.length ?? 0) === 0 &&
-                    !this.dataset.customColTree &&
-                    !this.dataset.customRowTree &&
-                    this.indicatorsAsCol &&
-                    this.columnDimensionTree.totalLevel < this.columnHeaderLevelCount) {
-                    startRow = this.columnHeaderLevelCount - this.columnDimensionTree.totalLevel;
-                    for (let i = 0; i < startRow; i++) {
-                        this._columnHeaderCellFullPathIds.unshift([]);
+                if (this.columnHierarchyType === 'grid-tree') {
+                    const startCol = 0;
+                    this._addHeadersForGridTreeMode(this._columnHeaderCellFullPathIds, startCol, this.columnDimensionTree.tree.children, [], this.columnDimensionTree.totalLevel, this._getColumnHeaderTreeExpandedMaxLevelCount(), true, this.columnsDefine, this.columnHeaderObjs, false);
+                }
+                else {
+                    let startRow = 0;
+                    if (this.dataset &&
+                        !this._table.isPivotChart() &&
+                        (this.dataset.records?.length ?? 0) === 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);
                 }
-                this._addHeaders(this._columnHeaderCellFullPathIds, startRow, this.columnDimensionTree.tree.children, [], this.columnHeaderObjs);
             }
             if (this.columnHeaderTitle) {
                 this.sharedVar.seqId = Math.max(this.sharedVar.seqId, this._headerObjects.length);
@@ -73169,6 +73580,10 @@
                 if (this.rowHierarchyType === 'tree') {
                     this._addHeadersForTreeMode(this._rowHeaderCellFullPathIds_FULL, 0, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, true, this.rowsDefine, this.rowHeaderObjs);
                 }
+                else if (this.rowHierarchyType === 'grid-tree') {
+                    const startRow = 0;
+                    this._addHeadersForGridTreeMode(this._rowHeaderCellFullPathIds_FULL, startRow, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, this._getRowHeaderTreeExpandedMaxLevelCount(), true, this.rowsDefine, this.rowHeaderObjs, true);
+                }
                 else {
                     let startRow = 0;
                     if (this.dataset &&
@@ -73177,8 +73592,8 @@
                         !this.dataset.customColTree &&
                         !this.dataset.customRowTree &&
                         !this.indicatorsAsCol &&
-                        this.rowDimensionTree.totalLevel < this.rowHeaderLevelCount) {
-                        startRow = this.rowHeaderLevelCount - this.rowDimensionTree.totalLevel;
+                        this._getRowHeaderTreeExpandedMaxLevelCount() < this.rowHeaderLevelCount) {
+                        startRow = this.rowHeaderLevelCount - this._getRowHeaderTreeExpandedMaxLevelCount();
                         for (let i = 0; i < startRow; i++) {
                             this._rowHeaderCellFullPathIds_FULL.unshift([]);
                         }
@@ -73214,6 +73629,29 @@
                 this._headerObjects[id] = cell;
             }
         }
+        _getRowHeaderTreeExpandedMaxLevelCount() {
+            if (this.rowHierarchyType === 'tree') {
+                return 1;
+            }
+            else if (this.rowHierarchyType === 'grid-tree') {
+                return this.cornerSetting.titleOnDimension === 'row'
+                    ? this.rowDimensionTree.totalLevel
+                    : this.indicatorsAsCol
+                        ? this.rowDimensionTree.expandedMaxLevel
+                        : this.rowDimensionTree.expandedMaxLevel + 1;
+            }
+            return this.rowDimensionTree.totalLevel;
+        }
+        _getColumnHeaderTreeExpandedMaxLevelCount() {
+            if (this.columnHierarchyType === 'grid-tree') {
+                return this.cornerSetting.titleOnDimension === 'column'
+                    ? this.columnDimensionTree.totalLevel
+                    : this.indicatorsAsCol === false
+                        ? this.columnDimensionTree.expandedMaxLevel
+                        : this.columnDimensionTree.expandedMaxLevel + 1;
+            }
+            return this.columnDimensionTree.totalLevel;
+        }
         _addHeaders(_headerCellIds, row, header, roots, results) {
             const _this = this;
             function _newRow(row) {
@@ -73256,6 +73694,27 @@
                 dealHeaderForTreeMode(hd, _headerCellIds, results, roots, row, totalLevel, show, dimensions, this);
             }
         }
+        _addHeadersForGridTreeMode(_headerCellIds, row, header, roots, totalLevel, expandedMaxLevel, show, dimensions, results, isRowTree) {
+            const _this = this;
+            function _newRow(row) {
+                const newRow = (_headerCellIds[row] = []);
+                if (_this.colIndex === 0) {
+                    return newRow;
+                }
+                const prev = _headerCellIds[row - 1];
+                for (let col = 0; col < prev?.length; col++) {
+                    newRow[col] = prev[col];
+                }
+                return newRow;
+            }
+            if (!_headerCellIds[row]) {
+                _newRow(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) {
             const results = [];
             if (this.cornerSetting.titleOnDimension === 'all') {
@@ -73911,13 +74370,12 @@
                     this.columnHeaderLevelCount = 0;
                     return;
                 }
-                let count = this.indicatorsAsCol
-                    ? this.hideIndicatorName
-                        ? this.colDimensionKeys[this.colDimensionKeys.length - 1] === this.indicatorDimensionKey
-                            ? this.columnDimensionTree.totalLevel - 1
-                            : this.columnDimensionTree.totalLevel
-                        : this.columnDimensionTree.totalLevel
-                    : this.columnDimensionTree.totalLevel;
+                let count = this._getColumnHeaderTreeExpandedMaxLevelCount();
+                if (this.indicatorsAsCol &&
+                    this.hideIndicatorName &&
+                    this.colDimensionKeys[this.colDimensionKeys.length - 1] === this.indicatorDimensionKey) {
+                    count--;
+                }
                 if (count === 0 &&
                     this.dataset &&
                     !this.dataset.customColTree?.length) {
@@ -73967,7 +74425,7 @@
                     this.rowHeaderLevelCount = 1 + extensionRowCount;
                     return;
                 }
-                const rowLevelCount = this.rowDimensionTree.totalLevel;
+                const rowLevelCount = this._getRowHeaderTreeExpandedMaxLevelCount();
                 let count = rowLevelCount;
                 if (count === 0 &&
                     this.dataset &&
@@ -74019,7 +74477,7 @@
             this._rowHeaderLevelCount = count;
         }
         get colCount() {
-            return ((this.columnDimensionTree.totalLevel > 0 ||
+            return ((this._getColumnHeaderTreeExpandedMaxLevelCount() > 0 ||
                 this._table.isPivotChart() ||
                 this.dataset.records?.length > 0 ||
                 (this.dataset.records && !Array.isArray(this.dataset.records))
@@ -74363,9 +74821,20 @@
             const recordCol = this.getBodyIndexByCol(col);
             const 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);
+                colPath = [];
+                if (this.columnHierarchyType === 'grid-tree') {
+                    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) {
@@ -74388,12 +74857,17 @@
                                 break;
                             }
                         }
-                        const findedRowPath = findTree.getTreePathByCellIds(pathIds);
+                        const findedRowPath = this.getTreePathByCellIds(pathIds);
                         rowPath.push(...findedRowPath);
                         findTree = this._rowHeaderExtensionTree[row_pathIds[level]];
                         level++;
                     }
                 }
+                else if (this.rowHierarchyType === 'grid-tree') {
+                    const row_pathIds = this._rowHeaderCellFullPathIds[recordRow];
+                    const 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
@@ -74404,6 +74878,20 @@
             const p = { colHeaderPaths: colPath, rowHeaderPaths: rowPath, cellLocation: this.getCellLocation(col, row) };
             return p;
         }
+        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];
+                if (hd?.define) {
+                    paths.push(hd.define);
+                }
+            }
+            return paths;
+        }
         getCellHeaderPaths(col, row) {
             const headerPathsWidthNode = this.getCellHeaderPathsWithTreeNode(col, row);
             const headerPaths = {
@@ -74492,6 +74980,8 @@
         }
         toggleHierarchyState(col, row) {
             this.colIndex = 0;
+            const lastLevelIndex = (this.indicatorsAsCol ? this.rowHeaderLevelCount - 1 : this.rowHeaderLevelCount - 2) -
+                this.leftRowSeriesNumberColumnCount;
             const oldRowHeaderCellIds = this._rowHeaderCellFullPathIds_FULL.slice(0);
             const oldRowHeaderCellPositons = oldRowHeaderCellIds.map((id, row) => {
                 return { col, row: row + this.columnHeaderLevelCount };
@@ -74500,11 +74990,18 @@
             hd.define.hierarchyState =
                 hd.define.hierarchyState === HierarchyState.collapse ? HierarchyState.expand : HierarchyState.collapse;
             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, true, this.rowsDefine, this.rowHeaderObjs);
+            if (this.rowHierarchyType === 'tree') {
+                this._addHeadersForTreeMode(this._rowHeaderCellFullPathIds_FULL, 0, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, true, this.rowsDefine, this.rowHeaderObjs);
+            }
+            else if (this.rowHierarchyType === 'grid-tree') {
+                const startRow = 0;
+                this._addHeadersForGridTreeMode(this._rowHeaderCellFullPathIds_FULL, startRow, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, this._getRowHeaderTreeExpandedMaxLevelCount(), true, this.rowsDefine, this.rowHeaderObjs, true);
+            }
             if (this.rowHeaderTitle) {
                 const id = ++this.sharedVar.seqId;
                 const firstColIds = Array(this.rowCount - this.columnHeaderLevelCount).fill(id);
@@ -74544,9 +75041,81 @@
             }, {});
             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);
+            let diffCell;
+            if (this.rowHierarchyType === 'tree') {
+                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);
+            }
             this.generateCellIdsConsiderHideHeader();
             this.setPagination(this.pagination);
+            if (this.rowHierarchyType === 'grid-tree') {
+                this.setColumnWidths();
+            }
+            return diffCell;
+        }
+        toggleHierarchyStateForColumnTree(col, row) {
+            this.colIndex = 0;
+            const lastLevelIndex = !this.indicatorsAsCol ? this.columnHeaderLevelCount - 1 : this.columnHeaderLevelCount - 2;
+            const oldColumnHeaderCellIds = this._columnHeaderCellFullPathIds.slice(0);
+            const oldColumnHeaderCellPositons = oldColumnHeaderCellIds[this.columnHeaderLevelCount - 1].map((id, col) => {
+                return { col: col + this.rowHeaderLevelCount, row };
+            });
+            const hd = this.getHeader(col, row);
+            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();
+            if (this.columnHierarchyType === 'grid-tree') {
+                const startRow = 0;
+                this._addHeadersForGridTreeMode(this._columnHeaderCellFullPathIds, startRow, this.columnDimensionTree.tree.children, [], this.columnDimensionTree.totalLevel, this._getColumnHeaderTreeExpandedMaxLevelCount(), true, this.columnsDefine, this.columnHeaderObjs, false);
+            }
+            if (this.columnHeaderTitle) {
+                const id = ++this.sharedVar.seqId;
+                const firstRowIds = Array(this.colCount - this.rowHeaderLevelCount - this.rightFrozenColCount).fill(id);
+                this._columnHeaderCellFullPathIds.unshift(firstRowIds);
+                const cell = {
+                    id,
+                    title: typeof this.columnHeaderTitle.title === 'string'
+                        ? this.columnHeaderTitle.title
+                        : this.columnsDefine.reduce((title, value) => {
+                            if (typeof value === 'string') {
+                                return title;
+                            }
+                            return title + (title ? `/${value.title}` : `${value.title}`);
+                        }, ''),
+                    field: undefined,
+                    headerType: this.columnHeaderTitle?.headerType ?? 'text',
+                    style: this.columnHeaderTitle?.headerStyle,
+                    define: {
+                        id,
+                        disableHeaderHover: !!this.columnHeaderTitle?.disableHeaderHover,
+                        disableHeaderSelect: !!this.columnHeaderTitle?.disableHeaderSelect
+                    }
+                };
+                this.columnHeaderObjs.push(cell);
+                this._headerObjects[id] = cell;
+            }
+            this.colIndex = 0;
+            this._headerObjectMap = this._headerObjects.reduce((o, e) => {
+                o[e.id] = e;
+                return o;
+            }, {});
+            this._CellHeaderPathMap = new Map();
+            this._largeCellRangeCache.length = 0;
+            const new_lastLevelIndex = !this.indicatorsAsCol
+                ? this.columnHeaderLevelCount - 1
+                : this.columnHeaderLevelCount - 2;
+            const diffCell = diffCellAddressForGridTreeOnColumn(col, row, oldColumnHeaderCellIds[lastLevelIndex], this._columnHeaderCellFullPathIds[new_lastLevelIndex], oldColumnHeaderCellPositons, this);
+            this.generateCellIdsConsiderHideHeader();
+            if (this.columnHierarchyType === 'grid-tree') {
+                this.setColumnWidths();
+            }
             return diffCell;
         }
         isHeaderForColWidth(col, row) {
@@ -75563,8 +76132,8 @@
                     this._table._syncHierarchyState(beforeRowDimension, node);
                 }
             });
-            this.columnDimensionTree = new DimensionTree(this.columnTree ?? [], this.sharedVar);
-            this.rowDimensionTree = new DimensionTree(this.rowTree ?? [], this.sharedVar, this.rowHierarchyType, this.rowHierarchyType === 'tree' ? this.rowExpandLevel : undefined);
+            this.columnDimensionTree = new DimensionTree(this.columnTree ?? [], this.sharedVar, this.columnHierarchyType, this.columnHierarchyType !== 'grid' ? this.columnExpandLevel : undefined);
+            this.rowDimensionTree = new DimensionTree(this.rowTree ?? [], this.sharedVar, this.rowHierarchyType, this.rowHierarchyType !== 'grid' ? this.rowExpandLevel : undefined);
             this.resetColumnHeaderLevelCount();
             this._generateColHeaderIds();
             this.colIndex = 0;
@@ -75733,6 +76302,30 @@
                     this._cornerHeaderCellIds.splice(0, this._cornerHeaderCellIds.length);
                 }
             }
+            if (this.rowHierarchyType === 'grid-tree' && this.cornerSetting.titleOnDimension === 'column') {
+                if (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);
+                    });
+                }
+                else if (this._cornerHeaderCellIds[0].length > this._rowHeaderCellIds[0].length) {
+                    this._cornerHeaderCellIds.forEach((cellIds, index) => {
+                        cellIds.length = this._rowHeaderCellIds[0].length;
+                    });
+                }
+            }
+            else if (this.columnHierarchyType === 'grid-tree' && this.cornerSetting.titleOnDimension === 'row') {
+                if (this._cornerHeaderCellIds?.length < this._columnHeaderCellIds?.length) {
+                    const oldLength = this._cornerHeaderCellIds.length;
+                    this._cornerHeaderCellIds.length = this._columnHeaderCellIds.length;
+                    this._cornerHeaderCellIds.fill(this._cornerHeaderCellIds[0], oldLength);
+                }
+                else if (this._cornerHeaderCellIds?.length > this._columnHeaderCellIds?.length) {
+                    this._cornerHeaderCellIds.length = this._columnHeaderCellIds.length;
+                }
+            }
         }
         enableUseGetBodyCache() {
             this._useGetBodyCache = true;
@@ -76116,16 +76709,18 @@
         colHeaderTree;
         rowHeaderTree;
         rowHierarchyType;
+        columnHierarchyType;
         indicators;
         indicatorsAsCol;
         totalRecordsTree = {};
         hasExtensionRowTree;
         parseCustomTreeToMatchRecords;
-        constructor(dataConfig, rows, columns, indicatorKeys, indicators, indicatorsAsCol, records, rowHierarchyType, customColTree, customRowTree, needSplitPositiveAndNegative, hasExtensionRowTree, parseCustomTreeToMatchRecords) {
+        constructor(dataConfig, rows, columns, indicatorKeys, indicators, indicatorsAsCol, records, rowHierarchyType, columnHierarchyType, customColTree, customRowTree, needSplitPositiveAndNegative, hasExtensionRowTree, parseCustomTreeToMatchRecords) {
             this.registerAggregators();
             this.dataConfig = dataConfig;
             this.filterRules = this.dataConfig?.filterRules;
             this.rowHierarchyType = rowHierarchyType ?? 'grid';
+            this.columnHierarchyType = columnHierarchyType ?? 'grid';
             this.sortRules = this.dataConfig?.sortRules;
             this.aggregationRules = this.dataConfig?.aggregationRules;
             this.derivedFieldRules = this.dataConfig?.derivedFieldRules;
@@ -76496,7 +77091,7 @@
                         }
                         else if (this.dataConfig?.totals?.row?.subTotalsDimensions &&
                             this.dataConfig?.totals?.row?.subTotalsDimensions.indexOf(this.rows[l - 1]) >= 0) {
-                            if (this.rowHierarchyType === 'grid') {
+                            if (this.rowHierarchyType !== 'tree') {
                                 rowKey.push(this.rowSubTotalLabel);
                             }
                             isToTalRecord = true;
@@ -76808,6 +77403,14 @@
                         }
                     });
                 }
+                if (rowKey.length < this.rows.length && this.rowHierarchyType === 'grid-tree') {
+                    if (rowKey[0] === this.rowGrandTotalLabel) ;
+                    else if (this.totals?.row?.subTotalsDimensions &&
+                        this.totals?.row?.subTotalsDimensions?.length >= 1 &&
+                        rowKey[rowKey.length - 1] !== this.rowSubTotalLabel) {
+                        rowKey.push(this.rowSubTotalLabel);
+                    }
+                }
                 flatRowKey = join(rowKey, this.stringJoinChar);
             }
             if (typeof colKey === 'string') {
@@ -76821,6 +77424,14 @@
                         }
                     });
                 }
+                if (colKey.length < this.columns.length && this.columnHierarchyType === 'grid-tree') {
+                    if (colKey[0] === this.colGrandTotalLabel) ;
+                    else if (this.totals?.column?.subTotalsDimensions &&
+                        this.totals?.column?.subTotalsDimensions?.length >= 1 &&
+                        colKey[colKey.length - 1] !== this.colSubTotalLabel) {
+                        colKey.push(this.colSubTotalLabel);
+                    }
+                }
                 flatColKey = join(colKey, this.stringJoinChar);
             }
             const agg = this.tree[flatRowKey]?.[flatColKey]?.[indicatorIndex];
@@ -77141,7 +77752,7 @@
                                 const dimensionIndex = that.rows.indexOf(dimension);
                                 if (dimensionIndex >= 0 && dimensionIndex < that.rows.length - 1) {
                                     const rowTotalKey = rowKey.slice(0, dimensionIndex + 1);
-                                    if (this.rowHierarchyType === 'grid') {
+                                    if (this.rowHierarchyType !== 'tree') {
                                         rowTotalKey.push(that.rowSubTotalLabel);
                                     }
                                     const flatRowTotalKey = rowTotalKey.join(this.stringJoinChar);
@@ -77629,6 +78240,12 @@
             }
             super(container, options);
             if (options) {
+                if (!options.rowHierarchyType) {
+                    options.rowHierarchyType = 'grid';
+                }
+                if (!options.columnHierarchyType) {
+                    options.columnHierarchyType = 'grid';
+                }
                 if (options.layout) {
                     Object.assign(options, options.layout);
                 }
@@ -77657,8 +78274,8 @@
                     this.internalProps.recordsIsTwoDimensionalArray = true;
                 }
                 if (options.customConfig?.enableDataAnalysis === false) {
-                    const columnDimensionTree = new DimensionTree(this.internalProps.columnTree ?? [], this.layoutNodeId);
-                    const rowDimensionTree = new DimensionTree(this.internalProps.rowTree ?? [], this.layoutNodeId, this.options.rowHierarchyType, this.options.rowHierarchyType === 'tree' ? this.options.rowExpandLevel ?? 1 : undefined);
+                    const columnDimensionTree = new DimensionTree(this.internalProps.columnTree ?? [], this.layoutNodeId, this.options.columnHierarchyType, this.options.columnHierarchyType !== 'grid' ? this.options.columnExpandLevel ?? 1 : undefined);
+                    const rowDimensionTree = new DimensionTree(this.internalProps.rowTree ?? [], this.layoutNodeId, this.options.rowHierarchyType, this.options.rowHierarchyType !== 'grid' ? this.options.rowExpandLevel ?? 1 : undefined);
                     this.internalProps.layoutMap = new PivotHeaderLayoutMap(this, null, columnDimensionTree, rowDimensionTree);
                     if (this.internalProps.recordsIsTwoDimensionalArray === false) {
                         this.flatDataToObjects = new FlatDataToObjects({
@@ -77674,7 +78291,7 @@
                     const keysResults = parseColKeyRowKeyForPivotTable(this, options);
                     const { rowKeys, columnKeys, indicatorKeys } = keysResults;
                     let { columnDimensionTree, rowDimensionTree } = keysResults;
-                    this.dataset = new Dataset(this.internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, this.internalProps.indicators, options.indicatorsAsCol ?? true, options.records, options.rowHierarchyType, this.internalProps.columnTree, this.internalProps.rowTree, false, !!options.extensionRows, !!options.parseCustomTreeToMatchRecords);
+                    this.dataset = new Dataset(this.internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, this.internalProps.indicators, options.indicatorsAsCol ?? true, options.records, options.rowHierarchyType, options.columnHierarchyType, this.internalProps.columnTree, this.internalProps.rowTree, false, !!options.extensionRows, !!options.parseCustomTreeToMatchRecords);
                     if (!options.columnTree) {
                         if (options.indicatorsAsCol !== false) {
                             this.dataset.colHeaderTree = supplementIndicatorNodesForCustomTree(this.dataset.colHeaderTree, options.indicators);
@@ -77683,7 +78300,7 @@
                             options.indicators &&
                             this.dataset.colHeaderTree &&
                             deleteHideIndicatorNode(this.dataset.colHeaderTree, options.indicators, false, this);
-                        columnDimensionTree = new DimensionTree(this.dataset.colHeaderTree ?? [], this.layoutNodeId);
+                        columnDimensionTree = new DimensionTree(this.dataset.colHeaderTree ?? [], this.layoutNodeId, this.options.columnHierarchyType, this.options.columnHierarchyType !== 'grid' ? this.options.columnExpandLevel ?? 1 : undefined);
                     }
                     else {
                         if (columnDimensionTree.hasHideNode) {
@@ -77699,7 +78316,7 @@
                             this.dataset.rowHeaderTree &&
                             options.indicators &&
                             deleteHideIndicatorNode(this.dataset.rowHeaderTree, options.indicators, false, this);
-                        rowDimensionTree = new DimensionTree(this.dataset.rowHeaderTree ?? [], this.layoutNodeId, this.options.rowHierarchyType, this.options.rowHierarchyType === 'tree' ? this.options.rowExpandLevel ?? 1 : undefined);
+                        rowDimensionTree = new DimensionTree(this.dataset.rowHeaderTree ?? [], this.layoutNodeId, this.options.rowHierarchyType, this.options.rowHierarchyType !== 'grid' ? this.options.rowExpandLevel ?? 1 : undefined);
                     }
                     else {
                         if (rowDimensionTree.hasHideNode) {
@@ -77775,6 +78392,12 @@
         updateOption(options) {
             const internalProps = this.internalProps;
             super.updateOption(options);
+            if (!options.rowHierarchyType) {
+                options.rowHierarchyType = 'grid';
+            }
+            if (!options.columnHierarchyType) {
+                options.columnHierarchyType = 'grid';
+            }
             this.layoutNodeId = { seqId: 0 };
             this.internalProps.columns = cloneDeep$1(options.columns);
             this.internalProps.rows = cloneDeep$1(options.rows);
@@ -77797,8 +78420,8 @@
             internalProps.dataConfig = cloneDeep$1(options.dataConfig);
             this.internalProps.columnWidthConfig = options.columnWidthConfig;
             this.internalProps.columnWidthConfigForRowHeader = options.columnWidthConfigForRowHeader;
-            if (options?.rowHierarchyType === 'tree' &&
-                this.internalProps.layoutMap.rowHierarchyType === 'tree' &&
+            if (options?.rowHierarchyType !== 'grid' &&
+                this.internalProps.layoutMap.rowHierarchyType !== 'grid' &&
                 this.internalProps.layoutMap.rowExpandLevel === options?.rowExpandLevel) {
                 const beforeRowDimensions = this.internalProps.layoutMap.rowDimensionTree.tree.children;
                 this.internalProps.rowTree?.forEach((node, index) => {
@@ -77817,10 +78440,10 @@
                 let columnDimensionTree;
                 let rowDimensionTree;
                 if (options.columnTree) {
-                    columnDimensionTree = new DimensionTree(this.internalProps.columnTree ?? [], this.layoutNodeId);
+                    columnDimensionTree = new DimensionTree(this.internalProps.columnTree ?? [], this.layoutNodeId, this.options.columnHierarchyType, this.options.columnHierarchyType !== 'grid' ? this.options.columnExpandLevel ?? 1 : undefined);
                 }
                 if (options.rowTree) {
-                    rowDimensionTree = new DimensionTree(this.internalProps.rowTree ?? [], this.layoutNodeId, this.options.rowHierarchyType, this.options.rowHierarchyType === 'tree' ? this.options.rowExpandLevel ?? 1 : undefined);
+                    rowDimensionTree = new DimensionTree(this.internalProps.rowTree ?? [], this.layoutNodeId, this.options.rowHierarchyType, this.options.rowHierarchyType !== 'grid' ? this.options.rowExpandLevel ?? 1 : undefined);
                 }
                 internalProps.layoutMap = new PivotHeaderLayoutMap(this, null, columnDimensionTree, rowDimensionTree);
                 if (this.internalProps.recordsIsTwoDimensionalArray === false) {
@@ -77837,7 +78460,7 @@
                 const keysResults = parseColKeyRowKeyForPivotTable(this, options);
                 const { rowKeys, columnKeys, indicatorKeys } = keysResults;
                 let { columnDimensionTree, rowDimensionTree } = keysResults;
-                this.dataset = new Dataset(internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, this.internalProps.indicators, options.indicatorsAsCol ?? true, records, options.rowHierarchyType, this.internalProps.columnTree, this.internalProps.rowTree, false, !!options.extensionRows, !!options.parseCustomTreeToMatchRecords);
+                this.dataset = new Dataset(internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, this.internalProps.indicators, options.indicatorsAsCol ?? true, records, options.rowHierarchyType, options.columnHierarchyType, this.internalProps.columnTree, this.internalProps.rowTree, false, !!options.extensionRows, !!options.parseCustomTreeToMatchRecords);
                 if (!options.columnTree) {
                     if (options.indicatorsAsCol !== false) {
                         this.dataset.colHeaderTree = supplementIndicatorNodesForCustomTree(this.dataset.colHeaderTree, options.indicators);
@@ -77846,7 +78469,7 @@
                         options.indicators &&
                         this.dataset.colHeaderTree &&
                         deleteHideIndicatorNode(this.dataset.colHeaderTree, options.indicators, false, this);
-                    columnDimensionTree = new DimensionTree(this.dataset.colHeaderTree ?? [], this.layoutNodeId);
+                    columnDimensionTree = new DimensionTree(this.dataset.colHeaderTree ?? [], this.layoutNodeId, this.options.columnHierarchyType, this.options.columnHierarchyType !== 'grid' ? this.options.columnExpandLevel ?? 1 : undefined);
                 }
                 else {
                     if (columnDimensionTree.hasHideNode) {
@@ -77862,7 +78485,7 @@
                         this.dataset.rowHeaderTree &&
                         options.indicators &&
                         deleteHideIndicatorNode(this.dataset.rowHeaderTree, options.indicators, false, this);
-                    rowDimensionTree = new DimensionTree(this.dataset.rowHeaderTree ?? [], this.layoutNodeId, this.options.rowHierarchyType, this.options.rowHierarchyType === 'tree' ? this.options.rowExpandLevel ?? 1 : undefined);
+                    rowDimensionTree = new DimensionTree(this.dataset.rowHeaderTree ?? [], this.layoutNodeId, this.options.rowHierarchyType, this.options.rowHierarchyType !== 'grid' ? this.options.rowExpandLevel ?? 1 : undefined);
                 }
                 else {
                     if (rowDimensionTree.hasHideNode) {
@@ -77952,6 +78575,7 @@
                 table.rightFrozenColCount = this.options.rightFrozenColCount ?? 0;
             }
             this.stateManager.setFrozenCol(this.internalProps.frozenColCount);
+            this.stateManager.setFrozenRow(this.frozenRowCount);
         }
         _getSortFuncFromHeaderOption(columns, field, fieldKey) {
             return undefined;
@@ -77959,6 +78583,9 @@
         get rowHierarchyType() {
             return this.internalProps.layoutMap.rowHierarchyType;
         }
+        get columnHierarchyType() {
+            return this.internalProps.layoutMap.columnHierarchyType;
+        }
         _syncHierarchyState(sourceNode, targetNode) {
             if (sourceNode.value === targetNode.value && sourceNode.dimensionKey === targetNode.dimensionKey) {
                 targetNode.hierarchyState =
@@ -78651,6 +79278,11 @@
             }
         }
         _refreshHierarchyState(col, row, recalculateColWidths = true, beforeUpdateCell) {
+            this.frozenColCount;
+            this.frozenRowCount;
+            const visibleStartRow = this.getBodyVisibleRowRange().rowStart;
+            this.internalProps._oldRowCount = this.rowCount;
+            this.internalProps._oldColCount = this.colCount;
             let notFillWidth = false;
             let notFillHeight = false;
             this.stateManager.updateHoverIcon(col, row, undefined, undefined);
@@ -78663,13 +79295,28 @@
                     notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight;
                 }
             }
-            const result = this.internalProps.layoutMap.toggleHierarchyState(col, row);
+            const isChangeRowTree = this.internalProps.layoutMap.isRowHeader(col, row);
+            const result = isChangeRowTree
+                ? this.internalProps.layoutMap.toggleHierarchyState(col, row)
+                : this.internalProps.layoutMap.toggleHierarchyStateForColumnTree(col, row);
             beforeUpdateCell && beforeUpdateCell();
             this.refreshRowColCount();
+            this.frozenColCount;
+            this.frozenRowCount;
             this.clearCellStyleCache();
-            this.scenegraph.updateHierarchyIcon(col, row);
+            if (this.rowHierarchyType === 'tree') {
+                this.scenegraph.updateHierarchyIcon(col, row);
+            }
             this.reactCustomLayout?.clearCache();
-            this.scenegraph.updateRow(result.removeCellPositions, result.addCellPositions, result.updateCellPositions, recalculateColWidths);
+            if (this.rowHierarchyType !== 'grid-tree' && this.columnHierarchyType !== 'grid-tree') {
+                this.scenegraph.updateRow(result.removeCellPositionsRowDirection, result.addCellPositionsRowDirection, result.updateCellPositionsRowDirection, recalculateColWidths);
+            }
+            else {
+                this.scenegraph.clearCells();
+                this.clearCellStyleCache();
+                this.scenegraph.createSceneGraph();
+                this.scrollToRow(visibleStartRow);
+            }
             this.reactCustomLayout?.updateAllCustomCell();
             if (checkHasChart) {
                 if (this.autoFillWidth && !notFillWidth) {
@@ -78682,6 +79329,8 @@
                     this.scenegraph.updateChartSizeForResizeColWidth(-1);
                 }
             }
+            this.internalProps._oldRowCount = undefined;
+            this.internalProps._oldColCount = undefined;
         }
         getHeaderCellAddressByPath(dimensionPaths) {
             const cellAddress = this.internalProps.layoutMap.getPivotCellAdress(dimensionPaths);
@@ -78726,9 +79375,6 @@
             const headerNodes = layoutMap.getCellHeaderPathsWithTreeNode(col, row);
             return headerNodes;
         }
-        _hasHierarchyTreeHeader() {
-            return this.internalProps.layoutMap.rowHierarchyType === 'tree';
-        }
         getMenuInfo(col, row, type) {
             const dimensionInfos = this.internalProps.layoutMap.getPivotDimensionInfo(col, row);
             const result = {
@@ -78772,7 +79418,7 @@
                         options.indicators &&
                         this.dataset.colHeaderTree &&
                         deleteHideIndicatorNode(this.dataset.colHeaderTree, options.indicators, false, this);
-                    columnDimensionTree = new DimensionTree(this.dataset.colHeaderTree ?? [], this.layoutNodeId);
+                    columnDimensionTree = new DimensionTree(this.dataset.colHeaderTree ?? [], this.layoutNodeId, this.options.columnHierarchyType, this.options.columnHierarchyType !== 'grid' ? this.options.columnExpandLevel ?? 1 : undefined);
                 }
                 if (options.rowTree) {
                     rowDimensionTree = internalProps.layoutMap.rowDimensionTree;
@@ -78782,7 +79428,7 @@
                         this.dataset.rowHeaderTree &&
                         options.indicators &&
                         deleteHideIndicatorNode(this.dataset.rowHeaderTree, options.indicators, false, this);
-                    rowDimensionTree = new DimensionTree(this.dataset.rowHeaderTree ?? [], this.layoutNodeId, this.options.rowHierarchyType, this.options.rowHierarchyType === 'tree' ? this.options.rowExpandLevel ?? 1 : undefined);
+                    rowDimensionTree = new DimensionTree(this.dataset.rowHeaderTree ?? [], this.layoutNodeId, this.options.rowHierarchyType, this.options.rowHierarchyType !== 'grid' ? this.options.rowExpandLevel ?? 1 : undefined);
                 }
                 internalProps.layoutMap = new PivotHeaderLayoutMap(this, this.dataset, columnDimensionTree, rowDimensionTree);
                 this.pivotSortState = [];
@@ -79275,7 +79921,7 @@
             this.internalProps.dataConfig.collectValuesBy = this._generateCollectValuesConfig(columnKeys, rowKeys);
             this.internalProps.dataConfig.aggregationRules = this._generateAggregationRules();
             this.internalProps.dataConfig.dimensionSortArray = this._getDimensionSortArray();
-            this.dataset = new Dataset(this.internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, this.internalProps.indicators, options.indicatorsAsCol ?? true, options.records, undefined, this.internalProps.columnTree, this.internalProps.rowTree, true);
+            this.dataset = new Dataset(this.internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, this.internalProps.indicators, options.indicatorsAsCol ?? true, options.records, undefined, undefined, this.internalProps.columnTree, this.internalProps.rowTree, true);
             if (this.options.indicatorsAsCol && checkHasCartesianChart(this.internalProps.indicators)) {
                 const supplyAxisNode = (nodes) => {
                     nodes.forEach((node) => {
@@ -79435,7 +80081,7 @@
             this.internalProps.dataConfig.collectValuesBy = this._generateCollectValuesConfig(columnKeys, rowKeys);
             this.internalProps.dataConfig.aggregationRules = this._generateAggregationRules();
             this.internalProps.dataConfig.dimensionSortArray = this._getDimensionSortArray();
-            this.dataset = new Dataset(this.internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, this.internalProps.indicators, options.indicatorsAsCol ?? true, options.records ?? this.internalProps.records, undefined, this.internalProps.columnTree, this.internalProps.rowTree, true);
+            this.dataset = new Dataset(this.internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, this.internalProps.indicators, options.indicatorsAsCol ?? true, options.records ?? this.internalProps.records, undefined, undefined, this.internalProps.columnTree, this.internalProps.rowTree, true);
             if (this.options.indicatorsAsCol && checkHasCartesianChart(this.internalProps.indicators)) {
                 const supplyAxisNode = (nodes) => {
                     nodes.forEach((node) => {
@@ -79766,9 +80412,6 @@
         getHierarchyState(col, row) {
             return this._getHeaderLayoutMap(col, row)?.hierarchyState;
         }
-        _hasHierarchyTreeHeader() {
-            return this.internalProps.layoutMap.rowHierarchyType === 'tree';
-        }
         getMenuInfo(col, row, type) {
             const dimensionInfos = this.internalProps.layoutMap.getPivotDimensionInfo(col, row);
             const result = {
@@ -80566,7 +81209,7 @@
         }, []) ?? [];
         dataConfig.collectValuesBy = _generateCollectValuesConfig(options, columnKeys, rowKeys);
         dataConfig.aggregationRules = _generateAggregationRules(options);
-        const dataset = new Dataset(dataConfig, rowKeys, columnKeys, indicatorKeys, options.indicators, options.indicatorsAsCol ?? true, options.records, undefined, columnTree || options.columnTree, rowTree || options.rowTree, true);
+        const dataset = new Dataset(dataConfig, rowKeys, columnKeys, indicatorKeys, options.indicators, options.indicatorsAsCol ?? true, options.records, undefined, undefined, columnTree || options.columnTree, rowTree || options.rowTree, true);
         return { dataset, columnDimensionTree, rowDimensionTree, layoutNodeId };
     }
     function _generateCollectValuesConfig(option, columnKeys, rowKeys) {
@@ -80813,7 +81456,7 @@
     }
 
     registerForVrender();
-    const version = "1.15.2";
+    const version = "1.16.0-alpha.0";
     function getIcons() {
         return get$2();
     }