@visactor/vtable 1.19.4-alpha.0 → 1.19.4-alpha.2

package/dist/vtable.js

@@ -9856,7 +9856,7 @@
       }
       removeChild(child) {
         const data = super.removeChild(child);
-        return child.stage = null, this.getGraphicService().onRemove(child), this.addUpdateBoundTag(), data;
+        return this.getGraphicService().onRemove(child), child.stage = null, this.addUpdateBoundTag(), data;
       }
       removeAllChild(deep = !1) {
         this.forEachChildren(child => {
@@ -12786,9 +12786,10 @@
         return super.needUpdateTag(key, POLYGON_UPDATE_TAG_KEY);
       }
       toCustomPath() {
-        const points = this.attribute.points,
-          path = new CustomPath2D();
-        return points.forEach((point, index) => {
+        let path = super.toCustomPath();
+        if (path) return path;
+        const points = this.attribute.points;
+        return path = new CustomPath2D(), points.forEach((point, index) => {
           0 === index ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y);
         }), path.closePath(), path;
       }
@@ -16048,6 +16049,7 @@
         drawContext.updateBounds ? this.useDirtyBounds = !0 : this.useDirtyBounds = !drawContext.stage.params.optimize.disableCheckGraphicWidthOutRange;
       }
       draw(renderService, drawContext) {
+        var _a;
         this.prepareForDraw(renderService, drawContext), drawContext.drawContribution = this, this.currentRenderMap = this.styleRenderMap.get(drawContext.renderStyle) || this.defaultRenderMap, this.currentRenderService = renderService;
         const {
           context: context,
@@ -16062,7 +16064,7 @@
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         const d = context.dpr % 1;
-        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), renderService.renderTreeRoots.sort((a, b) => {
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearScreen.call(renderService.drawParams), renderService.renderTreeRoots.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
@@ -16741,13 +16743,16 @@
           } else this._skipRender = 1;
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
+        }, this.afterClearScreen = drawParams => {
+          this._afterClearScreen && this._afterClearScreen(drawParams);
         }, this.afterRender = stage => {
           this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
         }, this.afterTickCb = () => {
           this.tickedBeforeRender = !0, "rendering" !== this.state && this.renderNextFrame();
         }, this.params = params, this.theme = new Theme(), this.hooks = {
           beforeRender: new SyncHook(["stage"]),
-          afterRender: new SyncHook(["stage"])
+          afterRender: new SyncHook(["stage"]),
+          afterClearScreen: new SyncHook(["stage"])
         }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this.window.create({
           width: params.width,
           height: params.height,
@@ -16759,7 +16764,7 @@
           canvas: params.canvas
         }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
           main: !0
-        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
+        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this._afterClearScreen = params.afterClearScreen, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
           tickRenderMode: "effect"
         }), this.optmize(params.optimize), params.background && isString$6(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
@@ -17154,7 +17159,7 @@
         return this._cursor;
       }
       eventPointTransform(e) {
-        const point = this.global.mapToCanvasPoint(e, this.window.getContext().canvas.nativeCanvas);
+        const point = this.global.mapToCanvasPoint(e, this.window);
         return this.stage.window.pointTransform(point.x, point.y);
       }
       pauseTriggerEvent() {
@@ -24557,6 +24562,14 @@
           state.executor.stop();
         }), this.stateList = null;
       }
+      reApplyState(state) {
+        var _a;
+        const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
+        if (stateInfo) {
+          const stateList = this.stateList.slice();
+          stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
+        }
+      }
     }
 
     class GraphicStateExtension {
@@ -24587,11 +24600,20 @@
       applyUnhighlightState(animationConfig, callback) {
         return this._getAnimationStateManager(this).applyUnhighlightState(animationConfig, callback), this;
       }
-      stopAnimationState(state, type) {
-        return this._getAnimationStateManager(this).stopState(state, type), this;
+      stopAnimationState(state, type, deep = !1) {
+        return this._getAnimationStateManager(this).stopState(state, type), deep && this.isContainer && this.forEachChildren(child => {
+          child.stopAnimationState(state, type, deep);
+        }), this;
       }
       clearAnimationStates() {
-        return this._getAnimationStateManager(this).clearState(), this;
+        const stateManager = this._animationStateManager;
+        return stateManager && stateManager.clearState(), this;
+      }
+      reApplyAnimationState(state, deep = !1) {
+        const stateManager = this._animationStateManager;
+        return stateManager && stateManager.reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
+          child.reApplyAnimationState(state, deep);
+        }), this;
       }
       static extend(graphic) {
         return new GraphicStateExtension()._getAnimationStateManager(graphic), graphic;
@@ -24644,6 +24666,21 @@
       getGraphicAttribute(key, prev = !1) {
         return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
       }
+      pauseAnimation(deep = !1) {
+        this.animates && this.animates.forEach(animate => animate.pause()), deep && this.isContainer && this.forEachChildren(child => {
+          child.pauseAnimation(deep);
+        });
+      }
+      resumeAnimation(deep = !1) {
+        this.animates && this.animates.forEach(animate => animate.resume()), deep && this.isContainer && this.forEachChildren(child => {
+          child.resumeAnimation(deep);
+        });
+      }
+      stopAnimation(deep = !1) {
+        this.animates && this.animates.forEach(animate => animate.stop()), deep && this.isContainer && this.forEachChildren(child => {
+          child.stopAnimation(deep);
+        });
+      }
     }
 
     function registerAnimate() {
@@ -25205,7 +25242,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -25214,7 +25251,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+        finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -25312,7 +25349,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -25321,7 +25358,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+        finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -27172,16 +27209,15 @@
         changedY = 0;
       "negative" === orient && (changedX = null !== (_a = layoutRect.width) && void 0 !== _a ? _a : graphic.stage.viewWidth, changedY = null !== (_b = layoutRect.height) && void 0 !== _b ? _b : graphic.stage.viewHeight), changedX += offset, changedY += offset;
       const point = isFunction$7(pointOpt) ? pointOpt.call(null, null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, animationParameters) : pointOpt,
-        fromX = point && isValidNumber$3(point.x) ? point.x : changedX,
-        fromY = point && isValidNumber$3(point.y) ? point.y : changedY,
-        finalAttrs = graphic.getFinalAttribute(),
-        finalAttrsX = excludeChannels.includes("x") ? graphic.attribute.x : finalAttrs.x,
-        finalAttrsY = excludeChannels.includes("y") ? graphic.attribute.y : finalAttrs.y;
+        finalAttrsX = graphic.getGraphicAttribute("x"),
+        finalAttrsY = graphic.getGraphicAttribute("y"),
+        fromX = excludeChannels.includes("x") ? finalAttrsX : point && isValidNumber$3(point.x) ? point.x : changedX,
+        fromY = excludeChannels.includes("y") ? finalAttrsY : point && isValidNumber$3(point.y) ? point.y : changedY;
       switch (direction) {
         case "x":
           return {
             from: {
-              x: fromX
+              x: excludeChannels.includes("x") ? finalAttrsX : fromX
             },
             to: {
               x: finalAttrsX
@@ -27229,7 +27265,7 @@
         case "x":
           return {
             from: {
-              x: graphic.attribute.x
+              x: graphic.getGraphicAttribute("x")
             },
             to: {
               x: fromX
@@ -27238,7 +27274,7 @@
         case "y":
           return {
             from: {
-              y: graphic.attribute.y
+              y: graphic.getGraphicAttribute("y")
             },
             to: {
               y: fromY
@@ -27247,8 +27283,8 @@
         default:
           return {
             from: {
-              x: graphic.attribute.x,
-              y: graphic.attribute.y
+              x: graphic.getGraphicAttribute("x"),
+              y: graphic.getGraphicAttribute("y")
             },
             to: {
               x: fromX,
@@ -27466,9 +27502,8 @@
             w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX),
             width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
           this.rect.setAttributes({
-            x: x,
-            width: width,
-            dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
+            x: x + Math.min(parentAttr.x1 - parentAttr.x, 0),
+            width: width
           }, !1, {
             type: AttributeUpdateType.ANIMATE_PLAY,
             animationState: {
@@ -27485,9 +27520,8 @@
           const h = Math.min(parentHeight - currentY, maxLength);
           let height;
           y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
-            y: y,
-            height: height,
-            dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
+            y: y + Math.min(parentAttr.y1 - parentAttr.y, 0),
+            height: height
           }, !1, {
             type: AttributeUpdateType.ANIMATE_PLAY,
             animationState: {
@@ -34605,6 +34639,21 @@
             obj[childrenProperty].forEach((child) => traverseObject(child, childrenProperty, callback));
         }
     }
+    function computeChildrenNodeLength(indexKey, hierarchyState, nodeData) {
+        let size = 0;
+        if (!hierarchyState || hierarchyState === HierarchyState.collapse || hierarchyState === HierarchyState.none) {
+            return size;
+        }
+        const children = nodeData.filteredChildren ? nodeData.filteredChildren : nodeData.children;
+        if (children) {
+            for (let i = 0; i < children.length; i++) {
+                size += 1;
+                const childIndex = Array.isArray(indexKey) ? indexKey.concat([i]) : [indexKey, i];
+                size += computeChildrenNodeLength(childIndex, children[i].hierarchyState, children[i]);
+            }
+        }
+        return size;
+    }
 
     const isNode = typeof window === 'undefined' || typeof window.window === 'undefined';
     let arrayFind;
@@ -37286,21 +37335,7 @@
                 this.hasHierarchyStateExpand = true;
             }
             else if (state === HierarchyState.expand) {
-                let childrenLength = 0;
-                const computeChildrenNodeLength = (indexKey, hierarchyState, nodeData) => {
-                    if (!hierarchyState || hierarchyState === HierarchyState.collapse || hierarchyState === HierarchyState.none) {
-                        return;
-                    }
-                    const children = nodeData.filteredChildren ? nodeData.filteredChildren : nodeData.children;
-                    if (children) {
-                        for (let i = 0; i < children.length; i++) {
-                            childrenLength += 1;
-                            const childIndex = Array.isArray(indexKey) ? indexKey.concat([i]) : [indexKey, i];
-                            computeChildrenNodeLength(childIndex, children[i].hierarchyState, children[i]);
-                        }
-                    }
-                };
-                computeChildrenNodeLength(indexed, state, data);
+                const childrenLength = computeChildrenNodeLength(indexed, state, data);
                 this.currentIndexedData.splice(this.currentIndexedData.indexOf(indexed) + 1, childrenLength);
                 data.hierarchyState = HierarchyState.collapse;
             }
@@ -39662,7 +39697,7 @@
         }
         cacheBeforeChangedRecord(dataIndex, table) {
             const originRecord = this.getOriginalRecord(dataIndex);
-            if (table.options.groupBy) {
+            if (table.internalProps.groupBy) {
                 dataIndex = this.getOriginRecordIndexForGroup(dataIndex);
             }
             if (!this.beforeChangedRecordsMap.has(dataIndex.toString())) {
@@ -40225,7 +40260,7 @@
         if (table.options.hierarchyExpandLevel) {
             return table.options.hierarchyExpandLevel;
         }
-        else if (table.options.groupBy) {
+        else if (table.internalProps.groupBy) {
             return Infinity;
         }
         return table._hasHierarchyTreeHeader?.() ? 1 : undefined;
@@ -42336,7 +42371,7 @@
             }
         }
         else {
-            if (table.options.groupBy ||
+            if (table.internalProps.groupBy ||
                 table.getBodyColumnDefine(col, row)?.tree) {
                 const indexArr = table.dataSource.getIndexKey(table.getRecordShowIndexByCell(col, row));
                 const groupLength = table.dataSource.getGroupLength() ?? 0;
@@ -43617,11 +43652,11 @@
             isVtableMerge = vtableMerge;
             if (vtableMerge) {
                 mayHaveIcon = true;
-                if (table.options.groupTitleCustomLayout) {
-                    customResult = dealWithCustom(table.options.groupTitleCustomLayout, undefined, range.start.col, range.start.row, table.getColsWidth(range.start.col, range.end.col), table.getRowsHeight(range.start.row, range.end.row), false, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table);
+                if (table.internalProps.groupTitleCustomLayout) {
+                    customResult = dealWithCustom(table.internalProps.groupTitleCustomLayout, undefined, range.start.col, range.start.row, table.getColsWidth(range.start.col, range.end.col), table.getRowsHeight(range.start.row, range.end.row), false, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table);
                 }
-                if (table.options.groupTitleFieldFormat) {
-                    value = table.options.groupTitleFieldFormat(rawRecord, col, row, table);
+                if (table.internalProps.groupTitleFieldFormat) {
+                    value = table.internalProps.groupTitleFieldFormat(rawRecord, col, row, table);
                 }
                 else if (vtableMergeName !== undefined) {
                     value = vtableMergeName;
@@ -43660,8 +43695,11 @@
             });
             const textMark = oldCellGroup.getChildByName('text');
             if (forceFastUpdate && textMark) {
+                const textAlign = cellTheme.text.textAlign;
+                const hierarchyOffset = getHierarchyOffset(col, row, table);
                 const attribute = {
-                    textBaseline: 'top'
+                    textBaseline: 'top',
+                    dx: textAlign === 'left' ? hierarchyOffset : 0
                 };
                 textMark.setAttributes(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
             }
@@ -43722,8 +43760,8 @@
         const type = isVtableMerge || isCustomMerge
             ? 'text'
             : table.isHeader(col, row)
-                ? (table._getHeaderLayoutMap(col, row).headerType ?? 'text')
-                : (table.getBodyColumnType(col, row) ?? 'text');
+                ? table._getHeaderLayoutMap(col, row).headerType ?? 'text'
+                : table.getBodyColumnType(col, row) ?? 'text';
         const padding = cellTheme._vtable.padding;
         const textAlign = cellTheme.text.textAlign;
         const textBaseline = cellTheme.text.textBaseline;
@@ -45094,8 +45132,8 @@
                     let customLayout;
                     const cellLocation = scene.table.getCellLocation(col, row);
                     const { vtableMerge } = scene.table.getCellRawRecord(col, row) || {};
-                    if (vtableMerge && scene.table.options.groupTitleCustomLayout) {
-                        customLayout = scene.table.options.groupTitleCustomLayout;
+                    if (vtableMerge && scene.table.internalProps.groupTitleCustomLayout) {
+                        customLayout = scene.table.internalProps.groupTitleCustomLayout;
                     }
                     else if (cellLocation !== 'body') {
                         const define = scene.table.getHeaderDefine(col, row);
@@ -45451,8 +45489,8 @@
                     let customLayout;
                     const cellType = scene.table.getCellLocation(col, row);
                     const { vtableMerge } = scene.table.getCellRawRecord(col, row) || {};
-                    if (vtableMerge && scene.table.options.groupTitleCustomLayout) {
-                        customLayout = scene.table.options.groupTitleCustomLayout;
+                    if (vtableMerge && scene.table.internalProps.groupTitleCustomLayout) {
+                        customLayout = scene.table.internalProps.groupTitleCustomLayout;
                     }
                     else if (cellType !== 'body') {
                         const define = scene.table.getHeaderDefine(col, row);
@@ -47131,6 +47169,114 @@
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
+    function getCellHoverColor(cellGroup, table) {
+        let colorKey;
+        if (cellGroup.role === 'cell' &&
+            isValid$3(cellGroup.mergeStartCol) &&
+            isValid$3(cellGroup.mergeStartRow) &&
+            isValid$3(cellGroup.mergeEndCol) &&
+            isValid$3(cellGroup.mergeEndRow)) {
+            const { colStart, colEnd, rowStart, rowEnd } = getCellMergeRange(cellGroup, table.scenegraph);
+            for (let col = colStart; col <= colEnd; col++) {
+                for (let row = rowStart; row <= rowEnd; row++) {
+                    const key = isCellHover(table.stateManager, col, row, cellGroup);
+                    if (key && (!colorKey || key === 'cellBgColor')) {
+                        colorKey = key;
+                    }
+                }
+            }
+        }
+        else if (cellGroup.role === 'cell') {
+            colorKey = isCellHover(table.stateManager, cellGroup.col, cellGroup.row, cellGroup);
+        }
+        if (!colorKey) {
+            return undefined;
+        }
+        let hoverStyle;
+        const layout = table.internalProps.layoutMap;
+        if (layout.isCornerHeader(cellGroup.col, cellGroup.row)) {
+            hoverStyle = table.theme.cornerHeaderStyle?.hover || table.theme.headerStyle?.hover;
+        }
+        else if (layout.isColumnHeader(cellGroup.col, cellGroup.row)) {
+            hoverStyle = table.theme.headerStyle?.hover;
+        }
+        else if (layout.isRowHeader(cellGroup.col, cellGroup.row)) {
+            hoverStyle = table.theme.rowHeaderStyle?.hover;
+        }
+        else if (layout.isBottomFrozenRow(cellGroup.col, cellGroup.row)) {
+            hoverStyle =
+                table.theme.bottomFrozenStyle?.hover ||
+                    (table.isListTable() ? table.theme.bodyStyle?.hover : table.theme.headerStyle?.hover);
+        }
+        else if (layout.isRightFrozenColumn(cellGroup.col, cellGroup.row)) {
+            hoverStyle =
+                table.theme.rightFrozenStyle?.hover ||
+                    (table.isListTable() ? table.theme.bodyStyle?.hover : table.theme.rowHeaderStyle?.hover);
+        }
+        else if (!table.isHeader(cellGroup.col, cellGroup.row)) {
+            hoverStyle = table.theme.bodyStyle?.hover;
+        }
+        const fillColor = getProp(colorKey, hoverStyle, cellGroup.col, cellGroup.row, table);
+        return fillColor;
+    }
+    function isCellHover(state, col, row, cellGroup) {
+        const { highlightScope, disableHeader, cellPos } = state.hover;
+        const table = state.table;
+        const isHeader = table.isHeader(col, row);
+        if (isHeader && disableHeader) {
+            return undefined;
+        }
+        let hoverMode;
+        if (highlightScope === HighlightScope.single && cellPos.col === col && cellPos.row === row) {
+            hoverMode = 'cellBgColor';
+        }
+        else if (highlightScope === HighlightScope.column && cellPos.col === col) {
+            if (cellPos.col === col && cellPos.row === row) {
+                hoverMode = 'cellBgColor';
+            }
+            else {
+                hoverMode = 'inlineColumnBgColor';
+            }
+        }
+        else if (highlightScope === HighlightScope.row && cellPos.row === row) {
+            if (cellPos.col === col && cellPos.row === row) {
+                hoverMode = 'cellBgColor';
+            }
+            else {
+                hoverMode = 'inlineRowBgColor';
+            }
+        }
+        else if (highlightScope === HighlightScope.cross) {
+            if (cellPos.col === col && cellPos.row === row) {
+                hoverMode = 'cellBgColor';
+            }
+            else if (cellPos.col === col) {
+                hoverMode = 'inlineColumnBgColor';
+            }
+            else if (cellPos.row === row) {
+                hoverMode = 'inlineRowBgColor';
+            }
+        }
+        if (hoverMode) {
+            let cellDisable;
+            if (isHeader) {
+                const define = table.getHeaderDefine(col, row);
+                cellDisable = define?.disableHeaderHover;
+                if (cellGroup.firstChild && cellGroup.firstChild.name === 'axis' && table.options.hover?.disableAxisHover) {
+                    cellDisable = true;
+                }
+            }
+            else {
+                const define = table.getBodyColumnDefine(col, row);
+                cellDisable = define?.disableHover;
+            }
+            if (cellDisable) {
+                hoverMode = undefined;
+            }
+        }
+        return hoverMode;
+    }
+
     const CHART_NUMBER_TYPE = genNumberType();
     class Chart extends Rect$2 {
         type = 'chart';
@@ -47166,6 +47312,7 @@
         activate(table) {
             this.active = true;
             const { col, row } = this.parent;
+            const hoverColor = getCellHoverColor(this.parent, table);
             const { x1, y1, x2, y2 } = this.getViewBox();
             const tableBound = getTableBounds(col, row, table);
             const clipBound = tableBound.intersect({
@@ -47214,6 +47361,15 @@
                     ctx.inuse = false;
                     stage.needRender = false;
                     chartStage.resumeRender();
+                },
+                afterClearScreen(drawParams) {
+                    const { context, layer, viewBox } = drawParams;
+                    if (layer.main) {
+                        context.beginPath();
+                        context.fillStyle = hoverColor;
+                        context.rect(viewBox.x1, viewBox.y1, viewBox.x2 - viewBox.x1, viewBox.y2 - viewBox.y1);
+                        context.fill();
+                    }
                 }
             }));
             const chartStage = this.activeChartInstance.getStage();
@@ -47684,114 +47840,6 @@
         injectable()
     ], AfterGifImageRenderContribution);
 
-    function getCellHoverColor(cellGroup, table) {
-        let colorKey;
-        if (cellGroup.role === 'cell' &&
-            isValid$3(cellGroup.mergeStartCol) &&
-            isValid$3(cellGroup.mergeStartRow) &&
-            isValid$3(cellGroup.mergeEndCol) &&
-            isValid$3(cellGroup.mergeEndRow)) {
-            const { colStart, colEnd, rowStart, rowEnd } = getCellMergeRange(cellGroup, table.scenegraph);
-            for (let col = colStart; col <= colEnd; col++) {
-                for (let row = rowStart; row <= rowEnd; row++) {
-                    const key = isCellHover(table.stateManager, col, row, cellGroup);
-                    if (key && (!colorKey || key === 'cellBgColor')) {
-                        colorKey = key;
-                    }
-                }
-            }
-        }
-        else if (cellGroup.role === 'cell') {
-            colorKey = isCellHover(table.stateManager, cellGroup.col, cellGroup.row, cellGroup);
-        }
-        if (!colorKey) {
-            return undefined;
-        }
-        let hoverStyle;
-        const layout = table.internalProps.layoutMap;
-        if (layout.isCornerHeader(cellGroup.col, cellGroup.row)) {
-            hoverStyle = table.theme.cornerHeaderStyle?.hover || table.theme.headerStyle?.hover;
-        }
-        else if (layout.isColumnHeader(cellGroup.col, cellGroup.row)) {
-            hoverStyle = table.theme.headerStyle?.hover;
-        }
-        else if (layout.isRowHeader(cellGroup.col, cellGroup.row)) {
-            hoverStyle = table.theme.rowHeaderStyle?.hover;
-        }
-        else if (layout.isBottomFrozenRow(cellGroup.col, cellGroup.row)) {
-            hoverStyle =
-                table.theme.bottomFrozenStyle?.hover ||
-                    (table.isListTable() ? table.theme.bodyStyle?.hover : table.theme.headerStyle?.hover);
-        }
-        else if (layout.isRightFrozenColumn(cellGroup.col, cellGroup.row)) {
-            hoverStyle =
-                table.theme.rightFrozenStyle?.hover ||
-                    (table.isListTable() ? table.theme.bodyStyle?.hover : table.theme.rowHeaderStyle?.hover);
-        }
-        else if (!table.isHeader(cellGroup.col, cellGroup.row)) {
-            hoverStyle = table.theme.bodyStyle?.hover;
-        }
-        const fillColor = getProp(colorKey, hoverStyle, cellGroup.col, cellGroup.row, table);
-        return fillColor;
-    }
-    function isCellHover(state, col, row, cellGroup) {
-        const { highlightScope, disableHeader, cellPos } = state.hover;
-        const table = state.table;
-        const isHeader = table.isHeader(col, row);
-        if (isHeader && disableHeader) {
-            return undefined;
-        }
-        let hoverMode;
-        if (highlightScope === HighlightScope.single && cellPos.col === col && cellPos.row === row) {
-            hoverMode = 'cellBgColor';
-        }
-        else if (highlightScope === HighlightScope.column && cellPos.col === col) {
-            if (cellPos.col === col && cellPos.row === row) {
-                hoverMode = 'cellBgColor';
-            }
-            else {
-                hoverMode = 'inlineColumnBgColor';
-            }
-        }
-        else if (highlightScope === HighlightScope.row && cellPos.row === row) {
-            if (cellPos.col === col && cellPos.row === row) {
-                hoverMode = 'cellBgColor';
-            }
-            else {
-                hoverMode = 'inlineRowBgColor';
-            }
-        }
-        else if (highlightScope === HighlightScope.cross) {
-            if (cellPos.col === col && cellPos.row === row) {
-                hoverMode = 'cellBgColor';
-            }
-            else if (cellPos.col === col) {
-                hoverMode = 'inlineColumnBgColor';
-            }
-            else if (cellPos.row === row) {
-                hoverMode = 'inlineRowBgColor';
-            }
-        }
-        if (hoverMode) {
-            let cellDisable;
-            if (isHeader) {
-                const define = table.getHeaderDefine(col, row);
-                cellDisable = define?.disableHeaderHover;
-                if (cellGroup.firstChild && cellGroup.firstChild.name === 'axis' && table.options.hover?.disableAxisHover) {
-                    cellDisable = true;
-                }
-            }
-            else {
-                const define = table.getBodyColumnDefine(col, row);
-                cellDisable = define?.disableHover;
-            }
-            if (cellDisable) {
-                hoverMode = undefined;
-            }
-        }
-        return hoverMode;
-    }
-
     function getCellSelectColor(cellGroup, table) {
         let colorKey;
         if (cellGroup.role === 'cell' &&
@@ -49724,11 +49772,11 @@
                 isVtableMerge = vtableMerge;
                 if (vtableMerge) {
                     mayHaveIcon = true;
-                    if (table.options.groupTitleCustomLayout) {
-                        customResult = dealWithCustom(table.options.groupTitleCustomLayout, undefined, range.start.col, range.start.row, table.getColsWidth(range.start.col, range.end.col), table.getRowsHeight(range.start.row, range.end.row), false, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table);
+                    if (table.internalProps.groupTitleCustomLayout) {
+                        customResult = dealWithCustom(table.internalProps.groupTitleCustomLayout, undefined, range.start.col, range.start.row, table.getColsWidth(range.start.col, range.end.col), table.getRowsHeight(range.start.row, range.end.row), false, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table);
                     }
-                    if (table.options.groupTitleFieldFormat) {
-                        value = table.options.groupTitleFieldFormat(rawRecord, col, row, table);
+                    if (table.internalProps.groupTitleFieldFormat) {
+                        value = table.internalProps.groupTitleFieldFormat(rawRecord, col, row, table);
                     }
                     else if (vtableMergeName !== undefined) {
                         value = vtableMergeName;
@@ -49737,9 +49785,9 @@
             }
             const type = isVtableMerge || isCustomMerge
                 ? 'text'
-                : ((table.isHeader(col, row)
-                    ? (table._getHeaderLayoutMap(col, row).headerType ?? 'text')
-                    : table.getBodyColumnType(col, row)) ?? 'text');
+                : (table.isHeader(col, row)
+                    ? table._getHeaderLayoutMap(col, row).headerType ?? 'text'
+                    : table.getBodyColumnType(col, row)) ?? 'text';
             if (isPromise(value)) {
                 createEmptyCellGroup(col, row, 0, y, cellWidth, cellHeight, columnGroup);
                 dealPromiseData(value, table, callCreateCellForPromiseValue.bind(null, {
@@ -53786,7 +53834,7 @@
         const height = scene.table.tableNoFrameHeight;
         scene.tableGroup = new Group$1({ x: 0, y: 0, width, height, clip: true, pickable: false });
         scene.tableGroup.role = 'table';
-        const colHeaderGroup = createContainerGroup(0, 0, !scene.table.options.enableTreeStickCell);
+        const colHeaderGroup = createContainerGroup(0, 0, !scene.table.internalProps.enableTreeStickCell);
         colHeaderGroup.role = 'col-header';
         scene.colHeaderGroup = colHeaderGroup;
         const cornerHeaderGroup = createContainerGroup(0, 0, !scene.table.options.enableTreeStickCell);
@@ -56211,6 +56259,8 @@
         if (prevHoverCellCol === col && prevHoverCellRow === row) {
             return;
         }
+        cellPos.col = col;
+        cellPos.row = row;
         if (!state.table.options.customConfig?.disableBuildInChartActive) {
             scenegraph.deactivateChart(prevHoverCellCol, prevHoverCellRow);
             scenegraph.activateChart(col, row);
@@ -56251,8 +56301,6 @@
         if (highlightScope !== HighlightScope.none && !disableHeader) {
             scenegraph.showHoverIcon(col, row);
         }
-        cellPos.col = col;
-        cellPos.row = row;
         if (updateScenegraph) {
             state.table.scenegraph.updateNextFrame();
         }
@@ -57000,6 +57048,12 @@
         state.columnMove.moving = true;
         state.columnMove.colSource = col;
         state.columnMove.rowSource = row;
+        if (state.table.isListTable()) {
+            const nodeIndex = state.table.getRecordIndexByCell(col, row);
+            const nodeData = state.table.getRecordByCell(col, row);
+            const hierarchyState = state.table.getRecordHierarchyState(col, row);
+            state.columnMove.rowSourceSize = computeChildrenNodeLength(nodeIndex, hierarchyState, nodeData) + 1;
+        }
         state.columnMove.x = x - state.table.tableX;
         state.columnMove.y = y - state.table.tableY;
         const cellLocation = state.table.getCellLocation(col, row);
@@ -57042,6 +57096,12 @@
             state.columnMove.y = y - state.table.tableY;
             state.columnMove.colTarget = targetCell.col;
             state.columnMove.rowTarget = targetCell.row;
+            if (state.table.isListTable()) {
+                const nodeIndex = state.table.getRecordIndexByCell(targetCell.col, targetCell.row);
+                const nodeData = state.table.getRecordByCell(targetCell.col, targetCell.row);
+                const hierarchyState = state.table.getRecordHierarchyState(targetCell.col, targetCell.row);
+                state.columnMove.rowTargetSize = computeChildrenNodeLength(nodeIndex, hierarchyState, nodeData) + 1;
+            }
             state.updateCursor('grabbing');
             let lineX;
             let backX;
@@ -57620,9 +57680,11 @@
     }
     function setHeaderCheckedState(field, checked, state) {
         state.headerCheckedState[field] = checked;
-        state.checkedState?.forEach(recordCheckState => {
-            recordCheckState[field] = checked;
-        });
+        if (state.table.internalProps.enableCheckboxCascade) {
+            state.checkedState?.forEach(recordCheckState => {
+                recordCheckState[field] = checked;
+            });
+        }
     }
     function syncCheckedState(col, row, field, checked, state) {
         if (state.table.isHeader(col, row)) {
@@ -57650,7 +57712,7 @@
             if (state.checkedState.get(dataIndex)) {
                 state.checkedState.get(dataIndex)[field] = checked;
             }
-            else if (dataIndex.includes(',')) {
+            else if (state.table.internalProps.enableCheckboxCascade && dataIndex.includes(',')) {
                 const parentDataIndex = dataIndex.split(',').slice(0, -1).join(',');
                 if (state.checkedState.has(parentDataIndex) && state.checkedState.get(parentDataIndex)[field] === true) {
                     state.checkedState.set(dataIndex, {
@@ -57729,7 +57791,7 @@
                 ? state.table.getCustomMerge(tableIndex, row)
                 : state.table.getCustomMerge(col, tableIndex);
             const data = state.table.dataSource?.get(index);
-            if (mergeCell || (!state.table.internalProps.rowSeriesNumber?.enableTreeCheckbox && data?.vtableMerge)) {
+            if (mergeCell || (!state.table.internalProps.enableCheckboxCascade && data?.vtableMerge)) {
                 return;
             }
             if (check_state?.[field] !== true) {
@@ -58165,6 +58227,8 @@
                 colTarget: -1,
                 rowSource: -1,
                 rowTarget: -1,
+                rowSourceSize: 0,
+                rowTargetSize: 0,
                 x: 0,
                 y: 0,
                 moving: false
@@ -58245,6 +58309,8 @@
                 colTarget: -1,
                 rowSource: -1,
                 rowTarget: -1,
+                rowSourceSize: 0,
+                rowTargetSize: 0,
                 x: 0,
                 y: 0,
                 moving: false
@@ -59675,11 +59741,14 @@
             table.stateManager.columnMove?.colTarget !== -1 &&
             table.stateManager.columnMove?.rowTarget !== -1) {
             if (table.hasListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION)) {
+                const { colSource, rowSource, colTarget, rowTarget } = table.stateManager.columnMove;
+                const rowSourceSize = table.stateManager.columnMove.rowSourceSize ?? 0;
+                const rowTargetSize = table.stateManager.columnMove.rowTargetSize ?? 0;
                 table.fireListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION, {
-                    target: { col: table.stateManager.columnMove.colTarget, row: table.stateManager.columnMove.rowTarget },
+                    target: { col: colTarget, row: rowTarget + rowTargetSize - rowSourceSize },
                     source: {
-                        col: table.stateManager.columnMove.colSource,
-                        row: table.stateManager.columnMove.rowSource
+                        col: colSource,
+                        row: rowSource
                     },
                     event: e
                 });
@@ -59687,8 +59756,13 @@
         }
         else if (!endMoveColSuccess) {
             if (table.hasListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION_FAIL)) {
+                const rowSourceSize = table.stateManager.columnMove.rowSourceSize ?? 0;
+                const rowTargetSize = table.stateManager.columnMove.rowTargetSize ?? 0;
                 table.fireListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION_FAIL, {
-                    target: { col: table.stateManager.columnMove.colTarget, row: table.stateManager.columnMove.rowTarget },
+                    target: {
+                        col: table.stateManager.columnMove.colTarget,
+                        row: table.stateManager.columnMove.rowTarget + rowTargetSize - rowSourceSize
+                    },
                     source: {
                         col: table.stateManager.columnMove.colSource,
                         row: table.stateManager.columnMove.rowSource
@@ -60313,19 +60387,23 @@
             };
             if (table.isHeader(col, row)) {
                 table.stateManager.setHeaderCheckedState(cellInfo.field, e.detail.checked);
-                const cellType = table.getCellType(col, row);
-                if (cellType === 'checkbox') {
-                    table.scenegraph.updateCheckboxCellState(col, row, e.detail.checked);
+                if (table.internalProps.enableCheckboxCascade) {
+                    const cellType = table.getCellType(col, row);
+                    if (cellType === 'checkbox') {
+                        table.scenegraph.updateCheckboxCellState(col, row, e.detail.checked);
+                    }
                 }
             }
             else {
                 table.stateManager.setCheckedState(col, row, cellInfo.field, e.detail.checked);
-                const cellType = table.getCellType(col, row);
-                if (cellType === 'checkbox') {
-                    const oldHeaderCheckedState = table.stateManager.headerCheckedState[cellInfo.field];
-                    const newHeaderCheckedState = table.stateManager.updateHeaderCheckedState(cellInfo.field, col, row);
-                    if (oldHeaderCheckedState !== newHeaderCheckedState) {
-                        table.scenegraph.updateHeaderCheckboxCellState(col, row, newHeaderCheckedState);
+                if (table.internalProps.enableCheckboxCascade) {
+                    const cellType = table.getCellType(col, row);
+                    if (cellType === 'checkbox') {
+                        const oldHeaderCheckedState = table.stateManager.headerCheckedState[cellInfo.field];
+                        const newHeaderCheckedState = table.stateManager.updateHeaderCheckedState(cellInfo.field, col, row);
+                        if (oldHeaderCheckedState !== newHeaderCheckedState) {
+                            table.scenegraph.updateHeaderCheckboxCellState(col, row, newHeaderCheckedState);
+                        }
                     }
                 }
             }
@@ -61665,8 +61743,7 @@
     function bindGroupTitleCheckboxChange(table) {
         table.on('checkbox_state_change', args => {
             const { col, row, checked, field } = args;
-            if (!table.internalProps.layoutMap.isSeriesNumber(col, row) ||
-                table.internalProps.rowSeriesNumber?.enableTreeCheckbox !== true) {
+            if (!table.internalProps.layoutMap.isSeriesNumber(col, row) || table.internalProps.enableCheckboxCascade !== true) {
                 return;
             }
             if (table.isHeader(col, row)) {
@@ -61710,6 +61787,9 @@
         });
     }
     function bindGroupCheckboxTreeChange(table) {
+        if (table.internalProps.enableCheckboxCascade !== true) {
+            return;
+        }
         table.on('checkbox_state_change', args => {
             const { col, row, checked, field } = args;
             const isCheckboxAndTree = table.internalProps.columns.some(column => column.tree);
@@ -61876,6 +61956,9 @@
         });
     }
     function bindHeaderCheckboxChange(table) {
+        if (table.internalProps.enableCheckboxCascade !== true) {
+            return;
+        }
         table.on('checkbox_state_change', args => {
             const { col, row, checked, field } = args;
             if (table.isHeader(col, row)) {
@@ -62221,7 +62304,7 @@
         }
         checkColumnResize(eventArgsSet, update) {
             const { eventArgs } = eventArgsSet;
-            if (this.table.options.enableTreeStickCell && !eventArgs) {
+            if (this.table.internalProps.enableTreeStickCell && !eventArgs) {
                 return false;
             }
             const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgs?.targetCell);
@@ -65218,7 +65301,7 @@
         return count;
     }
     function checkHasTreeDefine(layoutMap) {
-        if (layoutMap._table.options.groupBy) {
+        if (layoutMap._table.internalProps.groupBy) {
             return true;
         }
         const { columns } = layoutMap._table.options;
@@ -67052,7 +67135,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.19.4-alpha.0";
+        version = "1.19.4-alpha.2";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -67093,6 +67176,7 @@
                 vglobal.isImageAnonymous = false;
             }
             const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, frozenRowCount, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, containerFit = { width: false, height: false }, widthAdaptiveMode = 'only-body', heightAdaptiveMode = 'only-body', keyboardOptions, eventOptions, rowSeriesNumber, enableCheckboxCascade, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, dragOrder, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight, clearDOM = true } = options;
+            const { groupConfig, groupBy, groupTitleFieldFormat, groupTitleCustomLayout, enableTreeStickCell } = options;
             this.container = container;
             this.options = options;
             this._widthMode = widthMode;
@@ -67178,13 +67262,20 @@
             internalProps.keyboardOptions = keyboardOptions;
             internalProps.eventOptions = eventOptions;
             internalProps.rowSeriesNumber = rowSeriesNumber;
-            internalProps.enableCheckboxCascade = enableCheckboxCascade;
+            internalProps.enableCheckboxCascade = enableCheckboxCascade ?? rowSeriesNumber?.enableTreeCheckbox ?? true;
             internalProps.columnResizeMode = resize?.columnResizeMode ?? columnResizeMode;
             internalProps.rowResizeMode = resize?.rowResizeMode ?? rowResizeMode;
             internalProps.dragHeaderMode = dragOrder?.dragHeaderMode ?? dragHeaderMode ?? 'none';
             internalProps.renderChartAsync = renderChartAsync;
             setBatchRenderChartCount(renderChartAsyncBatchCount);
             internalProps.overscrollBehavior = overscrollBehavior ?? 'auto';
+            internalProps.groupBy = groupConfig?.groupBy ?? groupBy;
+            internalProps.titleCheckbox = groupConfig?.titleCheckbox;
+            internalProps.groupTitleFieldFormat =
+                groupConfig?.titleFieldFormat ?? groupTitleFieldFormat;
+            internalProps.groupTitleCustomLayout =
+                groupConfig?.titleCustomLayout ?? groupTitleCustomLayout;
+            internalProps.enableTreeStickCell = groupConfig?.enableTreeStickCell ?? enableTreeStickCell;
             internalProps._rowHeightsMap = new NumberRangeMap(this);
             internalProps._rowRangeHeightsMap = new Map();
             internalProps._colRangeWidthsMap = new Map();
@@ -68557,6 +68648,7 @@
             this.options = options;
             this._hasAutoImageColumn = undefined;
             const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, eventOptions, rowSeriesNumber, enableCheckboxCascade, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, dragOrder, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, autoFillHeight, containerFit, widthAdaptiveMode, heightAdaptiveMode, customRender, renderChartAsync, renderChartAsyncBatchCount, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight } = options;
+            const { groupConfig, groupBy, groupTitleFieldFormat, groupTitleCustomLayout, enableTreeStickCell } = options;
             if (pixelRatio && pixelRatio !== this.internalProps.pixelRatio) {
                 this.internalProps.pixelRatio = pixelRatio;
             }
@@ -68615,7 +68707,7 @@
             internalProps.keyboardOptions = keyboardOptions;
             internalProps.eventOptions = eventOptions;
             internalProps.rowSeriesNumber = rowSeriesNumber;
-            internalProps.enableCheckboxCascade = enableCheckboxCascade;
+            internalProps.enableCheckboxCascade = enableCheckboxCascade ?? rowSeriesNumber?.enableTreeCheckbox ?? true;
             internalProps.columnResizeMode = resize?.columnResizeMode ?? columnResizeMode;
             internalProps.rowResizeMode = resize?.rowResizeMode ?? rowResizeMode;
             internalProps.dragHeaderMode = dragOrder?.dragHeaderMode ?? dragHeaderMode ?? 'none';
@@ -68623,6 +68715,13 @@
             setBatchRenderChartCount(renderChartAsyncBatchCount);
             internalProps.overscrollBehavior = overscrollBehavior ?? 'auto';
             internalProps.cellTextOverflows = {};
+            internalProps.groupBy = groupConfig?.groupBy ?? groupBy;
+            internalProps.titleCheckbox = groupConfig?.titleCheckbox;
+            internalProps.groupTitleFieldFormat =
+                groupConfig?.titleFieldFormat ?? groupTitleFieldFormat;
+            internalProps.groupTitleCustomLayout =
+                groupConfig?.titleCustomLayout ?? groupTitleCustomLayout;
+            internalProps.enableTreeStickCell = groupConfig?.enableTreeStickCell ?? enableTreeStickCell;
             internalProps._rowHeightsMap = new NumberRangeMap(this);
             internalProps._rowRangeHeightsMap = new Map();
             internalProps._colRangeWidthsMap = new Map();
@@ -69293,7 +69392,7 @@
                 icons = this.internalProps.headerHelper.getIcons(col, row);
             }
             else if (this.internalProps.layoutMap.isSeriesNumber(col, row)) {
-                if (!this.options.groupBy || !this.getCellRawRecord(col, row)?.vtableMerge) {
+                if (!this.internalProps.groupBy || !this.getCellRawRecord(col, row)?.vtableMerge) {
                     const dragOrder = this.internalProps.layoutMap.getSeriesNumberBody(col, row)?.define
                         ?.dragOrder;
                     if (dragOrder) {
@@ -71893,7 +71992,7 @@
             return;
         }
         const cellRecord = layout._table.getCellRawRecord(col, row);
-        if (layout._table.internalProps.rowSeriesNumber?.enableTreeCheckbox) {
+        if (layout._table.internalProps.titleCheckbox && layout._table.internalProps.rowSeriesNumber) {
             if (cellRecord?.vtableMerge && col >= layout.leftRowSeriesNumberColumnCount) {
                 cellRange.start.col = layout.rowHeaderLevelCount + layout.leftRowSeriesNumberColumnCount;
                 cellRange.end.col = layout.colCount - 1;
@@ -72076,7 +72175,7 @@
                             title: rowSeriesNumber.title,
                             define: merge$1({ field: '_vtable_rowSeries_number' }, rowSeriesNumber),
                             cellType: rowSeriesNumber.cellType ?? 'text',
-                            headerType: rowSeriesNumber.cellType === 'checkbox' ? 'checkbox' : 'text',
+                            headerType: rowSeriesNumber.headerType ?? (rowSeriesNumber.cellType === 'checkbox' ? 'checkbox' : 'text'),
                             style: rowSeriesNumber.style,
                             width: rowSeriesNumber.width,
                             format: rowSeriesNumber.format,
@@ -73702,11 +73801,11 @@
         if (oldCellUpdateType === 'group') {
             return oldCellUpdateType;
         }
-        if (oldCellUpdateType === 'sort' && !table.options.groupBy) {
+        if (oldCellUpdateType === 'sort' && !table.internalProps.groupBy) {
             return oldCellUpdateType;
         }
         let cellUpdateType = 'normal';
-        if (table.options.groupBy) {
+        if (table.internalProps.groupBy) {
             cellUpdateType = 'group';
         }
         else if (!table.isHeader(col, row) && table.dataSource.lastOrderField) {
@@ -73729,7 +73828,7 @@
         }
     }
     function listTableAddRecord(record, recordIndex, table) {
-        if (table.options.groupBy) {
+        if (table.internalProps.groupBy) {
             table.dataSource.addRecordsForGroup?.([record], recordIndex);
             table.refreshRowColCount();
             table.internalProps.layoutMap.clearCellRangeMap();
@@ -73830,7 +73929,7 @@
         }
     }
     function listTableAddRecords(records, recordIndex, table) {
-        if (table.options.groupBy) {
+        if (table.internalProps.groupBy) {
             table.dataSource.addRecordsForGroup?.(records, recordIndex);
             table.refreshRowColCount();
             table.internalProps.layoutMap.clearCellRangeMap();
@@ -73948,7 +74047,7 @@
     }
     function listTableDeleteRecords(recordIndexs, table) {
         if (recordIndexs?.length > 0) {
-            if (table.options.groupBy) {
+            if (table.internalProps.groupBy) {
                 table.dataSource.deleteRecordsForGroup?.(recordIndexs);
                 table.refreshRowColCount();
                 table.internalProps.layoutMap.clearCellRangeMap();
@@ -74076,7 +74175,7 @@
     }
     function listTableUpdateRecords(records, recordIndexs, table) {
         if (recordIndexs?.length > 0) {
-            if (table.options.groupBy) {
+            if (table.internalProps.groupBy) {
                 table.dataSource.updateRecordsForGroup?.(records, recordIndexs);
                 table.refreshRowColCount();
                 table.internalProps.layoutMap.clearCellRangeMap();
@@ -74263,14 +74362,15 @@
             this.pagination = options.pagination;
             internalProps.sortState = options.sortState;
             internalProps.multipleSort = !!options.multipleSort;
-            internalProps.dataConfig = options.groupBy ? getGroupByDataConfig(options.groupBy) : {};
+            internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy) : {};
             internalProps.columns = options.columns
                 ? cloneDeepSpec(options.columns, ['children'])
                 : options.header
                     ? cloneDeepSpec(options.header, ['children'])
                     : [];
             generateAggregationForColumn(this);
-            internalProps.enableTreeNodeMerge = options.enableTreeNodeMerge ?? isValid$3(options.groupBy) ?? false;
+            internalProps.enableTreeNodeMerge =
+                options.enableTreeNodeMerge ?? isValid$3(this.internalProps.groupBy) ?? false;
             this.internalProps.headerHelper.setTableColumnsEditor();
             this.showHeader = options.showHeader ?? true;
             this.internalProps.columnWidthConfig = options.columnWidthConfig;
@@ -74304,7 +74404,7 @@
                     this.internalProps.emptyTip?.resetVisible();
                 }
             }
-            if (options.enableTreeStickCell) {
+            if (this.internalProps.enableTreeStickCell) {
                 const ListTreeStickCellPlugin = Factory.getComponent('listTreeStickCellPlugin');
                 this.listTreeStickCellPlugin = new ListTreeStickCellPlugin(this);
             }
@@ -74423,7 +74523,7 @@
                     return title;
                 }
                 let value;
-                if (this.options.groupBy) {
+                if (this.internalProps.groupBy) {
                     const record = table.getCellRawRecord(col, row);
                     if (record?.vtableMerge) {
                         return '';
@@ -74568,7 +74668,9 @@
                 options.dragOrder?.frozenColDragHeaderMode ?? options.frozenColDragHeaderMode;
             this.pagination = options.pagination;
             internalProps.sortState = options.sortState;
-            internalProps.dataConfig = options.groupBy ? getGroupByDataConfig(options.groupBy) : {};
+            internalProps.dataConfig = this.internalProps.groupBy
+                ? getGroupByDataConfig(this.internalProps.groupBy)
+                : {};
             this.showHeader = options.showHeader ?? true;
             internalProps.columns = options.columns
                 ? cloneDeepSpec(options.columns, ['children'])
@@ -74576,7 +74678,8 @@
                     ? cloneDeepSpec(options.header, ['children'])
                     : [];
             generateAggregationForColumn(this);
-            internalProps.enableTreeNodeMerge = options.enableTreeNodeMerge ?? isValid$3(options.groupBy) ?? false;
+            internalProps.enableTreeNodeMerge =
+                options.enableTreeNodeMerge ?? isValid$3(this.internalProps.groupBy) ?? false;
             this.internalProps.headerHelper.setTableColumnsEditor();
             this.transpose = options.transpose ?? false;
             this.refreshHeader();
@@ -74821,7 +74924,9 @@
             if (this.isHeader(col, row)) {
                 return this._getHeaderLayoutMap(col, row)?.hierarchyState;
             }
-            if (!this.options.groupBy || (isArray$7(this.options.groupBy) && this.options.groupBy.length === 0)) {
+            if (!this.internalProps.groupBy ||
+                (isArray$7(this.internalProps.groupBy) &&
+                    this.internalProps.groupBy.length === 0)) {
                 const define = this.getBodyColumnDefine(col, row);
                 if (!define.tree) {
                     return HierarchyState.none;
@@ -74830,6 +74935,16 @@
             const index = this.getRecordShowIndexByCell(col, row);
             return this.dataSource.getHierarchyState(index);
         }
+        getRecordHierarchyState(col, row) {
+            let recordIndex;
+            if (this.transpose) {
+                this.getRecordShowIndexByCell(col, 0);
+            }
+            else {
+                recordIndex = this.getRecordShowIndexByCell(0, row);
+            }
+            return this.dataSource.getHierarchyState(recordIndex);
+        }
         toggleHierarchyState(col, row, recalculateColWidths = true) {
             this.stateManager.updateHoverIcon(col, row, undefined, undefined);
             const hierarchyState = this.getHierarchyState(col, row);
@@ -75271,7 +75386,7 @@
             return this.internalProps.layoutMap.isAggregation(col, row);
         }
         getGroupTitleLevel(col, row) {
-            if (!this.options.groupBy) {
+            if (!this.internalProps.groupBy) {
                 return undefined;
             }
             const indexArr = this.dataSource.getIndexKey(this.getRecordShowIndexByCell(col, row));
@@ -87034,7 +87149,7 @@
                     const newCellAggregator = new SumAggregator({
                         key: indicator,
                         field: indicator,
-                        isRecord: true,
+                        isRecord: true
                     });
                     newCellAggregator.changedValue = newValue;
                     this.recalculateTotals(rowKey, colKey, indicator, newCellAggregator);
@@ -87107,6 +87222,25 @@
             if (this.totals?.row?.showGrandTotals) {
                 if (this.tree[this.rowGrandTotalLabel]?.[flatColKey]?.[indicatorIndex]) {
                     addAggregatorToResetSet(this.tree[this.rowGrandTotalLabel][flatColKey][indicatorIndex], this.rowGrandTotalLabel, flatColKey);
+                    if (this.totals?.column?.subTotalsDimensions && this.totals.column.showSubTotals !== false) {
+                        for (let j = 0; j < this.totals.column.subTotalsDimensions.length; j++) {
+                            const colDimension = this.totals.column.subTotalsDimensions[j];
+                            const colDimensionIndex = this.columns.indexOf(colDimension);
+                            if (colDimensionIndex >= 0 && colDimensionIndex < colKeyParts.length) {
+                                const colSubTotalKeyParts = colKeyParts.slice(0, colDimensionIndex + 1);
+                                colSubTotalKeyParts.push(this.colSubTotalLabel);
+                                const flatColSubTotalKey = colSubTotalKeyParts.join(this.stringJoinChar);
+                                if (this.tree[this.rowGrandTotalLabel]?.[flatColSubTotalKey]?.[indicatorIndex]) {
+                                    addAggregatorToResetSet(this.tree[this.rowGrandTotalLabel][flatColSubTotalKey][indicatorIndex], this.rowGrandTotalLabel, flatColSubTotalKey);
+                                }
+                            }
+                        }
+                    }
+                    if (this.totals?.column?.showGrandTotals) {
+                        if (this.tree[this.rowGrandTotalLabel]?.[this.colGrandTotalLabel]?.[indicatorIndex]) {
+                            addAggregatorToResetSet(this.tree[this.rowGrandTotalLabel][this.colGrandTotalLabel][indicatorIndex], this.rowGrandTotalLabel, this.colGrandTotalLabel);
+                        }
+                    }
                 }
                 if (this.totals?.column?.subTotalsDimensions && this.totals.column.showSubTotals !== false) {
                     for (let j = 0; j < this.totals.column.subTotalsDimensions.length; j++) {
@@ -87116,43 +87250,24 @@
                             const colSubTotalKeyParts = colKeyParts.slice(0, colDimensionIndex + 1);
                             colSubTotalKeyParts.push(this.colSubTotalLabel);
                             const flatColSubTotalKey = colSubTotalKeyParts.join(this.stringJoinChar);
-                            if (this.tree[this.rowGrandTotalLabel]?.[flatColSubTotalKey]?.[indicatorIndex]) {
-                                addAggregatorToResetSet(this.tree[this.rowGrandTotalLabel][flatColSubTotalKey][indicatorIndex], this.rowGrandTotalLabel, flatColSubTotalKey);
+                            if (this.tree[flatRowKey]?.[flatColSubTotalKey]?.[indicatorIndex]) {
+                                addAggregatorToResetSet(this.tree[flatRowKey][flatColSubTotalKey][indicatorIndex], flatRowKey, flatColSubTotalKey);
                             }
                         }
                     }
                 }
                 if (this.totals?.column?.showGrandTotals) {
-                    if (this.tree[this.rowGrandTotalLabel]?.[this.colGrandTotalLabel]?.[indicatorIndex]) {
-                        addAggregatorToResetSet(this.tree[this.rowGrandTotalLabel][this.colGrandTotalLabel][indicatorIndex], this.rowGrandTotalLabel, this.colGrandTotalLabel);
+                    if (this.tree[flatRowKey]?.[this.colGrandTotalLabel]?.[indicatorIndex]) {
+                        addAggregatorToResetSet(this.tree[flatRowKey][this.colGrandTotalLabel][indicatorIndex], flatRowKey, this.colGrandTotalLabel);
                     }
                 }
-            }
-            if (this.totals?.column?.subTotalsDimensions && this.totals.column.showSubTotals !== false) {
-                for (let j = 0; j < this.totals.column.subTotalsDimensions.length; j++) {
-                    const colDimension = this.totals.column.subTotalsDimensions[j];
-                    const colDimensionIndex = this.columns.indexOf(colDimension);
-                    if (colDimensionIndex >= 0 && colDimensionIndex < colKeyParts.length) {
-                        const colSubTotalKeyParts = colKeyParts.slice(0, colDimensionIndex + 1);
-                        colSubTotalKeyParts.push(this.colSubTotalLabel);
-                        const flatColSubTotalKey = colSubTotalKeyParts.join(this.stringJoinChar);
-                        if (this.tree[flatRowKey]?.[flatColSubTotalKey]?.[indicatorIndex]) {
-                            addAggregatorToResetSet(this.tree[flatRowKey][flatColSubTotalKey][indicatorIndex], flatRowKey, flatColSubTotalKey);
-                        }
+                aggregatorsToReset.forEach(agg => {
+                    if (newCellAggregator && subTotalAggregators.has(agg)) {
+                        agg.push(newCellAggregator);
                     }
-                }
-            }
-            if (this.totals?.column?.showGrandTotals) {
-                if (this.tree[flatRowKey]?.[this.colGrandTotalLabel]?.[indicatorIndex]) {
-                    addAggregatorToResetSet(this.tree[flatRowKey][this.colGrandTotalLabel][indicatorIndex], flatRowKey, this.colGrandTotalLabel);
-                }
+                    agg.recalculate();
+                });
             }
-            aggregatorsToReset.forEach(agg => {
-                if (newCellAggregator && subTotalAggregators.has(agg)) {
-                    agg.push(newCellAggregator);
-                }
-                agg.recalculate();
-            });
         }
         changeRecordFieldValue(fieldName, oldValue, value) {
             let isIndicatorName = false;
@@ -90725,7 +90840,7 @@
     }
 
     registerForVrender();
-    const version = "1.19.4-alpha.0";
+    const version = "1.19.4-alpha.2";
     function getIcons() {
         return get$2();
     }