@visactor/vtable 0.17.10-alpha.5 → 0.17.10-alpha.7

package/dist/vtable.js

@@ -23928,6 +23928,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;
         }
@@ -31806,356 +31812,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;
+            return prop(arg);
+        }
+        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();
+        }
+        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;
         }
-        else if (customRender) {
-            expectedWidth = customRender.expectedWidth;
-            expectedHeight = customRender.expectedHeight;
-            customElements = customRender.elements;
-            renderDefault = customRender.renderDefault;
+        get width() {
+            let width = this.AABBBounds.width();
+            if (width === Infinity || width === -Infinity) {
+                width = 0;
+            }
+            return Math.max(width, this.attribute.width ?? 0);
         }
-        if (customElements) {
-            const value = table.getCellValue(col, row);
-            elementsGroup = adjustElementToGroup(customElements, autoWidth ? expectedWidth : width, autoHeight ? expectedHeight : height, value);
+        get height() {
+            let height = this.AABBBounds.height();
+            if (height === Infinity || height === -Infinity) {
+                height = 0;
+            }
+            return Math.max(height, this.attribute.height ?? 0);
         }
-        if (enableCellPadding) {
-            elementsGroup.setAttributes({
-                x: padding[3],
-                y: padding[0],
-                width: width - padding[1] - padding[3],
-                height: height - padding[0] - padding[2]
-            });
+        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);
+                }
+            }
         }
-        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;
+        setDeltaHeight(deltaY) {
+            if (deltaY === 0) {
+                return;
             }
-            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;
+            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);
+                }
             }
-        });
-        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);
+        }
+        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;
                 }
             }
-            const rect = element;
-            if (isValid$1(rect.x)) {
-                rect.x = isString$2(rect.x)
-                    ? transformString(rect.x, width - borderLineWidths[1])
-                    : Number(rect.x);
+            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;
+                }
             }
-            if (isValid$1(rect.y)) {
-                rect.y = isString$2(rect.y)
-                    ? transformString(rect.y, height - borderLineWidths[2])
-                    : Number(rect.y);
+        }
+        getColGroup(col) {
+            let c = this._firstChild;
+            if (!c) {
+                return null;
             }
-            if ('width' in element) {
-                element.width = isString$2(element.width)
-                    ? transformString(element.width, width - borderLineWidths[1])
-                    : Number(element.width);
+            for (let i = 0; i < this.childrenCount; i++) {
+                if (c.col === col) {
+                    return c;
+                }
+                c = c._next;
             }
-            if ('height' in element) {
-                element.height = isString$2(element.height)
-                    ? transformString(element.height, height - borderLineWidths[2])
-                    : Number(element.height);
+            return null;
+        }
+        getRowGroup(row) {
+            let c = this._firstChild;
+            if (!c) {
+                return null;
             }
-            if ('radius' in element) {
-                element.radius = isString$2(element.radius)
-                    ? transformString(element.radius, Math.min(width - borderLineWidths[1], height - borderLineWidths[2]))
-                    : Number(element.radius);
+            for (let i = 0; i < this.childrenCount; i++) {
+                if (c.row === row) {
+                    return c;
+                }
+                c = c._next;
             }
-            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;
+            return null;
+        }
+        getChildAt(index) {
+            const child = super.getChildAt(index);
+            if (child && child.name === 'border-rect') {
+                return child._next;
             }
-            rect.x = rect.x + left;
-            rect.y = rect.y + top;
-            result.push(element);
+            return child;
         }
-        return result;
-    }
-    function transformString(str, size) {
-        if (str.endsWith('px')) {
-            return parseInt(str, 10);
+        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 (str.endsWith('%') && size) {
-            return (parseInt(str, 10) / 100) * size;
+        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 parseInt(str, 10);
-    }
-    function dealPercentCalc(group, parentWidth, parentHeight) {
-        if (!group) {
-            return;
+        updateColumnRowNumber(row) {
+            if (!this.rowNumber) {
+                this.rowNumber = row;
+            }
+            else {
+                this.rowNumber = Math.max(this.rowNumber, row);
+            }
         }
-        group.forEachChildren((child) => {
-            if (!child) {
-                return;
+        updateColumnHeight(cellHeight) {
+            if (!this.colHeight) {
+                this.colHeight = cellHeight;
             }
-            if (isObject$4(child.attribute.width) && child.attribute.width.percent) {
-                child.setAttribute('width', (child.attribute.width.percent / 100) * parentWidth +
-                    (child.attribute.width.delta ?? 0));
+            else {
+                this.colHeight += cellHeight;
             }
-            if (isObject$4(child.attribute.height) && child.attribute.height.percent) {
-                child.setAttribute('height', (child.attribute.height.percent / 100) * parentHeight +
-                    (child.attribute.height.delta ?? 0));
+        }
+    };
+    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);
+    }
+
+    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();
             }
-            if (child.type === 'group') {
-                dealPercentCalc(child, child.attribute.width, child.attribute.height);
+            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 decodeReactDom(dom) {
-        if (!dom || !dom.$$typeof) {
-            return dom;
+    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();
         }
-        const type = dom.type;
-        const { attribute, children, stateProxy } = dom.props;
-        const g = type({ attribute });
-        parseToGraphic(g, dom.props);
-        if (stateProxy) {
-            g.stateProxy = stateProxy;
+        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();
         }
-        g.id = attribute.id;
-        g.name = attribute.name;
-        if (isArray$1(children)) {
-            children.forEach((item) => {
-                const c = decodeReactDom(item);
-                g.add(c);
-            });
+        else if (layoutMap.isRightFrozenColumn(col, row)) {
+            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
+            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
         }
-        else if (children) {
-            g.add(decodeReactDom(children));
+        else if (layoutMap.isBottomFrozenRow(col, row)) {
+            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
+            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
         }
-        return g;
+        return bodyBound;
     }
-    function parseToGraphic(g, props) {
-        let isGraphic = false;
-        switch (g.type) {
-            case 'richtext':
-                break;
-            case 'rich/image':
-                break;
-            default:
-                isGraphic = true;
+
+    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 (isGraphic) {
-            Object.keys(props).forEach(k => {
-                const en = REACT_TO_CANOPUS_EVENTS[k];
-                if (en) {
-                    g.on(en, props[k]);
-                }
+        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 = {};
@@ -32435,231 +32541,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;
@@ -32697,38 +32582,7 @@
         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();
+    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);
@@ -32796,7 +32650,7 @@
             };
         }
         image.failCallback = () => {
-            const regedIcons = get$2();
+            const regedIcons = get$1();
             image.image = regedIcons.damage_pic.svg;
         };
         cellGroup.appendChild(image);
@@ -33536,206 +33390,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;
@@ -33929,7 +33583,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 = [];
@@ -33948,7 +33602,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),
@@ -33995,7 +33651,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));
@@ -34005,7 +33661,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));
@@ -34015,7 +33671,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));
@@ -34024,7 +33680,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));
@@ -34092,13 +33748,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);
@@ -34162,7 +33818,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;
@@ -34180,7 +33836,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;
@@ -34452,7 +34110,7 @@
                 }
                 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,
@@ -34476,7 +34134,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);
@@ -34866,14 +34524,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);
@@ -34948,30 +34637,10 @@
         const type = table.isHeader(col, row)
             ? table._getHeaderLayoutMap(col, row).headerType
             : table.getBodyColumnType(col, row);
-        let value = table.getCellValue(col, row);
         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 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', padding, table);
-                }
-            }
-        }
         let newCellGroup;
         let bgColorFunc;
         if (table.internalProps?.dataConfig?.mappingRules && !table.isHeader(col, row)) {
@@ -35081,7 +34750,7 @@
                     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', padding, table);
+                        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);
                     }
                 }
             }
@@ -35226,6 +34895,385 @@
         };
     }
 
+    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);
+        }
+        return result;
+    }
+    function transformString(str, size) {
+        if (str.endsWith('px')) {
+            return parseInt(str, 10);
+        }
+        else if (str.endsWith('%') && size) {
+            return (parseInt(str, 10) / 100) * size;
+        }
+        return parseInt(str, 10);
+    }
+    function dealPercentCalc(group, parentWidth, parentHeight) {
+        if (!group) {
+            return;
+        }
+        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 decodeReactDom(dom) {
+        if (!dom || !dom.$$typeof) {
+            return dom;
+        }
+        const type = dom.type;
+        const { attribute, children, stateProxy } = dom.props;
+        const g = type({ attribute });
+        parseToGraphic(g, dom.props);
+        if (stateProxy) {
+            g.stateProxy = stateProxy;
+        }
+        g.id = attribute.id;
+        g.name = attribute.name;
+        if (isArray$1(children)) {
+            children.forEach((item) => {
+                const c = decodeReactDom(item);
+                g.add(c);
+            });
+        }
+        else if (children) {
+            g.add(decodeReactDom(children));
+        }
+        return g;
+    }
+    function parseToGraphic(g, props) {
+        let isGraphic = false;
+        switch (g.type) {
+            case 'richtext':
+                break;
+            case 'rich/image':
+                break;
+            default:
+                isGraphic = true;
+        }
+        if (isGraphic) {
+            Object.keys(props).forEach(k => {
+                const en = REACT_TO_CANOPUS_EVENTS[k];
+                if (en) {
+                    g.on(en, props[k]);
+                }
+            });
+        }
+    }
+    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);
+                    }
+                    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, customMergeRange, table);
+                    return customResult;
+                }
+            }
+        }
+        return undefined;
+    }
+
     function isMergeCellGroup(cellGroup) {
         if (cellGroup.role === 'cell' &&
             isNumber$3(cellGroup.mergeStartCol) &&
@@ -36785,31 +36833,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) {
@@ -37058,32 +37108,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) {
@@ -37436,7 +37488,7 @@
         }
     };
 
-    const regedIcons = get$2();
+    const regedIcons = get$1();
     class DrillIcon {
         icon;
         constructor() {
@@ -47674,7 +47726,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];
         }
@@ -47696,7 +47748,7 @@
                 else {
                     iconResults = iconDefine;
                 }
-                const regedIcons = get$2();
+                const regedIcons = get$1();
                 const addIcon = (columnIcon) => {
                     let icon;
                     if (typeof columnIcon === 'string') {
@@ -48441,7 +48493,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];
@@ -48526,7 +48578,7 @@
                 else {
                     headerIconStrs = headerIcon;
                 }
-                const regedIcons = get$2();
+                const regedIcons = get$1();
                 const addIcon = (headerIcon) => {
                     let icon;
                     if (typeof headerIcon === 'string') {
@@ -50320,7 +50372,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.17.10-alpha.5";
+        version = "0.17.10-alpha.7";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -60869,7 +60921,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;
@@ -61293,9 +61345,9 @@
         return new Tag$1(params ? params.attribute : {});
     }
 
-    const version = "0.17.10-alpha.5";
+    const version = "0.17.10-alpha.7";
     function getIcons() {
-        return get$2();
+        return get$1();
     }
     function clearGlobal() {
         clearAll();