@visactor/vtable 0.18.0-alpha.2 → 0.18.0

package/dist/vtable.js

@@ -23996,6 +23996,12 @@
     });
 
     function getCellMergeInfo(table, col, row) {
+        if (table.internalProps.customMergeCell) {
+            const customMerge = table.getCustomMerge(col, row);
+            if (customMerge) {
+                return customMerge.range;
+            }
+        }
         if (!table.isHeader(col, row) && !table.getBodyColumnDefine(col, row)?.mergeCell) {
             return false;
         }
@@ -30867,6 +30873,29 @@
                 this.pagination.totalCount = this._sourceLength;
             }
         }
+        deleteRecords(recordIndexs) {
+            const realDeletedRecordIndexs = [];
+            const recordIndexsMaxToMin = recordIndexs.sort((a, b) => b - a);
+            for (let index = 0; index < recordIndexsMaxToMin.length; index++) {
+                const recordIndex = recordIndexsMaxToMin[index];
+                if (recordIndex >= this._sourceLength || recordIndex < 0) {
+                    continue;
+                }
+                realDeletedRecordIndexs.push(recordIndex);
+                this.source.splice(recordIndex, 1);
+                this.currentIndexedData.pop();
+                this._sourceLength -= 1;
+            }
+            if (this.userPagination) {
+                this.updatePagerData();
+            }
+            else {
+                this.pagination.perPageCount = this._sourceLength;
+                this.pagination.totalCount = this._sourceLength;
+                this.updatePagerData();
+            }
+            return realDeletedRecordIndexs;
+        }
         deleteRecordsForSorted(recordIndexs) {
             const recordIndexsMaxToMin = recordIndexs.sort((a, b) => b - a);
             for (let index = 0; index < recordIndexsMaxToMin.length; index++) {
@@ -30884,29 +30913,35 @@
                 this.pagination.totalCount = this._sourceLength;
             }
         }
-        deleteRecords(recordIndexs) {
+        updateRecords(records, recordIndexs) {
             const realDeletedRecordIndexs = [];
-            const recordIndexsMaxToMin = recordIndexs.sort((a, b) => b - a);
-            for (let index = 0; index < recordIndexsMaxToMin.length; index++) {
-                const recordIndex = recordIndexsMaxToMin[index];
+            for (let index = 0; index < recordIndexs.length; index++) {
+                const recordIndex = recordIndexs[index];
                 if (recordIndex >= this._sourceLength || recordIndex < 0) {
                     continue;
                 }
                 realDeletedRecordIndexs.push(recordIndex);
-                this.source.splice(recordIndex, 1);
-                this.currentIndexedData.pop();
-                this._sourceLength -= 1;
+                this.source[recordIndex] = records[index];
             }
             if (this.userPagination) {
                 this.updatePagerData();
             }
-            else {
-                this.pagination.perPageCount = this._sourceLength;
-                this.pagination.totalCount = this._sourceLength;
-                this.updatePagerData();
-            }
             return realDeletedRecordIndexs;
         }
+        updateRecordsForSorted(records, recordIndexs) {
+            for (let index = 0; index < recordIndexs.length; index++) {
+                const recordIndex = recordIndexs[index];
+                if (recordIndex >= this._sourceLength || recordIndex < 0) {
+                    continue;
+                }
+                const rawIndex = this.currentIndexedData[recordIndex];
+                if (typeof rawIndex !== 'number') {
+                    return;
+                }
+                this.source[rawIndex] = records[index];
+            }
+            this.sortedIndexMap.clear();
+        }
         sort(field, order, orderFn = order !== 'desc'
             ? (v1, v2) => (v1 === v2 ? 0 : v1 > v2 ? 1 : -1)
             : (v1, v2) => (v1 === v2 ? 0 : v1 < v2 ? 1 : -1)) {
@@ -31858,356 +31893,456 @@
         }
     };
 
-    function dealWithCustom(customLayout, customRender, col, row, width, height, autoWidth, autoHeight, padding, table) {
-        let renderDefault = true;
-        let enableCellPadding = false;
-        let expectedWidth;
-        let expectedHeight;
-        let customElements;
-        let elementsGroup;
-        if (typeof customLayout === 'function') {
+    function getProp(name, cellStyle, col, row, _table) {
+        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
+        if (typeof prop === 'function') {
             const arg = {
                 col,
                 row,
-                dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row) || '',
-                rect: {
-                    left: 0,
-                    top: 0,
-                    right: width,
-                    bottom: height,
-                    width,
-                    height
-                },
-                table
+                table: _table,
+                value: _table.getCellValue(col, row),
+                dataValue: _table.getCellOriginValue(col, row),
+                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
             };
-            const customRenderObj = customLayout(arg);
-            if (customRenderObj.rootContainer) {
-                customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer);
-            }
-            if (customRenderObj.rootContainer instanceof Group$2) {
-                elementsGroup = customRenderObj.rootContainer;
-                elementsGroup.name = 'custom-container';
-            }
-            renderDefault = customRenderObj.renderDefault;
-            enableCellPadding = customRenderObj.enableCellPadding;
+            return prop(arg);
         }
-        else if (typeof customRender === 'function') {
+        return prop;
+    }
+    function getFunctionalProp(name, cellStyle, col, row, _table) {
+        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
+        if (typeof prop === 'function') {
             const arg = {
                 col,
                 row,
-                dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row) || '',
-                rect: {
-                    left: 0,
-                    top: 0,
-                    right: width,
-                    bottom: height,
-                    width,
-                    height
-                },
-                table
+                table: _table,
+                value: _table.getCellValue(col, row),
+                dataValue: _table.getCellOriginValue(col, row),
+                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
             };
-            const customRenderObj = customRender(arg);
-            if (customRenderObj) {
-                customElements = customRenderObj.elements;
-                renderDefault = customRenderObj.renderDefault;
-                expectedWidth = customRenderObj.expectedWidth;
-                expectedHeight = customRenderObj.expectedHeight;
-            }
-        }
-        else if (customRender) {
-            expectedWidth = customRender.expectedWidth;
-            expectedHeight = customRender.expectedHeight;
-            customElements = customRender.elements;
-            renderDefault = customRender.renderDefault;
+            return prop(arg);
         }
-        if (customElements) {
-            const value = table.getCellValue(col, row);
-            elementsGroup = adjustElementToGroup(customElements, autoWidth ? expectedWidth : width, autoHeight ? expectedHeight : height, value);
+        return undefined;
+    }
+
+    let Group$1 = class Group extends Group$2 {
+        role;
+        col;
+        row;
+        mergeStartCol;
+        mergeStartRow;
+        mergeEndCol;
+        mergeEndRow;
+        contentWidth;
+        contentHeight;
+        rowNumber;
+        colHeight;
+        border;
+        needUpdate;
+        needUpdateWidth;
+        needUpdateHeight;
+        clear() {
+            this.removeAllChild();
         }
-        if (enableCellPadding) {
-            elementsGroup.setAttributes({
-                x: padding[3],
-                y: padding[0],
-                width: width - padding[1] - padding[3],
-                height: height - padding[0] - padding[2]
+        getChildByName(name, deep) {
+            let result = null;
+            this.forEachChildren((child) => {
+                if (child.name === name) {
+                    result = child;
+                    return true;
+                }
+                return false;
             });
-        }
-        dealPercentCalc(elementsGroup, width, height);
-        return {
-            elementsGroup,
-            renderDefault
-        };
-    }
-    function adjustElementToGroup(elements, width, height, value) {
-        const customGroup = new Group$2({
-            x: 0,
-            y: 0,
-            width,
-            height,
-            fill: false,
-            stroke: false,
-            pickable: false
-        });
-        customGroup.name = 'custom-container';
-        const elementsAdjusted = adjustElementsPos(elements, width, height, value);
-        elementsAdjusted.forEach(element => {
-            if (element.clickable) {
-                element.pickable = element.clickable;
-            }
-            switch (element.type) {
-                case 'arc':
-                    const arc = createArc({
-                        x: element.x,
-                        y: element.y,
-                        dx: (element.dx ?? 0),
-                        dy: (element.dy ?? 0),
-                        fill: element.fill,
-                        stroke: element.stroke,
-                        outerRadius: element.radius,
-                        startAngle: element.startAngle,
-                        endAngle: element.endAngle,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    customGroup.appendChild(arc);
-                    break;
-                case 'text':
-                    if (element.background) {
-                        const expandX = element.background?.expandX ?? 0;
-                        const expandY = element.background?.expandY ?? 0;
-                        const textBackRect = createRect({
-                            x: element.x - expandX,
-                            y: element.y - expandY,
-                            dx: (element.dx ?? 0),
-                            dy: (element.dy ?? 0),
-                            width: element.width + expandX * 2,
-                            height: element.height + expandY * 2,
-                            cornerRadius: element.background?.cornerRadius ?? 0,
-                            fill: element.background?.fill ?? '#888'
-                        });
-                        customGroup.appendChild(textBackRect);
+            if (deep) {
+                this.forEachChildren((child) => {
+                    if (child.getChildByName) {
+                        const target = child.getChildByName(name, true);
+                        if (target) {
+                            result = target;
+                            return true;
+                        }
                     }
-                    const text = new Text$1(Object.assign({
-                        pickable: !!element.pickable,
-                        fill: element.color ?? element.fill
-                    }, element));
-                    customGroup.appendChild(text);
-                    break;
-                case 'rect':
-                    const rect = createRect({
-                        x: element.x,
-                        y: element.y,
-                        dx: (element.dx ?? 0),
-                        dy: (element.dy ?? 0),
-                        width: element.width,
-                        height: element.height,
-                        cornerRadius: element.radius,
-                        fill: element.fill,
-                        stroke: element.stroke,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    customGroup.appendChild(rect);
-                    break;
-                case 'circle':
-                    const circle = createCircle({
-                        x: element.x,
-                        y: element.y,
-                        dx: (element.dx ?? 0),
-                        dy: (element.dy ?? 0),
-                        radius: element.radius,
-                        fill: element.fill,
-                        stroke: element.stroke,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    customGroup.appendChild(circle);
-                    break;
-                case 'icon':
-                    const icon = new Icon$1({
-                        x: element.x,
-                        y: element.y,
-                        dx: (element.dx ?? 0),
-                        dy: (element.dy ?? 0),
-                        width: element.width,
-                        height: element.height,
-                        image: element.svg,
-                        backgroundWidth: element.hover ? (element.hover.width ?? element.width) : undefined,
-                        backgroundHeight: element.hover ? (element.hover.width ?? element.width) : undefined,
-                        backgroundColor: element.hover ? element.hover.bgColor ?? 'rgba(22,44,66,0.2)' : undefined,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    icon.role = 'icon-custom';
-                    customGroup.appendChild(icon);
-                    break;
-                case 'image':
-                    const image = new Icon$1({
-                        x: element.x,
-                        y: element.y,
-                        dx: (element.dx ?? 0),
-                        dy: (element.dy ?? 0),
-                        width: element.width,
-                        height: element.height,
-                        image: element.src,
-                        backgroundWidth: element.hover ? (element.hover.width ?? element.width) : undefined,
-                        backgroundHeight: element.hover ? (element.hover.width ?? element.width) : undefined,
-                        backgroundColor: element.hover ? element.hover.bgColor ?? 'rgba(22,44,66,0.2)' : undefined,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor,
-                        shape: element.shape
-                    });
-                    image.role = 'image-custom';
-                    customGroup.appendChild(image);
-                    break;
-                case 'line':
-                    const line = createLine({
-                        points: element.points,
-                        stroke: element.stroke,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    customGroup.appendChild(line);
-                    break;
-            }
-        });
-        return customGroup;
-    }
-    function adjustElementsPos(originalElements, width, height, value) {
-        const result = [];
-        const left = 0;
-        const top = 0;
-        const borderLineWidths = [0, 0, 0, 0];
-        for (let i = 0; i < originalElements.length; i++) {
-            const originalElement = originalElements[i];
-            const element = Object.assign({}, originalElement);
-            for (const name in element) {
-                if (element.hasOwnProperty(name) && isFunction$1(element[name])) {
-                    element[name] = element[name](value);
-                }
+                    return false;
+                });
             }
-            const rect = element;
-            if (isValid$1(rect.x)) {
-                rect.x = isString$2(rect.x)
-                    ? transformString(rect.x, width - borderLineWidths[1])
-                    : Number(rect.x);
+            return result;
+        }
+        get width() {
+            let width = this.AABBBounds.width();
+            if (width === Infinity || width === -Infinity) {
+                width = 0;
             }
-            if (isValid$1(rect.y)) {
-                rect.y = isString$2(rect.y)
-                    ? transformString(rect.y, height - borderLineWidths[2])
-                    : Number(rect.y);
+            return Math.max(width, this.attribute.width ?? 0);
+        }
+        get height() {
+            let height = this.AABBBounds.height();
+            if (height === Infinity || height === -Infinity) {
+                height = 0;
             }
-            if ('width' in element) {
-                element.width = isString$2(element.width)
-                    ? transformString(element.width, width - borderLineWidths[1])
-                    : Number(element.width);
+            return Math.max(height, this.attribute.height ?? 0);
+        }
+        setDeltaWidth(deltaX) {
+            if (deltaX === 0) {
+                return;
             }
-            if ('height' in element) {
-                element.height = isString$2(element.height)
-                    ? transformString(element.height, height - borderLineWidths[2])
-                    : Number(element.height);
+            this.setAttribute('width', (this.attribute.width ?? 0) + deltaX);
+            if (this.border) {
+                this.border.setAttribute('width', this.border.attribute.width + deltaX);
+                if (this.border.type === 'group') {
+                    this.border.firstChild.setAttribute('width', this.border.firstChild.attribute.width + deltaX);
+                }
             }
-            if ('radius' in element) {
-                element.radius = isString$2(element.radius)
-                    ? transformString(element.radius, Math.min(width - borderLineWidths[1], height - borderLineWidths[2]))
-                    : Number(element.radius);
+        }
+        setDeltaHeight(deltaY) {
+            if (deltaY === 0) {
+                return;
             }
-            if ('hover' in element) {
-                element.hover.x = isString$2(element.hover.x)
-                    ? transformString(element.hover.x, width - borderLineWidths[1])
-                    : Number(element.hover.x);
-                element.hover.y = isString$2(element.hover.y)
-                    ? transformString(element.hover.y, height - borderLineWidths[2])
-                    : Number(element.hover.y);
-                element.hover.width = isString$2(element.hover.width)
-                    ? transformString(element.hover.width, width - borderLineWidths[1])
-                    : Number(element.hover.width);
-                element.hover.height = isString$2(element.hover.height)
-                    ? transformString(element.hover.height, height - borderLineWidths[2])
-                    : Number(element.hover.height);
-                element.hover.x += left;
-                element.hover.y += top;
+            this.setAttribute('height', (this.attribute.height ?? 0) + deltaY);
+            if (this.border) {
+                this.border.setAttribute('height', this.border.attribute.height + deltaY);
+                if (this.border.type === 'group') {
+                    this.border.firstChild.setAttribute('width', this.border.firstChild.attribute.height + deltaY);
+                }
             }
-            rect.x = rect.x + left;
-            rect.y = rect.y + top;
-            result.push(element);
         }
-        return result;
-    }
-    function transformString(str, size) {
-        if (str.endsWith('px')) {
-            return parseInt(str, 10);
+        setDeltaX(deltaX) {
+            if (deltaX === 0) {
+                return;
+            }
+            this.setAttribute('x', this.attribute.x + deltaX);
         }
-        else if (str.endsWith('%') && size) {
-            return (parseInt(str, 10) / 100) * size;
+        setDeltaY(deltaY) {
+            if (deltaY === 0) {
+                return;
+            }
+            this.setAttribute('y', this.attribute.y + deltaY);
         }
-        return parseInt(str, 10);
-    }
-    function dealPercentCalc(group, parentWidth, parentHeight) {
-        if (!group) {
-            return;
+        forEachChildrenSkipChild(cb, skipChildName = 'border-rect', reverse = false) {
+            if (reverse) {
+                let child = this._lastChild;
+                let i = 0;
+                while (child) {
+                    if (child.name !== skipChildName) {
+                        const breakTag = cb(child, i++);
+                        if (breakTag) {
+                            return;
+                        }
+                    }
+                    child = child._prev;
+                }
+            }
+            else {
+                let child = this._firstChild;
+                let i = 0;
+                while (child) {
+                    if (child.name !== skipChildName) {
+                        const breakTag = cb(child, i++);
+                        if (breakTag) {
+                            return;
+                        }
+                    }
+                    child = child._next;
+                }
+            }
         }
-        group.forEachChildren((child) => {
-            if (!child) {
-                return;
+        getColGroup(col) {
+            let c = this._firstChild;
+            if (!c) {
+                return null;
             }
-            if (isObject$4(child.attribute.width) && child.attribute.width.percent) {
-                child.setAttribute('width', (child.attribute.width.percent / 100) * parentWidth +
-                    (child.attribute.width.delta ?? 0));
+            for (let i = 0; i < this.childrenCount; i++) {
+                if (c.col === col) {
+                    return c;
+                }
+                c = c._next;
             }
-            if (isObject$4(child.attribute.height) && child.attribute.height.percent) {
-                child.setAttribute('height', (child.attribute.height.percent / 100) * parentHeight +
-                    (child.attribute.height.delta ?? 0));
+            return null;
+        }
+        getRowGroup(row) {
+            let c = this._firstChild;
+            if (!c) {
+                return null;
             }
-            if (child.type === 'group') {
-                dealPercentCalc(child, child.attribute.width, child.attribute.height);
+            for (let i = 0; i < this.childrenCount; i++) {
+                if (c.row === row) {
+                    return c;
+                }
+                c = c._next;
             }
-        });
-    }
-    function decodeReactDom(dom) {
-        if (!dom || !dom.$$typeof) {
-            return dom;
+            return null;
         }
-        const type = dom.type;
-        const { attribute, children, stateProxy } = dom.props;
-        const g = type({ attribute });
-        parseToGraphic(g, dom.props);
-        if (stateProxy) {
-            g.stateProxy = stateProxy;
+        getChildAt(index) {
+            const child = super.getChildAt(index);
+            if (child && child.name === 'border-rect') {
+                return child._next;
+            }
+            return child;
         }
-        g.id = attribute.id;
-        g.name = attribute.name;
-        if (isArray$1(children)) {
-            children.forEach((item) => {
-                const c = decodeReactDom(item);
-                c && c.type && g.add(c);
-            });
+        tryUpdateAABBBounds() {
+            if (this.role === 'cell') {
+                if (!this.shouldUpdateAABBBounds()) {
+                    return this._AABBBounds;
+                }
+                const selfChange = this.shouldSelfChangeUpdateAABBBounds();
+                const bounds = this.doUpdateAABBBounds();
+                this.addUpdateLayoutTag();
+                after(this, selfChange);
+                return bounds;
+            }
+            return super.tryUpdateAABBBounds();
         }
-        else if (children) {
-            g.add(decodeReactDom(children));
+        doUpdateAABBBounds() {
+            if (this.role === 'cell') {
+                const attribute = this.attribute;
+                const { x, y, width, height } = attribute;
+                this._AABBBounds.setValue(x, y, x + width, y + height);
+                this.parent && this.parent.addChildUpdateBoundTag();
+                this.clearUpdateBoundTag();
+                return this._AABBBounds;
+            }
+            else if (this.role === 'body' ||
+                this.role === 'row-header' ||
+                this.role === 'col-header' ||
+                this.role === 'right-frozen' ||
+                this.role === 'bottom-frozen' ||
+                this.role === 'corner-header' ||
+                this.role === 'corner-right-top-header' ||
+                this.role === 'corner-right-bottom-header' ||
+                this.role === 'corner-left-bottom-header') {
+                this._AABBBounds.setValue(-Infinity, -Infinity, Infinity, Infinity);
+                this.parent && this.parent.addChildUpdateBoundTag();
+                this.clearUpdateBoundTag();
+                return this._AABBBounds;
+            }
+            return super.doUpdateAABBBounds();
         }
-        return g;
+        updateColumnRowNumber(row) {
+            if (!this.rowNumber) {
+                this.rowNumber = row;
+            }
+            else {
+                this.rowNumber = Math.max(this.rowNumber, row);
+            }
+        }
+        updateColumnHeight(cellHeight) {
+            if (!this.colHeight) {
+                this.colHeight = cellHeight;
+            }
+            else {
+                this.colHeight += cellHeight;
+            }
+        }
+    };
+    function after(group, selfChange) {
+        if (!group.stage.dirtyBounds) {
+            return;
+        }
+        if (!(group.stage && group.stage.renderCount)) {
+            return;
+        }
+        if (group.isContainer && !selfChange) {
+            return;
+        }
+        group.stage.dirty(group.globalAABBBounds);
     }
-    function parseToGraphic(g, props) {
-        let isGraphic = false;
-        switch (g.type) {
-            case 'richtext':
-                break;
-            case 'rich/image':
-                break;
-            default:
-                isGraphic = true;
+
+    const CHART_NUMBER_TYPE = genNumberType();
+    class Chart extends Group$2 {
+        type = 'chart';
+        chartInstance;
+        activeChartInstance;
+        active;
+        cacheCanvas;
+        constructor(params) {
+            super(params);
+            this.numberType = CHART_NUMBER_TYPE;
+            if (!params.chartInstance) {
+                params.chartInstance = this.chartInstance = new params.ClassType(params.spec, {
+                    renderCanvas: params.canvas,
+                    mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
+                    modeParams: this.attribute.modeParams,
+                    canvasControled: false,
+                    viewBox: { x1: 0, x2: 0, y1: 0, y2: 0 },
+                    dpr: params.dpr,
+                    interactive: false,
+                    animation: false,
+                    autoFit: false
+                });
+                this.chartInstance.renderSync();
+            }
+            else {
+                this.chartInstance = params.chartInstance;
+            }
         }
-        if (isGraphic) {
-            Object.keys(props).forEach(k => {
-                const en = REACT_TO_CANOPUS_EVENTS[k];
-                if (en) {
-                    g.on(en, props[k]);
+        activate(table) {
+            this.active = true;
+            const { col, row } = this.parent;
+            const { x1, y1, x2, y2 } = this.getViewBox();
+            const tableBound = getTableBounds(col, row, table);
+            const clipBound = tableBound.intersect({
+                x1: x1 - table.scrollLeft,
+                x2: x2 - table.scrollLeft,
+                y1: y1 - table.scrollTop,
+                y2: y2 - table.scrollTop
+            });
+            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
+                renderCanvas: this.attribute.canvas,
+                mode: 'desktop-browser',
+                canvasControled: false,
+                viewBox: {
+                    x1: x1 - table.scrollLeft,
+                    x2: x2 - table.scrollLeft,
+                    y1: y1 - table.scrollTop,
+                    y2: y2 - table.scrollTop
+                },
+                dpr: table.internalProps.pixelRatio,
+                animation: false,
+                interactive: true,
+                autoFit: false,
+                beforeRender: (stage) => {
+                    const ctx = stage.window.getContext();
+                    ctx.inuse = true;
+                    ctx.clearMatrix();
+                    ctx.setTransformForCurrent(true);
+                    ctx.beginPath();
+                    ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1);
+                    ctx.clip();
+                },
+                afterRender(stage) {
+                    const ctx = stage.window.getContext();
+                    ctx.inuse = false;
+                }
+            });
+            this.activeChartInstance.renderSync();
+            table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
+            this.activeChartInstance.on('click', (params) => {
+                if (Chart.temp) {
+                    table.scenegraph.updateChartState(params?.datum);
                 }
             });
+            this.activeChartInstance.on('brushEnd', (params) => {
+                table.scenegraph.updateChartState(params?.value?.inBrushData);
+                Chart.temp = 0;
+                setTimeout(() => {
+                    Chart.temp = 1;
+                }, 0);
+            });
+            table._bindChartEvent?.(this.activeChartInstance);
+        }
+        static temp = 1;
+        deactivate() {
+            this.active = false;
+            this.activeChartInstance?.updateViewBox({
+                x1: -1000,
+                x2: -800,
+                y1: -1000,
+                y2: -800
+            }, false, false);
+            this.activeChartInstance?.release();
+            this.activeChartInstance = null;
+        }
+        updateData(data) {
+            this.attribute.data = data;
+        }
+        getViewBox() {
+            const cellGroup = this.parent;
+            const padding = this.attribute.cellPadding;
+            const table = this.stage.table;
+            return {
+                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
+                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
+                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
+                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
+            };
+        }
+    }
+    function getTableBounds(col, row, table) {
+        const { layoutMap } = table.internalProps;
+        const bodyBound = new Bounds();
+        const tableBound = table.scenegraph.tableGroup.globalAABBBounds;
+        bodyBound.x1 = tableBound.x1;
+        bodyBound.x2 = tableBound.x2;
+        bodyBound.y1 = tableBound.y1;
+        bodyBound.y2 = tableBound.y2;
+        if (!layoutMap.isFrozenColumn(col, row) && !layoutMap.isRightFrozenColumn(col, row)) {
+            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
+            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
+            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
+            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        }
+        else if (layoutMap.isLeftBottomCorner(col, row) || layoutMap.isRightTopCorner(col, row)) ;
+        else if (layoutMap.isFrozenColumn(col, row)) {
+            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
+            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        }
+        else if (layoutMap.isRightFrozenColumn(col, row)) {
+            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
+            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        }
+        else if (layoutMap.isBottomFrozenRow(col, row)) {
+            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
+            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
+        }
+        return bodyBound;
+    }
+
+    const chartTypes = {};
+
+    const builtin = {};
+    function get$2() {
+        return extend(builtin, chartTypes);
+    }
+
+    function createChartCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, dataValue, chartModule, chartSpec, chartInstance, dataId, table, cellTheme) {
+        const registerCharts = get$2();
+        const ClassType = registerCharts[chartModule];
+        const headerStyle = table._getCellStyle(col, row);
+        const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
+        if (isValid$1(functionalPadding)) {
+            padding = functionalPadding;
+        }
+        if (!cellGroup) {
+            cellGroup = new Group$1({
+                x: xOrigin,
+                y: yOrigin,
+                width,
+                height,
+                lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+                fill: cellTheme?.group?.fill ?? undefined,
+                stroke: cellTheme?.group?.stroke ?? undefined,
+                strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
+                strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
+                cursor: cellTheme?.group?.cursor ?? undefined,
+                lineCap: 'square',
+                clip: true,
+                cornerRadius: cellTheme.group.cornerRadius
+            });
+            cellGroup.role = 'cell';
+            cellGroup.col = col;
+            cellGroup.row = row;
+            columnGroup?.addChild(cellGroup);
         }
+        cellGroup.AABBBounds.width();
+        const chartGroup = new Chart({
+            stroke: false,
+            x: padding[3],
+            y: padding[0],
+            canvas: table.canvas ?? table.scenegraph.stage.window.getContext().canvas,
+            mode: table.options.mode,
+            modeParams: table.options.modeParams,
+            spec: chartSpec,
+            ClassType,
+            width: width - padding[3] - padding[1],
+            height: height - padding[2] - padding[0],
+            chartInstance,
+            dataId,
+            data: table.getCellValue(col, row),
+            cellPadding: padding,
+            dpr: table.internalProps.pixelRatio,
+            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
+        });
+        cellGroup.appendChild(chartGroup);
+        table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
+        return cellGroup;
     }
 
     const icons = {};
@@ -32487,231 +32622,10 @@
             };
         }
     };
-    function get$2() {
+    function get$1() {
         return extend(builtins, icons);
     }
 
-    let Group$1 = class Group extends Group$2 {
-        role;
-        col;
-        row;
-        mergeStartCol;
-        mergeStartRow;
-        mergeEndCol;
-        mergeEndRow;
-        contentWidth;
-        contentHeight;
-        rowNumber;
-        colHeight;
-        border;
-        needUpdate;
-        needUpdateWidth;
-        needUpdateHeight;
-        clear() {
-            this.removeAllChild();
-        }
-        getChildByName(name, deep) {
-            let result = null;
-            this.forEachChildren((child) => {
-                if (child.name === name) {
-                    result = child;
-                    return true;
-                }
-                return false;
-            });
-            if (deep) {
-                this.forEachChildren((child) => {
-                    if (child.getChildByName) {
-                        const target = child.getChildByName(name, true);
-                        if (target) {
-                            result = target;
-                            return true;
-                        }
-                    }
-                    return false;
-                });
-            }
-            return result;
-        }
-        get width() {
-            let width = this.AABBBounds.width();
-            if (width === Infinity || width === -Infinity) {
-                width = 0;
-            }
-            return Math.max(width, this.attribute.width ?? 0);
-        }
-        get height() {
-            let height = this.AABBBounds.height();
-            if (height === Infinity || height === -Infinity) {
-                height = 0;
-            }
-            return Math.max(height, this.attribute.height ?? 0);
-        }
-        setDeltaWidth(deltaX) {
-            if (deltaX === 0) {
-                return;
-            }
-            this.setAttribute('width', (this.attribute.width ?? 0) + deltaX);
-            if (this.border) {
-                this.border.setAttribute('width', this.border.attribute.width + deltaX);
-                if (this.border.type === 'group') {
-                    this.border.firstChild.setAttribute('width', this.border.firstChild.attribute.width + deltaX);
-                }
-            }
-        }
-        setDeltaHeight(deltaY) {
-            if (deltaY === 0) {
-                return;
-            }
-            this.setAttribute('height', (this.attribute.height ?? 0) + deltaY);
-            if (this.border) {
-                this.border.setAttribute('height', this.border.attribute.height + deltaY);
-                if (this.border.type === 'group') {
-                    this.border.firstChild.setAttribute('width', this.border.firstChild.attribute.height + deltaY);
-                }
-            }
-        }
-        setDeltaX(deltaX) {
-            if (deltaX === 0) {
-                return;
-            }
-            this.setAttribute('x', this.attribute.x + deltaX);
-        }
-        setDeltaY(deltaY) {
-            if (deltaY === 0) {
-                return;
-            }
-            this.setAttribute('y', this.attribute.y + deltaY);
-        }
-        forEachChildrenSkipChild(cb, skipChildName = 'border-rect', reverse = false) {
-            if (reverse) {
-                let child = this._lastChild;
-                let i = 0;
-                while (child) {
-                    if (child.name !== skipChildName) {
-                        const breakTag = cb(child, i++);
-                        if (breakTag) {
-                            return;
-                        }
-                    }
-                    child = child._prev;
-                }
-            }
-            else {
-                let child = this._firstChild;
-                let i = 0;
-                while (child) {
-                    if (child.name !== skipChildName) {
-                        const breakTag = cb(child, i++);
-                        if (breakTag) {
-                            return;
-                        }
-                    }
-                    child = child._next;
-                }
-            }
-        }
-        getColGroup(col) {
-            let c = this._firstChild;
-            if (!c) {
-                return null;
-            }
-            for (let i = 0; i < this.childrenCount; i++) {
-                if (c.col === col) {
-                    return c;
-                }
-                c = c._next;
-            }
-            return null;
-        }
-        getRowGroup(row) {
-            let c = this._firstChild;
-            if (!c) {
-                return null;
-            }
-            for (let i = 0; i < this.childrenCount; i++) {
-                if (c.row === row) {
-                    return c;
-                }
-                c = c._next;
-            }
-            return null;
-        }
-        getChildAt(index) {
-            const child = super.getChildAt(index);
-            if (child && child.name === 'border-rect') {
-                return child._next;
-            }
-            return child;
-        }
-        tryUpdateAABBBounds() {
-            if (this.role === 'cell') {
-                if (!this.shouldUpdateAABBBounds()) {
-                    return this._AABBBounds;
-                }
-                const selfChange = this.shouldSelfChangeUpdateAABBBounds();
-                const bounds = this.doUpdateAABBBounds();
-                this.addUpdateLayoutTag();
-                after(this, selfChange);
-                return bounds;
-            }
-            return super.tryUpdateAABBBounds();
-        }
-        doUpdateAABBBounds() {
-            if (this.role === 'cell') {
-                const attribute = this.attribute;
-                const { x, y, width, height } = attribute;
-                this._AABBBounds.setValue(x, y, x + width, y + height);
-                this.parent && this.parent.addChildUpdateBoundTag();
-                this.clearUpdateBoundTag();
-                return this._AABBBounds;
-            }
-            else if (this.role === 'body' ||
-                this.role === 'row-header' ||
-                this.role === 'col-header' ||
-                this.role === 'right-frozen' ||
-                this.role === 'bottom-frozen' ||
-                this.role === 'corner-header' ||
-                this.role === 'corner-right-top-header' ||
-                this.role === 'corner-right-bottom-header' ||
-                this.role === 'corner-left-bottom-header') {
-                this._AABBBounds.setValue(-Infinity, -Infinity, Infinity, Infinity);
-                this.parent && this.parent.addChildUpdateBoundTag();
-                this.clearUpdateBoundTag();
-                return this._AABBBounds;
-            }
-            return super.doUpdateAABBBounds();
-        }
-        updateColumnRowNumber(row) {
-            if (!this.rowNumber) {
-                this.rowNumber = row;
-            }
-            else {
-                this.rowNumber = Math.max(this.rowNumber, row);
-            }
-        }
-        updateColumnHeight(cellHeight) {
-            if (!this.colHeight) {
-                this.colHeight = cellHeight;
-            }
-            else {
-                this.colHeight += cellHeight;
-            }
-        }
-    };
-    function after(group, selfChange) {
-        if (!group.stage.dirtyBounds) {
-            return;
-        }
-        if (!(group.stage && group.stage.renderCount)) {
-            return;
-        }
-        if (group.isContainer && !selfChange) {
-            return;
-        }
-        group.stage.dirty(group.globalAABBBounds);
-    }
-
     function calcKeepAspectRatioSize(width, height, maxWidth, maxHeight) {
         let newWidth = width;
         let newHeight = height;
@@ -32749,43 +32663,12 @@
         return { x, y };
     }
 
-    function getProp(name, cellStyle, col, row, _table) {
-        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
-        if (typeof prop === 'function') {
-            const arg = {
-                col,
-                row,
-                table: _table,
-                value: _table.getCellValue(col, row),
-                dataValue: _table.getCellOriginValue(col, row),
-                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
-            };
-            return prop(arg);
-        }
-        return prop;
-    }
-    function getFunctionalProp(name, cellStyle, col, row, _table) {
-        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
-        if (typeof prop === 'function') {
-            const arg = {
-                col,
-                row,
-                table: _table,
-                value: _table.getCellValue(col, row),
-                dataValue: _table.getCellOriginValue(col, row),
-                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
-            };
-            return prop(arg);
-        }
-        return undefined;
-    }
-
-    get$2();
-    function createImageCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
-        const headerStyle = table._getCellStyle(col, row);
-        const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
-        if (isValid$1(functionalPadding)) {
-            padding = functionalPadding;
+    get$1();
+    function createImageCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
+        const headerStyle = table._getCellStyle(col, row);
+        const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
+        if (isValid$1(functionalPadding)) {
+            padding = functionalPadding;
         }
         if (cellTheme?.text?.textAlign) {
             textAlign = cellTheme?.text?.textAlign;
@@ -32851,7 +32734,7 @@
             };
         }
         image.failCallback = () => {
-            const regedIcons = get$2();
+            const regedIcons = get$1();
             image.image = regedIcons.damage_pic.svg;
         };
         cellGroup.appendChild(image);
@@ -33625,206 +33508,6 @@
         return group;
     }
 
-    const CHART_NUMBER_TYPE = genNumberType();
-    class Chart extends Group$2 {
-        type = 'chart';
-        chartInstance;
-        activeChartInstance;
-        active;
-        cacheCanvas;
-        constructor(params) {
-            super(params);
-            this.numberType = CHART_NUMBER_TYPE;
-            if (!params.chartInstance) {
-                params.chartInstance = this.chartInstance = new params.ClassType(params.spec, {
-                    renderCanvas: params.canvas,
-                    mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
-                    modeParams: this.attribute.modeParams,
-                    canvasControled: false,
-                    viewBox: { x1: 0, x2: 0, y1: 0, y2: 0 },
-                    dpr: params.dpr,
-                    interactive: false,
-                    animation: false,
-                    autoFit: false
-                });
-                this.chartInstance.renderSync();
-            }
-            else {
-                this.chartInstance = params.chartInstance;
-            }
-        }
-        activate(table) {
-            this.active = true;
-            const { col, row } = this.parent;
-            const { x1, y1, x2, y2 } = this.getViewBox();
-            const tableBound = getTableBounds(col, row, table);
-            const clipBound = tableBound.intersect({
-                x1: x1 - table.scrollLeft,
-                x2: x2 - table.scrollLeft,
-                y1: y1 - table.scrollTop,
-                y2: y2 - table.scrollTop
-            });
-            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
-                renderCanvas: this.attribute.canvas,
-                mode: 'desktop-browser',
-                canvasControled: false,
-                viewBox: {
-                    x1: x1 - table.scrollLeft,
-                    x2: x2 - table.scrollLeft,
-                    y1: y1 - table.scrollTop,
-                    y2: y2 - table.scrollTop
-                },
-                dpr: table.internalProps.pixelRatio,
-                animation: false,
-                interactive: true,
-                autoFit: false,
-                beforeRender: (stage) => {
-                    const ctx = stage.window.getContext();
-                    ctx.inuse = true;
-                    ctx.clearMatrix();
-                    ctx.setTransformForCurrent(true);
-                    ctx.beginPath();
-                    ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1);
-                    ctx.clip();
-                },
-                afterRender(stage) {
-                    const ctx = stage.window.getContext();
-                    ctx.inuse = false;
-                }
-            });
-            this.activeChartInstance.renderSync();
-            table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
-            this.activeChartInstance.on('click', (params) => {
-                if (Chart.temp) {
-                    table.scenegraph.updateChartState(params?.datum);
-                }
-            });
-            this.activeChartInstance.on('brushEnd', (params) => {
-                table.scenegraph.updateChartState(params?.value?.inBrushData);
-                Chart.temp = 0;
-                setTimeout(() => {
-                    Chart.temp = 1;
-                }, 0);
-            });
-            table._bindChartEvent?.(this.activeChartInstance);
-        }
-        static temp = 1;
-        deactivate() {
-            this.active = false;
-            this.activeChartInstance?.updateViewBox({
-                x1: -1000,
-                x2: -800,
-                y1: -1000,
-                y2: -800
-            }, false, false);
-            this.activeChartInstance?.release();
-            this.activeChartInstance = null;
-        }
-        updateData(data) {
-            this.attribute.data = data;
-        }
-        getViewBox() {
-            const cellGroup = this.parent;
-            const padding = this.attribute.cellPadding;
-            const table = this.stage.table;
-            return {
-                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
-                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
-                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
-                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
-            };
-        }
-    }
-    function getTableBounds(col, row, table) {
-        const { layoutMap } = table.internalProps;
-        const bodyBound = new Bounds();
-        const tableBound = table.scenegraph.tableGroup.globalAABBBounds;
-        bodyBound.x1 = tableBound.x1;
-        bodyBound.x2 = tableBound.x2;
-        bodyBound.y1 = tableBound.y1;
-        bodyBound.y2 = tableBound.y2;
-        if (!layoutMap.isFrozenColumn(col, row) && !layoutMap.isRightFrozenColumn(col, row)) {
-            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
-            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
-            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
-            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
-        }
-        else if (layoutMap.isLeftBottomCorner(col, row) || layoutMap.isRightTopCorner(col, row)) ;
-        else if (layoutMap.isFrozenColumn(col, row)) {
-            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
-            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
-        }
-        else if (layoutMap.isRightFrozenColumn(col, row)) {
-            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
-            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
-        }
-        else if (layoutMap.isBottomFrozenRow(col, row)) {
-            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
-            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
-        }
-        return bodyBound;
-    }
-
-    const chartTypes = {};
-
-    const builtin = {};
-    function get$1() {
-        return extend(builtin, chartTypes);
-    }
-
-    function createChartCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, dataValue, chartModule, chartSpec, chartInstance, dataId, table, cellTheme) {
-        const registerCharts = get$1();
-        const ClassType = registerCharts[chartModule];
-        const headerStyle = table._getCellStyle(col, row);
-        const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
-        if (isValid$1(functionalPadding)) {
-            padding = functionalPadding;
-        }
-        if (!cellGroup) {
-            cellGroup = new Group$1({
-                x: xOrigin,
-                y: yOrigin,
-                width,
-                height,
-                lineWidth: cellTheme?.group?.lineWidth ?? undefined,
-                fill: cellTheme?.group?.fill ?? undefined,
-                stroke: cellTheme?.group?.stroke ?? undefined,
-                strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
-                strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
-                cursor: cellTheme?.group?.cursor ?? undefined,
-                lineCap: 'square',
-                clip: true,
-                cornerRadius: cellTheme.group.cornerRadius
-            });
-            cellGroup.role = 'cell';
-            cellGroup.col = col;
-            cellGroup.row = row;
-            columnGroup?.addChild(cellGroup);
-        }
-        cellGroup.AABBBounds.width();
-        const chartGroup = new Chart({
-            stroke: false,
-            x: padding[3],
-            y: padding[0],
-            canvas: table.canvas ?? table.scenegraph.stage.window.getContext().canvas,
-            mode: table.options.mode,
-            modeParams: table.options.modeParams,
-            spec: chartSpec,
-            ClassType,
-            width: width - padding[3] - padding[1],
-            height: height - padding[2] - padding[0],
-            chartInstance,
-            dataId,
-            data: table.getCellValue(col, row),
-            cellPadding: padding,
-            dpr: table.internalProps.pixelRatio,
-            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
-        });
-        cellGroup.appendChild(chartGroup);
-        table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
-        return cellGroup;
-    }
-
     class CellContent extends Group$1 {
         _leftGroup;
         _rightGroup;
@@ -34018,7 +33701,7 @@
         return cellHierarchyIndent;
     }
 
-    function createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, lineClamp, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme) {
+    function createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, lineClamp, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme, range) {
         const leftIcons = [];
         const rightIcons = [];
         const contentLeftIcons = [];
@@ -34037,7 +33720,9 @@
         if (!Array.isArray(icons) || icons.length === 0) {
             if (isValid$1(textStr)) {
                 const text = convertInternal(textStr).replace(/\r?\n/g, '\n').replace(/\r/g, '\n').split('\n');
-                const hierarchyOffset = getHierarchyOffset(cellGroup.col, cellGroup.row, table);
+                const hierarchyOffset = range
+                    ? getHierarchyOffset(range.start.col, range.start.row, table)
+                    : getHierarchyOffset(cellGroup.col, cellGroup.row, table);
                 const attribute = {
                     text: text.length === 1 ? text[0] : text,
                     maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset),
@@ -34084,7 +33769,7 @@
                 }
             });
             leftIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                 iconMark.role = 'icon-left';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', leftIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -34094,7 +33779,7 @@
                 cellGroup.appendChild(iconMark);
             });
             rightIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                 iconMark.role = 'icon-right';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', rightIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -34104,7 +33789,7 @@
                 cellGroup.appendChild(iconMark);
             });
             absoluteLeftIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                 iconMark.role = 'icon-absolute-left';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', absoluteLeftIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -34113,7 +33798,7 @@
                 cellGroup.appendChild(iconMark);
             });
             absoluteRightIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                 iconMark.role = 'icon-absolute-right';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', absoluteRightIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -34181,13 +33866,13 @@
                     baseline: textBaseline
                 });
                 contentLeftIcons.forEach(icon => {
-                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                     iconMark.role = 'icon-content-left';
                     iconMark.name = icon.name;
                     cellContent.addLeftOccupyingIcon(iconMark);
                 });
                 contentRightIcons.forEach(icon => {
-                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                     iconMark.role = 'icon-content-right';
                     iconMark.name = icon.name;
                     cellContent.addRightOccupyingIcon(iconMark);
@@ -34251,7 +33936,7 @@
             height: height + padding[0] + padding[2]
         });
     }
-    function dealWithIcon(icon, mark, col, row, table) {
+    function dealWithIcon(icon, mark, col, row, range, table) {
         const iconAttribute = {};
         if (icon.type === 'image') {
             iconAttribute.image = icon.src;
@@ -34269,7 +33954,9 @@
             isNumber$3(row) &&
             table &&
             (icon.funcType === IconFuncTypeEnum.collapse || icon.funcType === IconFuncTypeEnum.expand)) {
-            hierarchyOffset = getHierarchyOffset(col, row, table);
+            hierarchyOffset = range
+                ? getHierarchyOffset(range.start.col, range.start.row, table)
+                : getHierarchyOffset(col, row, table);
         }
         iconAttribute.marginLeft = (icon.marginLeft ?? 0) + hierarchyOffset;
         iconAttribute.marginRight = icon.marginRight ?? 0;
@@ -34491,7 +34178,7 @@
         return false;
     }
 
-    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme) {
+    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
         if (isValid$1(functionalPadding)) {
@@ -34533,9 +34220,15 @@
             const textStr = value;
             let icons;
             if (mayHaveIcon) {
-                icons = table.getCellIcons(col, row);
+                let iconCol = col;
+                let iconRow = row;
+                if (range) {
+                    iconCol = range.start.col;
+                    iconRow = range.start.row;
+                }
+                icons = table.getCellIcons(iconCol, iconRow);
             }
-            createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme);
+            createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme, range);
             if (cellTheme?._vtable?.marked) {
                 const mark = createArc({
                     x: cellGroup.attribute.width,
@@ -34559,7 +34252,7 @@
         return cellGroup;
     }
 
-    const regedIcons$1 = get$2();
+    const regedIcons$1 = get$1();
     function createVideoCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
@@ -34814,7 +34507,7 @@
         return checkbox;
     }
 
-    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme) {
+    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
         if (isPromise(value)) {
             value = table.getCellValue(col, row);
         }
@@ -34871,23 +34564,29 @@
             }
             let customElementsGroup;
             let renderDefault = true;
-            let customRender;
-            let customLayout;
-            const cellLocation = table.getCellLocation(col, row);
-            if (cellLocation !== 'body') {
-                customRender = define?.headerCustomRender;
-                customLayout = define?.headerCustomLayout;
-            }
-            else {
-                customRender = define?.customRender || table.customRender;
-                customLayout = define?.customLayout;
-            }
-            if (customLayout || customRender) {
-                const customResult = dealWithCustom(customLayout, customRender, col, row, cellWidth, cellHeight, false, table.heightMode === 'autoHeight', padding, table);
+            if (customResult) {
                 customElementsGroup = customResult.elementsGroup;
                 renderDefault = customResult.renderDefault;
             }
-            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme);
+            else {
+                let customRender;
+                let customLayout;
+                const cellLocation = table.getCellLocation(col, row);
+                if (cellLocation !== 'body') {
+                    customRender = define?.headerCustomRender;
+                    customLayout = define?.headerCustomLayout;
+                }
+                else {
+                    customRender = define?.customRender || table.customRender;
+                    customLayout = define?.customLayout;
+                }
+                if (customLayout || customRender) {
+                    const customResult = dealWithCustom(customLayout, customRender, col, row, cellWidth, cellHeight, false, table.heightMode === 'autoHeight', padding, table);
+                    customElementsGroup = customResult.elementsGroup;
+                    renderDefault = customResult.renderDefault;
+                }
+            }
+            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range);
             const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
             if (axisConfig) {
                 const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, table);
@@ -34921,7 +34620,7 @@
         else if (type === 'progressbar') {
             const style = table._getCellStyle(col, row);
             const dataValue = table.getCellOriginValue(col, row);
-            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, null, true, cellTheme);
+            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, null, true, cellTheme, range);
             const progressBarGroup = createProgressBarCell(define, style, colWidth, value, dataValue, col, row, padding, table);
             if (cellGroup.firstChild) {
                 cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild);
@@ -34943,14 +34642,45 @@
         const cellStyle = table._getCellStyle(col, row);
         const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText;
         const cellLocation = table.getCellLocation(col, row);
-        const define = cellLocation !== 'body' ? table.getHeaderDefine(col, row) : table.getBodyColumnDefine(col, row);
+        let value = table.getCellValue(col, row);
         let isMerge;
         let range;
-        if (cellLocation !== 'body' || define?.mergeCell || table.internalProps.customMergeCell) {
+        let cellTheme;
+        let customStyle;
+        let customResult;
+        if (table.internalProps.customMergeCell) {
+            const customMerge = table.getCustomMerge(col, row);
+            if (customMerge) {
+                const { range: customMergeRange, text: customMergeText, style: customMergeStyle, customLayout, customRender } = customMerge;
+                range = customMergeRange;
+                isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
+                value = customMergeText;
+                customStyle = customMergeStyle;
+                if (customStyle) {
+                    cellTheme = getStyleTheme(customStyle, table, range.start.col, range.start.row, getProp).theme;
+                    cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
+                }
+                if (customLayout || customRender) {
+                    customResult = dealWithCustom(customLayout, customRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), false, table.heightMode === 'autoHeight', [0, 0, 0, 0], table);
+                }
+            }
+        }
+        let colForDefine = col;
+        let rowForDefine = row;
+        if (range) {
+            colForDefine = range.start.col;
+            rowForDefine = range.start.row;
+        }
+        const define = cellLocation !== 'body'
+            ? table.getHeaderDefine(colForDefine, rowForDefine)
+            : table.getBodyColumnDefine(colForDefine, rowForDefine);
+        if (!range && (cellLocation !== 'body' || define?.mergeCell)) {
             range = table.getCellRange(col, row);
             isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
         }
-        let cellTheme = getStyleTheme(cellStyle, table, isMerge ? range.start.col : col, isMerge ? range.start.row : row, getProp).theme;
+        if (!cellTheme) {
+            cellTheme = getStyleTheme(cellStyle, table, isMerge ? range.start.col : col, isMerge ? range.start.row : row, getProp).theme;
+        }
         cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
         if (!addNew && !isMerge && canUseFastUpdate(col, row, oldCellGroup, autoWrapText, table)) {
             const cellWidth = table.getColWidth(col);
@@ -35025,274 +34755,641 @@
         const type = table.isHeader(col, row)
             ? table._getHeaderLayoutMap(col, row).headerType
             : table.getBodyColumnType(col, row);
-        let value = table.getCellValue(col, row);
-        let customStyle;
-        if (table.internalProps.customMergeCell) {
-            const customMerge = table.getCustomMerge(col, row);
-            if (customMerge) {
-                const { range: customMergeRange, text: customMergeText, style: customMergeStyle } = customMerge;
-                range = customMergeRange;
+        const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
+        const padding = cellTheme._vtable.padding;
+        const textAlign = cellTheme._vtable.textAlign;
+        const textBaseline = cellTheme._vtable.textBaseline;
+        let newCellGroup;
+        let bgColorFunc;
+        if (table.internalProps?.dataConfig?.mappingRules && !table.isHeader(col, row)) {
+            table.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
+                if (mappingRule.bgColor &&
+                    table.internalProps.layoutMap.getIndicatorKey(col, row) ===
+                        mappingRule.bgColor.indicatorKey) {
+                    bgColorFunc = mappingRule.bgColor.mapping;
+                }
+            });
+        }
+        let cellWidth;
+        let cellHeight;
+        if (range) {
+            cellWidth = table.getColsWidth(range.start.col, range.end.col);
+            cellHeight = table.getRowsHeight(range.start.row, range.end.row);
+        }
+        else {
+            cellWidth = table.getColWidth(col);
+            cellHeight = table.getRowHeight(row);
+        }
+        if (isPromise(value)) {
+            oldCellGroup.removeAllChild();
+            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult));
+        }
+        else {
+            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
+        }
+        if (isMerge) {
+            const rangeHeight = table.getRowHeight(row);
+            const rangeWidth = table.getColWidth(col);
+            const { width: contentWidth } = newCellGroup.attribute;
+            const { height: contentHeight } = newCellGroup.attribute;
+            newCellGroup.contentWidth = contentWidth;
+            newCellGroup.contentHeight = contentHeight;
+            resizeCellGroup(newCellGroup, rangeWidth, rangeHeight, range, table);
+        }
+        return newCellGroup;
+    }
+    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult) {
+        if (isPromise(value)) {
+            value = table.getCellValue(col, row);
+        }
+        if (!addNew && (oldCellGroup.row !== row || oldCellGroup.col !== col)) {
+            return null;
+        }
+        const newCellGroup = createCell(type, value, define, table, col, row, table.getColWidth(col), cellWidth, cellHeight, addNew ? table.scenegraph.getColGroup(col) : oldCellGroup.parent, addNew ? 0 : table.scenegraph.getCellGroupY(row), padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
+        if (!addNew && oldCellGroup.parent) {
+            oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
+            oldCellGroup.parent.removeChild(oldCellGroup);
+            if (table.scenegraph?.proxy.cellCache.get(col)) {
+                table.scenegraph?.proxy.cellCache.set(col, newCellGroup);
+            }
+        }
+        return newCellGroup;
+    }
+    function canUseFastUpdate(col, row, oldCellGroup, autoWrapText, table) {
+        const define = table.getBodyColumnDefine(col, row);
+        const mayHaveIcon = !!define?.icon || !!define?.tree;
+        const cellType = table.getBodyColumnType(col, row);
+        const autoRowHeight = table.heightMode === 'autoHeight';
+        const value = table.getCellValue(col, row);
+        if (!table.isHeader(col, row) &&
+            oldCellGroup.role === 'cell' &&
+            cellType === 'text' &&
+            !autoWrapText &&
+            !autoRowHeight &&
+            !mayHaveIcon &&
+            oldCellGroup.firstChild?.type === 'text' &&
+            !isPromise(value)) {
+            return true;
+        }
+        return false;
+    }
+
+    function createComplexColumn(columnGroup, col, colWidth, rowStart, rowEnd, mergeMap, defaultRowHeight, table, cellLocation, rowLimit) {
+        let padding;
+        let textAlign;
+        let textBaseline;
+        let y = 0;
+        if (columnGroup.lastChild && columnGroup.lastChild.row === rowStart - 1) {
+            y = columnGroup.lastChild.attribute.y + columnGroup.lastChild.attribute.height;
+        }
+        else if (columnGroup.colHeight) {
+            y = columnGroup.colHeight;
+        }
+        for (let j = rowStart; j <= rowEnd; j++) {
+            const row = j;
+            let value = table.getCellValue(col, row);
+            let cellWidth = colWidth;
+            let cellHeight = table.getRowHeight(row);
+            let range;
+            let isMerge;
+            let customStyle;
+            let customResult;
+            if (table.internalProps.customMergeCell) {
+                const customMerge = table.getCustomMerge(col, row);
+                if (customMerge) {
+                    const { range: customMergeRange, text: customMergeText, style: customMergeStyle, customLayout, customRender } = customMerge;
+                    range = customMergeRange;
+                    isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
+                    if (isMerge) {
+                        const mergeSize = dealMerge(range, mergeMap, table);
+                        cellWidth = mergeSize.cellWidth;
+                        cellHeight = mergeSize.cellHeight;
+                    }
+                    value = customMergeText;
+                    customStyle = customMergeStyle;
+                    if (customLayout || customRender) {
+                        customResult = dealWithCustom(customLayout, customRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), false, table.heightMode === 'autoHeight', [0, 0, 0, 0], table);
+                    }
+                }
+            }
+            let colForDefine = col;
+            let rowForDefine = row;
+            if (range) {
+                colForDefine = range.start.col;
+                rowForDefine = range.start.row;
+            }
+            const define = cellLocation !== 'body'
+                ? table.getHeaderDefine(colForDefine, rowForDefine)
+                : table.getBodyColumnDefine(colForDefine, rowForDefine);
+            const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
+            if (!range && (cellLocation !== 'body' || define?.mergeCell)) {
+                range = table.getCellRange(col, row);
                 isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
-                value = customMergeText;
-                customStyle = customMergeStyle;
-                if (customStyle) {
-                    cellTheme = getStyleTheme(customStyle, table, range.start.col, range.start.row, getProp).theme;
-                    cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
+                if (isMerge) {
+                    const mergeSize = dealMerge(range, mergeMap, table);
+                    cellWidth = mergeSize.cellWidth;
+                    cellHeight = mergeSize.cellHeight;
                 }
             }
+            const cellStyle = customStyle || table._getCellStyle(col, row);
+            const cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
+            cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
+            cellTheme.group.width = colWidth;
+            cellTheme.group.height = Array.isArray(defaultRowHeight) ? defaultRowHeight[row] : defaultRowHeight;
+            if (cellTheme._vtable.padding) {
+                padding = cellTheme._vtable.padding;
+            }
+            if (cellTheme.text.textAlign) {
+                textAlign = cellTheme.text.textAlign;
+            }
+            if (cellTheme.text.textBaseline) {
+                textBaseline = cellTheme.text.textBaseline;
+            }
+            if (cellLocation !== 'body' && !cellTheme.group.fill) {
+                cellTheme.group.fill = '#fff';
+            }
+            const type = (table.isHeader(col, row) ? table._getHeaderLayoutMap(col, row).headerType : table.getBodyColumnType(col, row)) ||
+                'text';
+            if (isPromise(value)) {
+                dealPromiseData(value, table, createCell.bind(null, type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult));
+                columnGroup.updateColumnRowNumber(row);
+                const height = table.getRowHeight(row);
+                columnGroup.updateColumnHeight(height);
+                y += height;
+            }
+            else {
+                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
+                columnGroup.updateColumnRowNumber(row);
+                if (isMerge) {
+                    const rangeHeight = table.getRowHeight(row);
+                    const rangeWidth = table.getColWidth(col);
+                    const { width: contentWidth } = cellGroup.attribute;
+                    const { height: contentHeight } = cellGroup.attribute;
+                    cellGroup.contentWidth = contentWidth;
+                    cellGroup.contentHeight = contentHeight;
+                    resizeCellGroup(cellGroup, rangeWidth, rangeHeight, range, table);
+                    columnGroup.updateColumnHeight(rangeHeight);
+                    y += rangeHeight;
+                }
+                else {
+                    columnGroup.updateColumnHeight(cellGroup.attribute.height);
+                    y += cellGroup.attribute.height;
+                }
+            }
+            if (rowLimit && row > rowLimit) {
+                break;
+            }
+        }
+        columnGroup.setAttribute('width', colWidth);
+        return {
+            width: colWidth,
+            height: y
+        };
+    }
+    function resizeCellGroup(cellGroup, rangeWidth, rangeHeight, range, table) {
+        const { col, row } = cellGroup;
+        const dx = -table.getColsWidth(range.start.col, col - 1);
+        const dy = -table.getRowsHeight(range.start.row, row - 1);
+        cellGroup.forEachChildren((child) => {
+            child.setAttributes({
+                dx: (child.attribute.dx ?? 0) + dx,
+                dy: (child.attribute.dy ?? 0) + dy
+            });
+        });
+        const lineWidth = cellGroup.attribute.lineWidth;
+        const isLineWidthArray = isArray$1(lineWidth);
+        const newLineWidth = [0, 0, 0, 0];
+        if (col === range.start.col) {
+            newLineWidth[3] = isLineWidthArray ? lineWidth[3] : lineWidth;
+        }
+        if (row === range.start.row) {
+            newLineWidth[0] = isLineWidthArray ? lineWidth[0] : lineWidth;
+        }
+        if (col === range.end.col) {
+            newLineWidth[1] = isLineWidthArray ? lineWidth[1] : lineWidth;
+        }
+        if (row === range.end.row) {
+            newLineWidth[2] = isLineWidthArray ? lineWidth[2] : lineWidth;
+        }
+        const widthChange = rangeWidth !== cellGroup.attribute.width;
+        const heightChange = rangeHeight !== cellGroup.attribute.height;
+        cellGroup.setAttributes({
+            width: rangeWidth,
+            height: rangeHeight,
+            strokeArrayWidth: newLineWidth
+        });
+        cellGroup.mergeStartCol = range.start.col;
+        cellGroup.mergeStartRow = range.start.row;
+        cellGroup.mergeEndCol = range.end.col;
+        cellGroup.mergeEndRow = range.end.row;
+        return {
+            widthChange,
+            heightChange
+        };
+    }
+    function dealMerge(range, mergeMap, table) {
+        let cellWidth = 0;
+        let cellHeight = 0;
+        const mergeResult = mergeMap.get(`${range.start.col},${range.start.row};${range.end.col},${range.end.row}`);
+        if (!mergeResult) {
+            for (let col = range.start.col; col <= range.end.col; col++) {
+                cellWidth += table.getColWidth(col);
+            }
+            for (let i = range.start.row; i <= range.end.row; i++) {
+                cellHeight += table.getRowHeight(i);
+            }
+            mergeMap.set(`${range.start.col},${range.start.row};${range.end.col},${range.end.row}`, {
+                cellWidth,
+                cellHeight
+            });
+        }
+        else {
+            cellWidth = mergeResult.cellWidth;
+            cellHeight = mergeResult.cellHeight;
+        }
+        return {
+            cellWidth,
+            cellHeight
+        };
+    }
+
+    function dealWithCustom(customLayout, customRender, col, row, width, height, autoWidth, autoHeight, padding, table) {
+        let renderDefault = true;
+        let enableCellPadding = false;
+        let expectedWidth;
+        let expectedHeight;
+        let customElements;
+        let elementsGroup;
+        if (typeof customLayout === 'function') {
+            const arg = {
+                col,
+                row,
+                dataValue: table.getCellOriginValue(col, row),
+                value: table.getCellValue(col, row) || '',
+                rect: {
+                    left: 0,
+                    top: 0,
+                    right: width,
+                    bottom: height,
+                    width,
+                    height
+                },
+                table
+            };
+            const customRenderObj = customLayout(arg);
+            if (customRenderObj.rootContainer) {
+                customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer);
+            }
+            if (customRenderObj.rootContainer instanceof Group$2) {
+                elementsGroup = customRenderObj.rootContainer;
+                elementsGroup.name = 'custom-container';
+            }
+            renderDefault = customRenderObj.renderDefault;
+            enableCellPadding = customRenderObj.enableCellPadding;
+        }
+        else if (typeof customRender === 'function') {
+            const arg = {
+                col,
+                row,
+                dataValue: table.getCellOriginValue(col, row),
+                value: table.getCellValue(col, row) || '',
+                rect: {
+                    left: 0,
+                    top: 0,
+                    right: width,
+                    bottom: height,
+                    width,
+                    height
+                },
+                table
+            };
+            const customRenderObj = customRender(arg);
+            if (customRenderObj) {
+                customElements = customRenderObj.elements;
+                renderDefault = customRenderObj.renderDefault;
+                expectedWidth = customRenderObj.expectedWidth;
+                expectedHeight = customRenderObj.expectedHeight;
+            }
+        }
+        else if (customRender) {
+            expectedWidth = customRender.expectedWidth;
+            expectedHeight = customRender.expectedHeight;
+            customElements = customRender.elements;
+            renderDefault = customRender.renderDefault;
+        }
+        if (customElements) {
+            const value = table.getCellValue(col, row);
+            elementsGroup = adjustElementToGroup(customElements, autoWidth ? expectedWidth : width, autoHeight ? expectedHeight : height, value);
+        }
+        if (enableCellPadding) {
+            elementsGroup.setAttributes({
+                x: padding[3],
+                y: padding[0],
+                width: width - padding[1] - padding[3],
+                height: height - padding[0] - padding[2]
+            });
+        }
+        dealPercentCalc(elementsGroup, width, height);
+        return {
+            elementsGroup,
+            renderDefault
+        };
+    }
+    function adjustElementToGroup(elements, width, height, value) {
+        const customGroup = new Group$2({
+            x: 0,
+            y: 0,
+            width,
+            height,
+            fill: false,
+            stroke: false,
+            pickable: false
+        });
+        customGroup.name = 'custom-container';
+        const elementsAdjusted = adjustElementsPos(elements, width, height, value);
+        elementsAdjusted.forEach(element => {
+            if (element.clickable) {
+                element.pickable = element.clickable;
+            }
+            switch (element.type) {
+                case 'arc':
+                    const arc = createArc({
+                        x: element.x,
+                        y: element.y,
+                        dx: (element.dx ?? 0),
+                        dy: (element.dy ?? 0),
+                        fill: element.fill,
+                        stroke: element.stroke,
+                        outerRadius: element.radius,
+                        startAngle: element.startAngle,
+                        endAngle: element.endAngle,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    customGroup.appendChild(arc);
+                    break;
+                case 'text':
+                    if (element.background) {
+                        const expandX = element.background?.expandX ?? 0;
+                        const expandY = element.background?.expandY ?? 0;
+                        const textBackRect = createRect({
+                            x: element.x - expandX,
+                            y: element.y - expandY,
+                            dx: (element.dx ?? 0),
+                            dy: (element.dy ?? 0),
+                            width: element.width + expandX * 2,
+                            height: element.height + expandY * 2,
+                            cornerRadius: element.background?.cornerRadius ?? 0,
+                            fill: element.background?.fill ?? '#888'
+                        });
+                        customGroup.appendChild(textBackRect);
+                    }
+                    const text = new Text$1(Object.assign({
+                        pickable: !!element.pickable,
+                        fill: element.color ?? element.fill
+                    }, element));
+                    customGroup.appendChild(text);
+                    break;
+                case 'rect':
+                    const rect = createRect({
+                        x: element.x,
+                        y: element.y,
+                        dx: (element.dx ?? 0),
+                        dy: (element.dy ?? 0),
+                        width: element.width,
+                        height: element.height,
+                        cornerRadius: element.radius,
+                        fill: element.fill,
+                        stroke: element.stroke,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    customGroup.appendChild(rect);
+                    break;
+                case 'circle':
+                    const circle = createCircle({
+                        x: element.x,
+                        y: element.y,
+                        dx: (element.dx ?? 0),
+                        dy: (element.dy ?? 0),
+                        radius: element.radius,
+                        fill: element.fill,
+                        stroke: element.stroke,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    customGroup.appendChild(circle);
+                    break;
+                case 'icon':
+                    const icon = new Icon$1({
+                        x: element.x,
+                        y: element.y,
+                        dx: (element.dx ?? 0),
+                        dy: (element.dy ?? 0),
+                        width: element.width,
+                        height: element.height,
+                        image: element.svg,
+                        backgroundWidth: element.hover ? (element.hover.width ?? element.width) : undefined,
+                        backgroundHeight: element.hover ? (element.hover.width ?? element.width) : undefined,
+                        backgroundColor: element.hover ? element.hover.bgColor ?? 'rgba(22,44,66,0.2)' : undefined,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    icon.role = 'icon-custom';
+                    customGroup.appendChild(icon);
+                    break;
+                case 'image':
+                    const image = new Icon$1({
+                        x: element.x,
+                        y: element.y,
+                        dx: (element.dx ?? 0),
+                        dy: (element.dy ?? 0),
+                        width: element.width,
+                        height: element.height,
+                        image: element.src,
+                        backgroundWidth: element.hover ? (element.hover.width ?? element.width) : undefined,
+                        backgroundHeight: element.hover ? (element.hover.width ?? element.width) : undefined,
+                        backgroundColor: element.hover ? element.hover.bgColor ?? 'rgba(22,44,66,0.2)' : undefined,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor,
+                        shape: element.shape
+                    });
+                    image.role = 'image-custom';
+                    customGroup.appendChild(image);
+                    break;
+                case 'line':
+                    const line = createLine({
+                        points: element.points,
+                        stroke: element.stroke,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    customGroup.appendChild(line);
+                    break;
+            }
+        });
+        return customGroup;
+    }
+    function adjustElementsPos(originalElements, width, height, value) {
+        const result = [];
+        const left = 0;
+        const top = 0;
+        const borderLineWidths = [0, 0, 0, 0];
+        for (let i = 0; i < originalElements.length; i++) {
+            const originalElement = originalElements[i];
+            const element = Object.assign({}, originalElement);
+            for (const name in element) {
+                if (element.hasOwnProperty(name) && isFunction$1(element[name])) {
+                    element[name] = element[name](value);
+                }
+            }
+            const rect = element;
+            if (isValid$1(rect.x)) {
+                rect.x = isString$2(rect.x)
+                    ? transformString(rect.x, width - borderLineWidths[1])
+                    : Number(rect.x);
+            }
+            if (isValid$1(rect.y)) {
+                rect.y = isString$2(rect.y)
+                    ? transformString(rect.y, height - borderLineWidths[2])
+                    : Number(rect.y);
+            }
+            if ('width' in element) {
+                element.width = isString$2(element.width)
+                    ? transformString(element.width, width - borderLineWidths[1])
+                    : Number(element.width);
+            }
+            if ('height' in element) {
+                element.height = isString$2(element.height)
+                    ? transformString(element.height, height - borderLineWidths[2])
+                    : Number(element.height);
+            }
+            if ('radius' in element) {
+                element.radius = isString$2(element.radius)
+                    ? transformString(element.radius, Math.min(width - borderLineWidths[1], height - borderLineWidths[2]))
+                    : Number(element.radius);
+            }
+            if ('hover' in element) {
+                element.hover.x = isString$2(element.hover.x)
+                    ? transformString(element.hover.x, width - borderLineWidths[1])
+                    : Number(element.hover.x);
+                element.hover.y = isString$2(element.hover.y)
+                    ? transformString(element.hover.y, height - borderLineWidths[2])
+                    : Number(element.hover.y);
+                element.hover.width = isString$2(element.hover.width)
+                    ? transformString(element.hover.width, width - borderLineWidths[1])
+                    : Number(element.hover.width);
+                element.hover.height = isString$2(element.hover.height)
+                    ? transformString(element.hover.height, height - borderLineWidths[2])
+                    : Number(element.hover.height);
+                element.hover.x += left;
+                element.hover.y += top;
+            }
+            rect.x = rect.x + left;
+            rect.y = rect.y + top;
+            result.push(element);
         }
-        let newCellGroup;
-        const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
-        const padding = cellTheme._vtable.padding;
-        const textAlign = cellTheme._vtable.textAlign;
-        const textBaseline = cellTheme._vtable.textBaseline;
-        let bgColorFunc;
-        if (table.internalProps?.dataConfig?.mappingRules && !table.isHeader(col, row)) {
-            table.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
-                if (mappingRule.bgColor &&
-                    table.internalProps.layoutMap.getIndicatorKey(col, row) ===
-                        mappingRule.bgColor.indicatorKey) {
-                    bgColorFunc = mappingRule.bgColor.mapping;
-                }
-            });
-        }
-        if (cellLocation !== 'body') {
-            define?.headerCustomRender;
-            define?.headerCustomLayout;
-        }
-        else {
-            define?.customRender || table.customRender;
-            define?.customLayout;
-        }
-        let cellWidth;
-        let cellHeight;
-        if (range) {
-            cellWidth = table.getColsWidth(range.start.col, range.end.col);
-            cellHeight = table.getRowsHeight(range.start.row, range.end.row);
-        }
-        else {
-            cellWidth = table.getColWidth(col);
-            cellHeight = table.getRowHeight(row);
-        }
-        if (isPromise(value)) {
-            oldCellGroup.removeAllChild();
-            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme));
+        return result;
+    }
+    function transformString(str, size) {
+        if (str.endsWith('px')) {
+            return parseInt(str, 10);
         }
-        else {
-            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme);
+        else if (str.endsWith('%') && size) {
+            return (parseInt(str, 10) / 100) * size;
         }
-        if (isMerge) {
-            const rangeHeight = table.getRowHeight(row);
-            const rangeWidth = table.getColWidth(col);
-            const { width: contentWidth } = newCellGroup.attribute;
-            const { height: contentHeight } = newCellGroup.attribute;
-            newCellGroup.contentWidth = contentWidth;
-            newCellGroup.contentHeight = contentHeight;
-            resizeCellGroup(newCellGroup, rangeWidth, rangeHeight, range, table);
+        return parseInt(str, 10);
+    }
+    function dealPercentCalc(group, parentWidth, parentHeight) {
+        if (!group) {
+            return;
         }
-        return newCellGroup;
+        group.forEachChildren((child) => {
+            if (!child) {
+                return;
+            }
+            if (isObject$4(child.attribute.width) && child.attribute.width.percent) {
+                child.setAttribute('width', (child.attribute.width.percent / 100) * parentWidth +
+                    (child.attribute.width.delta ?? 0));
+            }
+            if (isObject$4(child.attribute.height) && child.attribute.height.percent) {
+                child.setAttribute('height', (child.attribute.height.percent / 100) * parentHeight +
+                    (child.attribute.height.delta ?? 0));
+            }
+            if (child.type === 'group') {
+                dealPercentCalc(child, child.attribute.width, child.attribute.height);
+            }
+        });
     }
-    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme) {
-        if (isPromise(value)) {
-            value = table.getCellValue(col, row);
+    function decodeReactDom(dom) {
+        if (!dom || !dom.$$typeof) {
+            return dom;
         }
-        if (!addNew && (oldCellGroup.row !== row || oldCellGroup.col !== col)) {
-            return null;
+        const type = dom.type;
+        const { attribute, children, stateProxy } = dom.props;
+        const g = type({ attribute });
+        parseToGraphic(g, dom.props);
+        if (stateProxy) {
+            g.stateProxy = stateProxy;
         }
-        const newCellGroup = createCell(type, value, define, table, col, row, table.getColWidth(col), cellWidth, cellHeight, addNew ? table.scenegraph.getColGroup(col) : oldCellGroup.parent, addNew ? 0 : table.scenegraph.getCellGroupY(row), padding, textAlign, textBaseline, mayHaveIcon, cellTheme);
-        if (!addNew && oldCellGroup.parent) {
-            oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
-            oldCellGroup.parent.removeChild(oldCellGroup);
-            if (table.scenegraph?.proxy.cellCache.get(col)) {
-                table.scenegraph?.proxy.cellCache.set(col, newCellGroup);
-            }
+        g.id = attribute.id;
+        g.name = attribute.name;
+        if (isArray$1(children)) {
+            children.forEach((item) => {
+                const c = decodeReactDom(item);
+                c && c.type && g.add(c);
+            });
         }
-        return newCellGroup;
-    }
-    function canUseFastUpdate(col, row, oldCellGroup, autoWrapText, table) {
-        const define = table.getBodyColumnDefine(col, row);
-        const mayHaveIcon = !!define?.icon || !!define?.tree;
-        const cellType = table.getBodyColumnType(col, row);
-        const autoRowHeight = table.heightMode === 'autoHeight';
-        const value = table.getCellValue(col, row);
-        if (!table.isHeader(col, row) &&
-            oldCellGroup.role === 'cell' &&
-            cellType === 'text' &&
-            !autoWrapText &&
-            !autoRowHeight &&
-            !mayHaveIcon &&
-            oldCellGroup.firstChild?.type === 'text' &&
-            !isPromise(value)) {
-            return true;
+        else if (children) {
+            g.add(decodeReactDom(children));
         }
-        return false;
+        return g;
     }
-
-    function createComplexColumn(columnGroup, col, colWidth, rowStart, rowEnd, mergeMap, defaultRowHeight, table, cellLocation, rowLimit) {
-        let padding;
-        let textAlign;
-        let textBaseline;
-        let y = 0;
-        if (columnGroup.lastChild && columnGroup.lastChild.row === rowStart - 1) {
-            y = columnGroup.lastChild.attribute.y + columnGroup.lastChild.attribute.height;
+    function parseToGraphic(g, props) {
+        let isGraphic = false;
+        switch (g.type) {
+            case 'richtext':
+                break;
+            case 'rich/image':
+                break;
+            default:
+                isGraphic = true;
         }
-        else if (columnGroup.colHeight) {
-            y = columnGroup.colHeight;
+        if (isGraphic) {
+            Object.keys(props).forEach(k => {
+                const en = REACT_TO_CANOPUS_EVENTS[k];
+                if (en) {
+                    g.on(en, props[k]);
+                }
+            });
         }
-        for (let j = rowStart; j <= rowEnd; j++) {
-            const row = j;
-            const define = cellLocation !== 'body' ? table.getHeaderDefine(col, row) : table.getBodyColumnDefine(col, row);
-            const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
-            let value = table.getCellValue(col, row);
-            let cellWidth = colWidth;
-            let cellHeight = table.getRowHeight(row);
-            let range;
-            let isMerge;
-            let customStyle;
-            if (table.internalProps.customMergeCell) {
-                const customMerge = table.getCustomMerge(col, row);
-                if (customMerge) {
-                    const { range: customMergeRange, text: customMergeText, style: customMergeStyle } = customMerge;
-                    range = customMergeRange;
-                    isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
-                    if (isMerge) {
-                        const mergeSize = dealMerge(range, mergeMap, table);
-                        cellWidth = mergeSize.cellWidth;
-                        cellHeight = mergeSize.cellHeight;
+    }
+    function getCustomCellMergeCustom(col, row, cellGroup, table) {
+        if (table.internalProps.customMergeCell) {
+            const customMerge = table.getCustomMerge(col, row);
+            if (customMerge) {
+                const { range: customMergeRange, text: customMergeText, style: customMergeStyle, customLayout: customMergeLayout, customRender: customMergeRender } = customMerge;
+                if (customMergeLayout || customMergeRender) {
+                    const customResult = dealWithCustom(customMergeLayout, customMergeRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), false, table.heightMode === 'autoHeight', [0, 0, 0, 0], table);
+                    const customElementsGroup = customResult.elementsGroup;
+                    if (cellGroup.childrenCount > 0 && customElementsGroup) {
+                        cellGroup.insertBefore(customElementsGroup, cellGroup.firstChild);
+                    }
+                    else if (customElementsGroup) {
+                        cellGroup.appendChild(customElementsGroup);
                     }
-                    value = customMergeText;
-                    customStyle = customMergeStyle;
-                }
-            }
-            if (!range && (cellLocation !== 'body' || define?.mergeCell)) {
-                range = table.getCellRange(col, row);
-                isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
-                if (isMerge) {
-                    const mergeSize = dealMerge(range, mergeMap, table);
-                    cellWidth = mergeSize.cellWidth;
-                    cellHeight = mergeSize.cellHeight;
-                }
-            }
-            const cellStyle = customStyle || table._getCellStyle(col, row);
-            const cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
-            cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
-            cellTheme.group.width = colWidth;
-            cellTheme.group.height = Array.isArray(defaultRowHeight) ? defaultRowHeight[row] : defaultRowHeight;
-            if (cellTheme._vtable.padding) {
-                padding = cellTheme._vtable.padding;
-            }
-            if (cellTheme.text.textAlign) {
-                textAlign = cellTheme.text.textAlign;
-            }
-            if (cellTheme.text.textBaseline) {
-                textBaseline = cellTheme.text.textBaseline;
-            }
-            if (cellLocation !== 'body' && !cellTheme.group.fill) {
-                cellTheme.group.fill = '#fff';
-            }
-            const type = (table.isHeader(col, row) ? table._getHeaderLayoutMap(col, row).headerType : table.getBodyColumnType(col, row)) ||
-                'text';
-            if (isPromise(value)) {
-                dealPromiseData(value, table, createCell.bind(null, type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme));
-                columnGroup.updateColumnRowNumber(row);
-                const height = table.getRowHeight(row);
-                columnGroup.updateColumnHeight(height);
-                y += height;
-            }
-            else {
-                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme);
-                columnGroup.updateColumnRowNumber(row);
-                if (isMerge) {
                     const rangeHeight = table.getRowHeight(row);
                     const rangeWidth = table.getColWidth(col);
                     const { width: contentWidth } = cellGroup.attribute;
                     const { height: contentHeight } = cellGroup.attribute;
                     cellGroup.contentWidth = contentWidth;
                     cellGroup.contentHeight = contentHeight;
-                    resizeCellGroup(cellGroup, rangeWidth, rangeHeight, range, table);
-                    columnGroup.updateColumnHeight(rangeHeight);
-                    y += rangeHeight;
-                }
-                else {
-                    columnGroup.updateColumnHeight(cellGroup.attribute.height);
-                    y += cellGroup.attribute.height;
+                    resizeCellGroup(cellGroup, rangeWidth, rangeHeight, customMergeRange, table);
+                    return customResult;
                 }
             }
-            if (rowLimit && row > rowLimit) {
-                break;
-            }
-        }
-        columnGroup.setAttribute('width', colWidth);
-        return {
-            width: colWidth,
-            height: y
-        };
-    }
-    function resizeCellGroup(cellGroup, rangeWidth, rangeHeight, range, table) {
-        const { col, row } = cellGroup;
-        const dx = -table.getColsWidth(range.start.col, col - 1);
-        const dy = -table.getRowsHeight(range.start.row, row - 1);
-        cellGroup.forEachChildren((child) => {
-            child.setAttributes({
-                dx: (child.attribute.dx ?? 0) + dx,
-                dy: (child.attribute.dy ?? 0) + dy
-            });
-        });
-        const lineWidth = cellGroup.attribute.lineWidth;
-        const isLineWidthArray = isArray$1(lineWidth);
-        const newLineWidth = [0, 0, 0, 0];
-        if (col === range.start.col) {
-            newLineWidth[3] = isLineWidthArray ? lineWidth[3] : lineWidth;
-        }
-        if (row === range.start.row) {
-            newLineWidth[0] = isLineWidthArray ? lineWidth[0] : lineWidth;
-        }
-        if (col === range.end.col) {
-            newLineWidth[1] = isLineWidthArray ? lineWidth[1] : lineWidth;
-        }
-        if (row === range.end.row) {
-            newLineWidth[2] = isLineWidthArray ? lineWidth[2] : lineWidth;
-        }
-        const widthChange = rangeWidth !== cellGroup.attribute.width;
-        const heightChange = rangeHeight !== cellGroup.attribute.height;
-        cellGroup.setAttributes({
-            width: rangeWidth,
-            height: rangeHeight,
-            strokeArrayWidth: newLineWidth
-        });
-        cellGroup.mergeStartCol = range.start.col;
-        cellGroup.mergeStartRow = range.start.row;
-        cellGroup.mergeEndCol = range.end.col;
-        cellGroup.mergeEndRow = range.end.row;
-        return {
-            widthChange,
-            heightChange
-        };
-    }
-    function dealMerge(range, mergeMap, table) {
-        let cellWidth = 0;
-        let cellHeight = 0;
-        const mergeResult = mergeMap.get(`${range.start.col},${range.start.row};${range.end.col},${range.end.row}`);
-        if (!mergeResult) {
-            for (let col = range.start.col; col <= range.end.col; col++) {
-                cellWidth += table.getColWidth(col);
-            }
-            for (let i = range.start.row; i <= range.end.row; i++) {
-                cellHeight += table.getRowHeight(i);
-            }
-            mergeMap.set(`${range.start.col},${range.start.row};${range.end.col},${range.end.row}`, {
-                cellWidth,
-                cellHeight
-            });
-        }
-        else {
-            cellWidth = mergeResult.cellWidth;
-            cellHeight = mergeResult.cellHeight;
         }
-        return {
-            cellWidth,
-            cellHeight
-        };
+        return undefined;
     }
 
     function isMergeCellGroup(cellGroup) {
@@ -35684,7 +35781,7 @@
             else if (col === layout.rowHeaderLevelCount - 1 &&
                 row >= layout.columnHeaderLevelCount &&
                 row < layout.rowCount - layout.bottomFrozenRowCount) {
-                let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row)?.[0];
+                let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row);
                 if (isArray$1(rowDimensionKey)) {
                     rowDimensionKey = rowDimensionKey[0];
                 }
@@ -35813,7 +35910,7 @@
             else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
                 col >= layout.rowHeaderLevelCount &&
                 col < layout.colCount - layout.rightFrozenColCount) {
-                let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)?.[0];
+                let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount);
                 if (isArray$1(columnDimensionKey)) {
                     columnDimensionKey = columnDimensionKey[0];
                 }
@@ -36778,6 +36875,9 @@
         }
         for (let col = 0; col < scene.table.colCount; col++) {
             const cell = scene.getCell(col, row);
+            if (cell.role === 'empty') {
+                continue;
+            }
             const mergeInfo = getCellMergeInfo(scene.table, col, row);
             if (mergeInfo && mergeInfo.start.col !== col) {
                 continue;
@@ -36854,31 +36954,33 @@
                 let customElementsGroup;
                 customContainer.removeAllChild();
                 cell.removeChild(customContainer);
-                let customRender;
-                let customLayout;
-                const cellLocation = scene.table.getCellLocation(col, row);
-                if (cellLocation !== 'body') {
-                    const define = scene.table.getHeaderDefine(col, row);
-                    customRender = define?.headerCustomRender;
-                    customLayout = define?.headerCustomLayout;
-                }
-                else {
-                    const define = scene.table.getBodyColumnDefine(col, row);
-                    customRender = define?.customRender || scene.table.customRender;
-                    customLayout = define?.customLayout;
-                }
-                if (customLayout || customRender) {
-                    const style = scene.table._getCellStyle(col, row);
-                    const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
-                    const customResult = dealWithCustom(customLayout, customRender, col, row, cell.attribute.width, cell.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
-                    customElementsGroup = customResult.elementsGroup;
-                    renderDefault = customResult.renderDefault;
-                }
-                if (cell.childrenCount > 0) {
-                    cell.insertBefore(customElementsGroup, cell.firstChild);
-                }
-                else {
-                    cell.appendChild(customElementsGroup);
+                if (!getCustomCellMergeCustom(col, row, cell, scene.table)) {
+                    let customRender;
+                    let customLayout;
+                    const cellLocation = scene.table.getCellLocation(col, row);
+                    if (cellLocation !== 'body') {
+                        const define = scene.table.getHeaderDefine(col, row);
+                        customRender = define?.headerCustomRender;
+                        customLayout = define?.headerCustomLayout;
+                    }
+                    else {
+                        const define = scene.table.getBodyColumnDefine(col, row);
+                        customRender = define?.customRender || scene.table.customRender;
+                        customLayout = define?.customLayout;
+                    }
+                    if (customLayout || customRender) {
+                        const style = scene.table._getCellStyle(col, row);
+                        const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
+                        const customResult = dealWithCustom(customLayout, customRender, col, row, cell.attribute.width, cell.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
+                        customElementsGroup = customResult.elementsGroup;
+                        renderDefault = customResult.renderDefault;
+                    }
+                    if (cell.childrenCount > 0 && customElementsGroup) {
+                        cell.insertBefore(customElementsGroup, cell.firstChild);
+                    }
+                    else if (customElementsGroup) {
+                        cell.appendChild(customElementsGroup);
+                    }
                 }
             }
             if (renderDefault) {
@@ -37068,6 +37170,30 @@
                 newTotalHeight = y;
             }
             scene.updateContainerHeight(row, newTotalHeight - oldContainerHeight);
+            for (let col = 0; col < scene.table.frozenColCount; col++) {
+                const leftBottomFrozenColumnGroup = scene.getColGroupInLeftBottomCorner(col);
+                let y = 0;
+                leftBottomFrozenColumnGroup.forEachChildren((cellGroup) => {
+                    cellGroup.setAttribute('y', y);
+                    y += scene.table.getRowHeight(cellGroup.row);
+                });
+            }
+            for (let col = scene.table.colCount - scene.table.rightFrozenColCount; col < scene.table.colCount; col++) {
+                const rightBottomFrozenColumnGroup = scene.getColGroupInRightBottomCorner(col);
+                let y = 0;
+                rightBottomFrozenColumnGroup.forEachChildren((cellGroup) => {
+                    cellGroup.setAttribute('y', y);
+                    y += scene.table.getRowHeight(cellGroup.row);
+                });
+            }
+            for (let col = scene.table.frozenColCount; col < scene.table.colCount - scene.table.rightFrozenColCount; col++) {
+                const rightBottomFrozenColumnGroup = scene.getColGroupInBottom(col);
+                let y = 0;
+                rightBottomFrozenColumnGroup.forEachChildren((cellGroup) => {
+                    cellGroup.setAttribute('y', y);
+                    y += scene.table.getRowHeight(cellGroup.row);
+                });
+            }
         }
     }
     function updateCellWidth(scene, cell, col, row, oldWidth, distWidth, detaX, isHeader, autoRowHeight) {
@@ -37127,32 +37253,34 @@
                 let customElementsGroup;
                 customContainer.removeAllChild();
                 cell.removeChild(customContainer);
-                let customRender;
-                let customLayout;
-                const cellType = scene.table.getCellLocation(col, row);
-                if (cellType !== 'body') {
-                    const define = scene.table.getHeaderDefine(col, row);
-                    customRender = define?.headerCustomRender;
-                    customLayout = define?.headerCustomLayout;
-                }
-                else {
-                    const define = scene.table.getBodyColumnDefine(col, row);
-                    customRender = define?.customRender || scene.table.customRender;
-                    customLayout = define?.customLayout;
-                }
-                if (customLayout || customRender) {
-                    const style = scene.table._getCellStyle(col, row);
-                    const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
-                    const customResult = dealWithCustom(customLayout, customRender, col, row, cellGroup.attribute.width, cellGroup.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
-                    customElementsGroup = customResult.elementsGroup;
-                    renderDefault = customResult.renderDefault;
-                    isHeightChange = true;
-                }
-                if (cell.childrenCount > 0) {
-                    cell.insertBefore(customElementsGroup, cell.firstChild);
-                }
-                else {
-                    cell.appendChild(customElementsGroup);
+                if (!getCustomCellMergeCustom(col, row, cell, scene.table)) {
+                    let customRender;
+                    let customLayout;
+                    const cellType = scene.table.getCellLocation(col, row);
+                    if (cellType !== 'body') {
+                        const define = scene.table.getHeaderDefine(col, row);
+                        customRender = define?.headerCustomRender;
+                        customLayout = define?.headerCustomLayout;
+                    }
+                    else {
+                        const define = scene.table.getBodyColumnDefine(col, row);
+                        customRender = define?.customRender || scene.table.customRender;
+                        customLayout = define?.customLayout;
+                    }
+                    if (customLayout || customRender) {
+                        const style = scene.table._getCellStyle(col, row);
+                        const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
+                        const customResult = dealWithCustom(customLayout, customRender, col, row, cellGroup.attribute.width, cellGroup.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
+                        customElementsGroup = customResult.elementsGroup;
+                        renderDefault = customResult.renderDefault;
+                        isHeightChange = true;
+                    }
+                    if (cell.childrenCount > 0 && customElementsGroup) {
+                        cell.insertBefore(customElementsGroup, cell.firstChild);
+                    }
+                    else if (customElementsGroup) {
+                        cell.appendChild(customElementsGroup);
+                    }
                 }
             }
             if (renderDefault) {
@@ -37505,7 +37633,7 @@
         }
     };
 
-    const regedIcons = get$2();
+    const regedIcons = get$1();
     class DrillIcon {
         icon;
         constructor() {
@@ -38348,7 +38476,7 @@
         if (viewBox.y2 <= viewBox.y1) {
             viewBox.y2 = viewBox.y1 + 1;
         }
-        axes.forEach((axis, index) => {
+        axes?.forEach((axis, index) => {
             if (axis.type === 'band') {
                 chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
             }
@@ -40273,23 +40401,40 @@
     }
 
     async function sortVertical(proxy) {
-        for (let col = 0; col < proxy.table.frozenColCount; col++) {
-            const colGroup = proxy.table.scenegraph.getColGroup(col);
-            colGroup?.forEachChildren((cellGroup, index) => {
-                cellGroup.needUpdate = true;
-            });
+        proxy.table.scenegraph.bodyGroup.forEachChildren((colGroup, index) => {
+            if (colGroup.type === 'group') {
+                colGroup.needUpdate = true;
+                colGroup?.forEachChildren((cellGroup) => {
+                    cellGroup.needUpdate = true;
+                });
+            }
+        });
+        for (let col = 0; col < proxy.table.frozenColCount ?? 0; col++) {
+            const columnGroup = proxy.table.scenegraph.getColGroup(col);
+            columnGroup?.setAttribute('chartInstance', undefined);
+            for (let row = proxy.rowStart; row <= proxy.rowEnd; row++) {
+                proxy.table.scenegraph.updateCellContent(col, row);
+            }
+            for (let row = proxy.table.rowCount - proxy.table.bottomFrozenRowCount; row < proxy.table.rowCount; row++) {
+                proxy.table.scenegraph.updateCellContent(col, row);
+            }
         }
-        for (let col = proxy.table.colCount - proxy.table.rightFrozenColCount; col < proxy.table.colCount; col++) {
-            const colGroup = proxy.table.scenegraph.getColGroup(col);
-            colGroup?.forEachChildren((cellGroup, index) => {
-                cellGroup.needUpdate = true;
-            });
+        for (let col = proxy.colStart; col <= proxy.colEnd; col++) {
+            const columnGroup = proxy.table.scenegraph.getColGroup(col);
+            columnGroup?.setAttribute('chartInstance', undefined);
+            for (let row = proxy.table.rowCount - proxy.table.bottomFrozenRowCount; row < proxy.table.rowCount; row++) {
+                proxy.table.scenegraph.updateCellContent(col, row);
+            }
         }
-        for (let col = proxy.bodyLeftCol; col <= proxy.bodyRightCol; col++) {
-            const colGroup = proxy.table.scenegraph.getColGroup(col);
-            colGroup?.forEachChildren((cellGroup, index) => {
-                cellGroup.needUpdate = true;
-            });
+        for (let col = proxy.table.colCount - proxy.table.rightFrozenColCount; col < proxy.table.colCount; col++) {
+            const columnGroup = proxy.table.scenegraph.getColGroup(col);
+            columnGroup?.setAttribute('chartInstance', undefined);
+            for (let row = proxy.rowStart; row <= proxy.rowEnd; row++) {
+                proxy.table.scenegraph.updateCellContent(col, row);
+            }
+            for (let row = proxy.table.rowCount - proxy.table.bottomFrozenRowCount; row < proxy.table.rowCount; row++) {
+                proxy.table.scenegraph.updateCellContent(col, row);
+            }
         }
         let syncTopRow;
         let syncBottomRow;
@@ -40315,14 +40460,6 @@
     }
 
     async function sortHorizontal(proxy) {
-        proxy.table.scenegraph.bottomFrozenGroup.forEachChildren((colGroup, index) => {
-            if (colGroup.type === 'group') {
-                colGroup.needUpdate = true;
-                colGroup?.forEachChildren((cellGroup) => {
-                    cellGroup.needUpdate = true;
-                });
-            }
-        });
         proxy.table.scenegraph.bodyGroup.forEachChildren((colGroup, index) => {
             if (colGroup.type === 'group') {
                 colGroup.needUpdate = true;
@@ -40331,6 +40468,23 @@
                 });
             }
         });
+        for (let col = proxy.colStart; col <= proxy.colEnd; col++) {
+            const columnGroup = proxy.table.scenegraph.getColGroup(col);
+            columnGroup?.setAttribute('chartInstance', undefined);
+            for (let row = proxy.table.rowCount - proxy.table.bottomFrozenRowCount; row < proxy.table.rowCount; row++) {
+                proxy.table.scenegraph.updateCellContent(col, row);
+            }
+        }
+        for (let col = proxy.table.colCount - proxy.table.rightFrozenColCount; col < proxy.table.colCount; col++) {
+            const columnGroup = proxy.table.scenegraph.getColGroup(col);
+            columnGroup?.setAttribute('chartInstance', undefined);
+            for (let row = proxy.rowStart; row <= proxy.rowEnd; row++) {
+                proxy.table.scenegraph.updateCellContent(col, row);
+            }
+            for (let row = proxy.table.rowCount - proxy.table.bottomFrozenRowCount; row < proxy.table.rowCount; row++) {
+                proxy.table.scenegraph.updateCellContent(col, row);
+            }
+        }
         const syncLeftCol = Math.max(proxy.bodyLeftCol, proxy.screenLeftCol - proxy.screenColCount * 1);
         const syncRightCol = Math.min(proxy.bodyRightCol, proxy.screenLeftCol + proxy.screenColCount * 2);
         computeColsWidth(proxy.table, syncLeftCol, syncRightCol);
@@ -40749,7 +40903,7 @@
         return getCellByCache(cacheCellGroup._next, row);
     }
 
-    function moveHeaderPosition(colSource, rowSource, colTarget, rowTarget, table) {
+    function moveHeaderPosition(colSource, rowSource, colTarget, rowTarget, sourceMergeInfo, targetMergeInfo, table) {
         const scene = table.scenegraph;
         const cellLocation = table.getCellLocation(colTarget, rowTarget);
         const direction = cellLocation === 'columnHeader' ? 'column' : cellLocation === 'rowHeader' ? 'row' : undefined;
@@ -40762,8 +40916,6 @@
         let targetColEnd = 0;
         let targetRowEnd = 0;
         if (direction === 'column') {
-            const sourceMergeInfo = getCellMergeInfo(table, colSource, rowSource);
-            const targetMergeInfo = getCellMergeInfo(table, colTarget, rowTarget);
             if (sourceMergeInfo && targetMergeInfo) {
                 sourceColStart = sourceMergeInfo.start.col;
                 sourceColEnd = sourceMergeInfo.end.col;
@@ -40784,8 +40936,6 @@
             targetRowEnd = table.rowCount - 1;
         }
         else if (direction === 'row') {
-            const sourceMergeInfo = getCellMergeInfo(table, colSource, rowSource);
-            const targetMergeInfo = getCellMergeInfo(table, colTarget, rowTarget);
             if (sourceMergeInfo && targetMergeInfo) {
                 sourceRowStart = sourceMergeInfo.start.row;
                 sourceRowEnd = sourceMergeInfo.end.row;
@@ -43761,16 +43911,20 @@
             }
         }
         updateRowHeight(row, detaY, skipTableHeightMap) {
-            detaY = Math.round(detaY);
-            updateRowHeight(this, row, detaY, skipTableHeightMap);
-            this.updateContainerHeight(row, detaY);
+            if (row >= this.proxy.rowStart && row <= this.proxy.rowEnd) {
+                detaY = Math.round(detaY);
+                updateRowHeight(this, row, detaY, skipTableHeightMap);
+                this.updateContainerHeight(row, detaY);
+            }
         }
         updateRowsHeight(rows, detaYs, skipTableHeightMap) {
             for (let i = 0; i < rows.length; i++) {
                 const row = rows[i];
-                const detaY = detaYs[i];
-                updateRowHeight(this, row, Math.round(detaY), skipTableHeightMap);
-                this._updateContainerHeight(row, detaY);
+                if (row >= this.proxy.rowStart && row <= this.proxy.rowEnd) {
+                    const detaY = detaYs[i];
+                    updateRowHeight(this, row, Math.round(detaY), skipTableHeightMap);
+                    this._updateContainerHeight(row, detaY);
+                }
             }
             this.updateTableSize();
             this.component.updateScrollBar();
@@ -44039,8 +44193,8 @@
             });
             return isUpdate;
         }
-        updateHeaderPosition(colSource, rowSource, colTarget, rowTarget) {
-            moveHeaderPosition(colSource, rowSource, colTarget, rowTarget, this.table);
+        updateHeaderPosition(colSource, rowSource, colTarget, rowTarget, sourceMergeInfo, targetMergeInfo) {
+            moveHeaderPosition(colSource, rowSource, colTarget, rowTarget, sourceMergeInfo, targetMergeInfo, this.table);
         }
         updateContainerAttrWidthAndX() {
             const cornerX = updateContainerChildrenX(this.cornerHeaderGroup, 0);
@@ -44927,11 +45081,13 @@
             state.columnMove.rowSource >= 0 &&
             state.columnMove.colTarget >= 0 &&
             state.columnMove.rowTarget >= 0) {
+            const sourceMergeInfo = getCellMergeInfo(state.table, state.columnMove.colSource, state.columnMove.rowSource);
+            const targetMergeInfo = getCellMergeInfo(state.table, state.columnMove.colTarget, state.columnMove.rowTarget);
             const moveSuccess = state.table.moveHeaderPosition({ col: state.columnMove.colSource, row: state.columnMove.rowSource }, { col: state.columnMove.colTarget, row: state.columnMove.rowTarget });
             if (moveSuccess) {
                 clearWidthsAndHeightsCache(state.columnMove.colSource, state.columnMove.rowSource, state.columnMove.colTarget, state.columnMove.rowTarget, state.table);
                 state.table.clearCellStyleCache();
-                state.table.scenegraph.updateHeaderPosition(state.columnMove.colSource, state.columnMove.rowSource, state.columnMove.colTarget, state.columnMove.rowTarget);
+                state.table.scenegraph.updateHeaderPosition(state.columnMove.colSource, state.columnMove.rowSource, state.columnMove.colTarget, state.columnMove.rowTarget, sourceMergeInfo, targetMergeInfo);
             }
             state.updateCursor();
         }
@@ -45583,7 +45739,7 @@
             const totalHeight = this.table.getAllRowsHeight();
             top = Math.max(0, Math.min(top, totalHeight - this.table.scenegraph.height));
             top = Math.ceil(top);
-            if (top !== this.scroll.verticalBarPos) {
+            if (top !== this.scroll.verticalBarPos || this.table.isPivotChart()) {
                 this.table.stateManager.updateHoverPos(-1, -1);
             }
             this.scroll.verticalBarPos = top;
@@ -47268,11 +47424,11 @@
                 let dimensionKey;
                 let dimensions;
                 if (layout.indicatorsAsCol) {
-                    dimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row)[0];
+                    dimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row);
                     dimensions = layout.getCellHeaderPaths(layout.rowHeaderLevelCount - 2, row).rowHeaderPaths;
                 }
                 else {
-                    dimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)[0];
+                    dimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount);
                     dimensions = layout.getCellHeaderPaths(col, layout.columnHeaderLevelCount - 1).colHeaderPaths;
                 }
                 const filter = dimensions
@@ -47821,7 +47977,7 @@
         _table;
         constructor(_table) {
             this._table = _table;
-            const regedIcons = get$2();
+            const regedIcons = get$1();
             this.expandIcon = regedIcons[InternalIconName.expandIconName];
             this.collapseIcon = regedIcons[InternalIconName.collapseIconName];
         }
@@ -47843,7 +47999,7 @@
                 else {
                     iconResults = iconDefine;
                 }
-                const regedIcons = get$2();
+                const regedIcons = get$1();
                 const addIcon = (columnIcon) => {
                     let icon;
                     if (typeof columnIcon === 'string') {
@@ -48588,7 +48744,7 @@
         _table;
         constructor(_table) {
             this._table = _table;
-            const regedIcons = get$2();
+            const regedIcons = get$1();
             this.freezeIcon = regedIcons[InternalIconName.freezeIconName];
             this.frozenIcon = regedIcons[InternalIconName.frozenIconName];
             this.frozenCurrentIcon = regedIcons[InternalIconName.frozenCurrentIconName];
@@ -48673,7 +48829,7 @@
                 else {
                     headerIconStrs = headerIcon;
                 }
-                const regedIcons = get$2();
+                const regedIcons = get$1();
                 const addIcon = (headerIcon) => {
                     let icon;
                     if (typeof headerIcon === 'string') {
@@ -50467,7 +50623,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.18.0-alpha.2";
+        version = "0.18.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51997,7 +52153,7 @@
         getCustomMerge(col, row) {
             if (this.internalProps.customMergeCell) {
                 const customMerge = this.internalProps.customMergeCell(col, row, this);
-                if (customMerge && customMerge.range && customMerge.text) {
+                if (customMerge && customMerge.range && (customMerge.text || customMerge.customLayout || this.customRender)) {
                     if (customMerge.style) {
                         const styleClass = this.internalProps.bodyHelper.getStyleClass('text');
                         const style = customMerge.style;
@@ -52126,12 +52282,16 @@
                 }
                 const hd = layoutMap.getHeader(col, row);
                 let paddingForAxis;
-                if (this.isPivotChart() && isTopOrBottomAxis(col, row, layoutMap)) {
+                if (this.isPivotChart() &&
+                    isTopOrBottomAxis(col, row, layoutMap) &&
+                    layoutMap.isAxisCell(col, row)) {
                     const chartColumn = layoutMap.getBody(col, this.rowHeaderLevelCount);
                     const padding = chartColumn.style?.padding ?? this.theme.bodyStyle.padding;
                     paddingForAxis = padding;
                 }
-                else if (this.isPivotChart() && isLeftOrRightAxis(col, row, layoutMap)) {
+                else if (this.isPivotChart() &&
+                    isLeftOrRightAxis(col, row, layoutMap) &&
+                    layoutMap.isAxisCell(col, row)) {
                     const chartColumn = layoutMap.getBody(this.columnHeaderLevelCount, row);
                     const padding = chartColumn.style?.padding ?? this.theme.bodyStyle.padding;
                     paddingForAxis = padding;
@@ -52937,6 +53097,62 @@
         const chartSpec = indicatorObj?.chartSpec;
         return chartSpec;
     }
+    function checkHasCartesianChart(layout) {
+        let isHasCartesianChart = false;
+        for (let i = 0; i < layout.indicatorsDefine.length; i++) {
+            const columnObj = layout.indicatorsDefine[i];
+            if (columnObj.chartSpec) {
+                if (columnObj.chartSpec.type !== 'pie' &&
+                    columnObj.chartSpec.type !== 'funnel' &&
+                    columnObj.chartSpec.type !== 'rose') {
+                    isHasCartesianChart = true;
+                    break;
+                }
+            }
+        }
+        return isHasCartesianChart;
+    }
+    function isCartesianChart(col, row, layout) {
+        let isHasCartesianChart = true;
+        const chartSpec = layout.getRawChartSpec(col, row);
+        if (chartSpec) {
+            if (chartSpec.type === 'pie' || chartSpec.type === 'funnel' || chartSpec.type === 'rose') {
+                isHasCartesianChart = false;
+            }
+        }
+        else {
+            isHasCartesianChart = false;
+        }
+        return isHasCartesianChart;
+    }
+    function isHasCartesianChartInline(col, row, checkDirection, layout) {
+        let isHasCartesianChart = false;
+        if ((layout.indicatorsAsCol && checkDirection === 'row') || (!layout.indicatorsAsCol && checkDirection === 'col')) {
+            for (let i = 0; i < layout.indicatorsDefine.length; i++) {
+                const columnObj = layout.indicatorsDefine[i];
+                if (columnObj.chartSpec) {
+                    if (columnObj.chartSpec.type !== 'pie' &&
+                        columnObj.chartSpec.type !== 'funnel' &&
+                        columnObj.chartSpec.type !== 'rose') {
+                        isHasCartesianChart = true;
+                        break;
+                    }
+                }
+            }
+        }
+        else {
+            const chartSpec = layout.getRawChartSpec(col, row);
+            if (chartSpec) {
+                if (chartSpec.type !== 'pie' && chartSpec.type !== 'funnel' && chartSpec.type !== 'rose') {
+                    isHasCartesianChart = true;
+                }
+            }
+            else {
+                isHasCartesianChart = false;
+            }
+        }
+        return isHasCartesianChart;
+    }
     function getChartSpec(col, row, layout) {
         let chartSpec = layout.getRawChartSpec(col, row);
         if (chartSpec) {
@@ -52990,7 +53206,7 @@
                     sync: { axisId: NO_AXISID_FRO_VTABLE }
                 }));
             });
-            let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row)?.[0];
+            let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row);
             if (isArray$1(rowDimensionKey)) {
                 rowDimensionKey = rowDimensionKey[0];
             }
@@ -53046,7 +53262,7 @@
                     sync: { axisId: NO_AXISID_FRO_VTABLE }
                 }));
             });
-            let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)[0];
+            let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount);
             if (isArray$1(columnDimensionKey)) {
                 columnDimensionKey = columnDimensionKey[0];
             }
@@ -54964,6 +55180,11 @@
                 this.dataSource.addRecord(record, recordIndex);
                 const oldRowCount = this.rowCount;
                 this.refreshRowColCount();
+                if (this.scenegraph.proxy.totalActualBodyRowCount === 0) {
+                    this.scenegraph.clearCells();
+                    this.scenegraph.createSceneGraph();
+                    return;
+                }
                 const newRowCount = this.transpose ? this.colCount : this.rowCount;
                 if (this.pagination) {
                     const { perPageCount, currentPage } = this.pagination;
@@ -55038,6 +55259,11 @@
                 this.dataSource.addRecords(records, recordIndex);
                 const oldRowCount = this.transpose ? this.colCount : this.rowCount;
                 this.refreshRowColCount();
+                if (this.scenegraph.proxy.totalActualBodyRowCount === 0) {
+                    this.scenegraph.clearCells();
+                    this.scenegraph.createSceneGraph();
+                    return;
+                }
                 const newRowCount = this.transpose ? this.colCount : this.rowCount;
                 if (this.pagination) {
                     const { perPageCount, currentPage } = this.pagination;
@@ -55168,6 +55394,70 @@
                 }
             }
         }
+        updateRecords(records, recordIndexs) {
+            if (recordIndexs?.length > 0) {
+                if (this.sortState) {
+                    this.dataSource.updateRecordsForSorted(records, recordIndexs);
+                    sortRecords(this);
+                    this.refreshRowColCount();
+                    this.scenegraph.clearCells();
+                    this.scenegraph.createSceneGraph();
+                }
+                else {
+                    const updateRecordIndexs = this.dataSource.updateRecords(records, recordIndexs);
+                    if (updateRecordIndexs.length === 0) {
+                        return;
+                    }
+                    const recordIndexsMinToMax = updateRecordIndexs.sort((a, b) => a - b);
+                    if (this.pagination) {
+                        const { perPageCount, currentPage } = this.pagination;
+                        const startIndex = perPageCount * (currentPage || 0);
+                        const endIndex = startIndex + perPageCount;
+                        const updateRows = [];
+                        for (let index = 0; index < recordIndexsMinToMax.length; index++) {
+                            const recordIndex = recordIndexsMinToMax[index];
+                            if (recordIndex < endIndex && recordIndex >= endIndex - perPageCount) {
+                                const rowNum = recordIndex -
+                                    (endIndex - perPageCount) +
+                                    (this.transpose ? this.rowHeaderLevelCount : this.columnHeaderLevelCount);
+                                updateRows.push(rowNum);
+                            }
+                        }
+                        if (updateRows.length >= 1) {
+                            const updateRowCells = [];
+                            for (let index = 0; index < updateRows.length; index++) {
+                                const updateRow = updateRows[index];
+                                if (this.transpose) {
+                                    updateRowCells.push({ col: updateRow, row: 0 });
+                                }
+                                else {
+                                    updateRowCells.push({ col: 0, row: updateRow });
+                                }
+                            }
+                            this.transpose
+                                ? this.scenegraph.updateCol([], [], updateRowCells)
+                                : this.scenegraph.updateRow([], [], updateRowCells);
+                        }
+                    }
+                    else {
+                        const updateRows = [];
+                        for (let index = 0; index < recordIndexsMinToMax.length; index++) {
+                            const recordIndex = recordIndexsMinToMax[index];
+                            const rowNum = recordIndex + (this.transpose ? this.rowHeaderLevelCount : this.columnHeaderLevelCount);
+                            if (this.transpose) {
+                                updateRows.push({ col: rowNum, row: 0 });
+                            }
+                            else {
+                                updateRows.push({ col: 0, row: rowNum });
+                            }
+                        }
+                        this.transpose
+                            ? this.scenegraph.updateCol([], [], updateRows)
+                            : this.scenegraph.updateRow([], [], updateRows);
+                    }
+                }
+            }
+        }
         hasCustomRenderOrLayout() {
             const { headerObjects } = this.internalProps.layoutMap;
             if (this.options.customRender) {
@@ -55667,7 +55957,7 @@
             if (dataset) {
                 this.rowTree = dataset.rowHeaderTree;
                 this.columnTree = dataset.colHeaderTree;
-                if (this.indicatorsAsCol && this._table.isPivotChart()) {
+                if (this.indicatorsAsCol && this._table.isPivotChart() && checkHasCartesianChart(this)) {
                     const supplyAxisNode = (nodes) => {
                         nodes.forEach((node) => {
                             if (node.children?.length) {
@@ -55847,7 +56137,7 @@
                     if (indicatorObject?.style?.padding) {
                         this._chartPadding = indicatorObject.style.padding;
                     }
-                    if (indicatorObject.chartSpec?.barWidth) {
+                    if (indicatorObject.chartSpec?.barWidth && typeof indicatorObject.chartSpec.barWidth === 'number') {
                         this._chartItemSpanSize = indicatorObject.chartSpec?.barWidth;
                     }
                     const bandAxisConfig = indicatorObject.chartSpec?.axes?.find((axis) => {
@@ -55864,7 +56154,7 @@
                         return true;
                     }
                     indicatorObject.chartSpec.series?.find((seriesObject) => {
-                        if (seriesObject.barWidth) {
+                        if (seriesObject.barWidth && typeof seriesObject.barWidth === 'number') {
                             this._chartItemSpanSize = seriesObject.barWidth;
                         }
                         if (this._chartItemSpanSize > 0) {
@@ -56199,6 +56489,9 @@
             }
             return false;
         }
+        isFrozen(col, row) {
+            return (this.isFrozenColumn(col) || this.isRightFrozenColumn(col) || this.isBottomFrozenRow(row) || this.isFrozenRow(row));
+        }
         isFrozenColumn(col, row) {
             if (isValid$1(row)) {
                 if (col >= 0 &&
@@ -56347,7 +56640,10 @@
                 if (this.columnHeaderTitle) {
                     count += 1;
                 }
-                if (this._table.isPivotChart() && this.indicatorsAsCol && !this.hasTwoIndicatorAxes) {
+                if (this._table.isPivotChart() &&
+                    this.indicatorsAsCol &&
+                    !this.hasTwoIndicatorAxes &&
+                    checkHasCartesianChart(this)) {
                     count -= 1;
                 }
                 this.columnHeaderLevelCount = count;
@@ -56420,7 +56716,7 @@
                 }
                 return 0;
             }
-            if (this.indicatorKeys.length >= 1) {
+            if (this.indicatorKeys.length >= 1 && checkHasCartesianChart(this)) {
                 const axisOption = this._table.pivotChartAxes.find(axisOption => {
                     return axisOption.orient === 'bottom';
                 });
@@ -57269,7 +57565,13 @@
             }
         }
         getAxisConfigInPivotChart(col, row) {
-            return getAxisConfigInPivotChart(col, row, this);
+            if (((this.isFrozenColumn(col, row) || this.isRightFrozenColumn(col, row)) &&
+                isHasCartesianChartInline(col, row, 'row', this)) ||
+                ((this.isFrozenRow(col, row) || this.isBottomFrozenRow(col, row)) &&
+                    isHasCartesianChartInline(col, row, 'col', this))) {
+                return getAxisConfigInPivotChart(col, row, this);
+            }
+            return undefined;
         }
         isEmpty(col, row) {
             if (!this._table.isPivotChart()) {
@@ -57290,21 +57592,30 @@
             if (!this._table.isPivotChart()) {
                 return false;
             }
-            if (this.indicatorKeys.length >= 1) {
-                if (this.isBottomFrozenRow(col, row) || this.isRightFrozenColumn(col, row)) {
+            if (this.indicatorKeys.length >= 1 && checkHasCartesianChart(this)) {
+                if ((this.isBottomFrozenRow(col, row) && isHasCartesianChartInline(col, row, 'col', this)) ||
+                    (this.isRightFrozenColumn(col, row) && isHasCartesianChartInline(col, row, 'row', this))) {
                     return true;
                 }
-                if (this.isRowHeader(col, row) && col === this.rowHeaderLevelCount - 1) {
+                if (this.isRowHeader(col, row) &&
+                    col === this.rowHeaderLevelCount - 1 &&
+                    isHasCartesianChartInline(col, row, 'row', this)) {
                     return true;
                 }
-                if (this.hasTwoIndicatorAxes && this.indicatorsAsCol && row === this.columnHeaderLevelCount - 1) {
+                if (this.hasTwoIndicatorAxes &&
+                    this.indicatorsAsCol &&
+                    row === this.columnHeaderLevelCount - 1 &&
+                    isHasCartesianChartInline(col, row, 'col', this)) {
                     return true;
                 }
             }
             return false;
         }
         getChartAxes(col, row) {
-            return getChartAxes(col, row, this);
+            if (isCartesianChart(col, row, this) || this.isAxisCell(col, row)) {
+                return getChartAxes(col, row, this);
+            }
+            return undefined;
         }
         getRawChartSpec(col, row) {
             return getRawChartSpec(col, row, this);
@@ -57394,16 +57705,28 @@
             this._CellHeaderPathMap = new Map();
         }
         getDimensionKeyInChartSpec(_col, _row) {
-            const chartSpec = this.getRawChartSpec(_col, _row);
-            const dimensionKeys = [];
-            if (chartSpec) {
-                if (this.indicatorsAsCol === false) {
-                    dimensionKeys.push(chartSpec.xField ?? chartSpec?.series[0]?.xField);
+            let dimensionKey;
+            if (this.indicatorsAsCol === false) {
+                for (let i = 0; i < this.indicatorsDefine.length; i++) {
+                    const chartSpec = this.indicatorsDefine[i].chartSpec;
+                    if (chartSpec) {
+                        dimensionKey = chartSpec.xField ?? chartSpec?.series?.[0]?.xField;
+                        if (dimensionKey) {
+                            return dimensionKey;
+                        }
+                    }
                 }
-                else {
-                    dimensionKeys.push(chartSpec.yField ?? chartSpec?.series[0]?.yField);
+            }
+            else {
+                for (let i = 0; i < this.indicatorsDefine.length; i++) {
+                    const chartSpec = this.indicatorsDefine[i].chartSpec;
+                    if (chartSpec) {
+                        dimensionKey = chartSpec.yField ?? chartSpec?.series?.[0]?.yField;
+                        if (dimensionKey) {
+                            return dimensionKey;
+                        }
+                    }
                 }
-                return dimensionKeys;
             }
             return null;
         }
@@ -57487,29 +57810,37 @@
             const chartSpec = this.getRawChartSpec(_col, _row);
             const indicatorKeys = [];
             if (chartSpec) {
-                if (this.indicatorsAsCol === false) {
-                    if (chartSpec.series) {
-                        chartSpec.series.forEach((chartSeries) => {
-                            const yField = chartSeries.yField;
-                            indicatorKeys.push(yField);
-                        });
+                if (chartSpec.series || chartSpec.xField || chartSpec.yField) {
+                    if (this.indicatorsAsCol === false) {
+                        if (chartSpec.series) {
+                            chartSpec.series.forEach((chartSeries) => {
+                                const yField = chartSeries.yField;
+                                indicatorKeys.push(yField);
+                            });
+                        }
+                        else {
+                            indicatorKeys.push(chartSpec.yField);
+                        }
                     }
                     else {
-                        indicatorKeys.push(chartSpec.yField);
+                        if (chartSpec.series) {
+                            chartSpec.series.forEach((chartSeries) => {
+                                const xField = chartSeries.xField;
+                                indicatorKeys.push(xField);
+                            });
+                        }
+                        else {
+                            indicatorKeys.push(chartSpec.xField);
+                        }
                     }
+                    return indicatorKeys;
                 }
-                else {
-                    if (chartSpec.series) {
-                        chartSpec.series.forEach((chartSeries) => {
-                            const xField = chartSeries.xField;
-                            indicatorKeys.push(xField);
-                        });
-                    }
-                    else {
-                        indicatorKeys.push(chartSpec.xField);
-                    }
+                else if (chartSpec.valueField) {
+                    indicatorKeys.push(chartSpec.valueField);
+                }
+                if (indicatorKeys.length >= 1) {
+                    return indicatorKeys;
                 }
-                return indicatorKeys;
             }
             return null;
         }
@@ -60392,6 +60723,18 @@
                 return customMergeText;
             }
             if (this.internalProps.layoutMap.isHeader(col, row)) {
+                if (this.internalProps.layoutMap.isBottomFrozenRow(col, row) ||
+                    this.internalProps.layoutMap.isRightFrozenColumn(col, row)) {
+                    const indicatorKeys = this.internalProps.layoutMap.getIndicatorKeyInChartSpec(col, row);
+                    let indicatorInfo;
+                    indicatorKeys?.forEach(key => {
+                        const info = this.internalProps.layoutMap.getIndicatorInfo(key);
+                        if (info) {
+                            indicatorInfo = info;
+                        }
+                    });
+                    return indicatorInfo?.title ?? indicatorInfo?.indicatorKey ?? '';
+                }
                 const { title, fieldFormat } = this.internalProps.layoutMap.getHeader(col, row);
                 return typeof fieldFormat === 'function' ? fieldFormat(title, col, row, this) : title;
             }
@@ -60419,6 +60762,18 @@
         getCellOriginValue(col, row) {
             const table = this;
             if (table.internalProps.layoutMap.isHeader(col, row)) {
+                if (this.internalProps.layoutMap.isBottomFrozenRow(col, row) ||
+                    this.internalProps.layoutMap.isRightFrozenColumn(col, row)) {
+                    const indicatorKeys = this.internalProps.layoutMap.getIndicatorKeyInChartSpec(col, row);
+                    let indicatorInfo;
+                    indicatorKeys?.forEach(key => {
+                        const info = this.internalProps.layoutMap.getIndicatorInfo(key);
+                        if (info) {
+                            indicatorInfo = info;
+                        }
+                    });
+                    return indicatorInfo?.title ?? indicatorInfo?.indicatorKey ?? '';
+                }
                 const { title } = table.internalProps.layoutMap.getHeader(col, row);
                 return typeof title === 'function' ? title() : title;
             }
@@ -60590,6 +60945,9 @@
             const collectValuesBy = {};
             for (let i = 0, len = indicators?.length; i < len; i++) {
                 if (typeof indicators[i] !== 'string' && indicators[i].chartSpec) {
+                    if (indicators[i].chartSpec?.type === 'pie') {
+                        continue;
+                    }
                     if (this.options.indicatorsAsCol === false) {
                         const indicatorDefine = indicators[i];
                         indicatorDefine.chartSpec?.stack !== false &&
@@ -60889,7 +61247,7 @@
                     chartInstance = chartNode.attribute.chartInstance;
                     const { dataId, data, axes, spec } = chartNode.attribute;
                     const viewBox = chartNode.getViewBox();
-                    axes.forEach((axis, index) => {
+                    axes?.forEach((axis, index) => {
                         if (axis.type === 'linear') {
                             chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
                         }
@@ -61086,7 +61444,7 @@
         constructor(options) {
             let cache;
             if (isString$2(options.iconName)) {
-                const regedIcons = get$2();
+                const regedIcons = get$1();
                 cache = regedIcons[options.iconName];
                 if (cache) {
                     options.width = options.width ?? cache.width;
@@ -61511,9 +61869,9 @@
     }
 
     registerForVrender();
-    const version = "0.18.0-alpha.2";
+    const version = "0.18.0";
     function getIcons() {
-        return get$2();
+        return get$1();
     }
     function clearGlobal() {
         clearAll();