@visactor/vtable 1.24.0 → 1.25.1-alpha.0

package/dist/vtable.js

@@ -42353,9 +42353,11 @@
     }
     function _getScrollableVisibleRect(table) {
         let frozenColsWidth = 0;
+        let frozenColsContentWidth = 0;
         let rightFrozenColsWidth = 0;
         if (table.frozenColCount > 0) {
             frozenColsWidth = table.getFrozenColsWidth();
+            frozenColsContentWidth = table.getFrozenColsContentWidth?.() ?? frozenColsWidth;
         }
         if (table.rightFrozenColCount > 0) {
             rightFrozenColsWidth = table.getRightFrozenColsWidth();
@@ -42368,7 +42370,7 @@
         if (table.bottomFrozenRowCount > 0) {
             bottomFrozenRowsHeight = table.getBottomFrozenRowsHeight();
         }
-        return new Rect$1(table.scrollLeft + frozenColsWidth, table.scrollTop + frozenRowsHeight, table.tableNoFrameWidth - frozenColsWidth - rightFrozenColsWidth, table.tableNoFrameHeight - frozenRowsHeight - bottomFrozenRowsHeight);
+        return new Rect$1(table.scrollLeft + frozenColsContentWidth, table.scrollTop + frozenRowsHeight, table.tableNoFrameWidth - frozenColsWidth - rightFrozenColsWidth, table.tableNoFrameHeight - frozenRowsHeight - bottomFrozenRowsHeight);
     }
     function getStyleTheme(headerStyle, table, col, row, getProp, needGetTheme = true) {
         const padding = getQuadProps(getProp('padding', headerStyle, col, row, table));
@@ -43348,6 +43350,40 @@
         }
         return tableEvent;
     }
+    function getCellEventArgsSetWithTable(e, table) {
+        const eventArgsSet = getCellEventArgsSet(e);
+        if (!eventArgsSet.eventArgs) {
+            return eventArgsSet;
+        }
+        if (!table.options.scrollFrozenCols || table.getFrozenColsOffset?.() === 0) {
+            return eventArgsSet;
+        }
+        const xInTable = e.x - table.tableX;
+        const yInTable = e.y - table.tableY;
+        if (xInTable < 0 || yInTable < 0 || xInTable > table.tableNoFrameWidth || yInTable > table.tableNoFrameHeight) {
+            return eventArgsSet;
+        }
+        const frozenViewportWidth = table.getFrozenColsWidth();
+        const pickedCol = eventArgsSet.eventArgs.col;
+        const pickedRow = eventArgsSet.eventArgs.row;
+        const isPickedLeftFrozen = pickedCol >= 0 && pickedCol < table.frozenColCount && !table.isRightFrozenColumn(pickedCol, pickedRow);
+        if (isPickedLeftFrozen && xInTable >= frozenViewportWidth) {
+            const cell = table.getCellAtRelativePosition(e.x, e.y);
+            if (cell.col === -1 || cell.row === -1) {
+                return eventArgsSet;
+            }
+            const targetCell = table.scenegraph.getCell(cell.col, cell.row);
+            eventArgsSet.eventArgs = {
+                col: cell.col,
+                row: cell.row,
+                event: e,
+                targetCell,
+                mergeInfo: getMergeCellInfo(targetCell),
+                target: targetCell
+            };
+        }
+        return eventArgsSet;
+    }
     function getTargetCell(target) {
         while (target && target.parent) {
             if (target.role === 'cell') {
@@ -48262,11 +48298,18 @@
 
     function getColX(col, table, isRightFrozen) {
         if (isRightFrozen) {
-            return Math.min(table.tableNoFrameWidth, table.getAllColsWidth()) - table.getColsWidth(col, table.colCount - 1);
+            return (Math.min(table.tableNoFrameWidth, table.getAllColsWidth()) -
+                table.getColsWidth(col, table.colCount - 1) +
+                (table.getRightFrozenColsScrollLeft?.() ?? 0));
         }
+        const frozenOffset = table.getFrozenColsOffset?.() ?? 0;
+        const frozenScrollLeft = table.getFrozenColsScrollLeft?.() ?? 0;
         let colX = table.getColsWidth(0, col);
         if (col >= table.frozenColCount) {
-            colX -= table.scrollLeft;
+            colX -= table.scrollLeft + frozenOffset;
+        }
+        else {
+            colX -= frozenScrollLeft;
         }
         return colX;
     }
@@ -48283,6 +48326,7 @@
 
     class TableComponent {
         table;
+        _horizontalScrollBarTarget;
         border;
         columnResizeLine;
         columnResizeBgLine;
@@ -48293,6 +48337,8 @@
         menu;
         vScrollBar;
         hScrollBar;
+        frozenHScrollBar;
+        rightFrozenHScrollBar;
         frozenShadowLine;
         rightFrozenShadowLine;
         drillIcon;
@@ -48485,10 +48531,14 @@
             const hoverOn = this.table.theme.scrollStyle.hoverOn;
             if (hoverOn && !this.table.theme.scrollStyle.barToSide) {
                 componentGroup.addChild(this.hScrollBar);
+                componentGroup.addChild(this.frozenHScrollBar);
+                componentGroup.addChild(this.rightFrozenHScrollBar);
                 componentGroup.addChild(this.vScrollBar);
             }
             else {
                 componentGroup.stage.defaultLayer.addChild(this.hScrollBar);
+                componentGroup.stage.defaultLayer.addChild(this.frozenHScrollBar);
+                componentGroup.stage.defaultLayer.addChild(this.rightFrozenHScrollBar);
                 componentGroup.stage.defaultLayer.addChild(this.vScrollBar);
             }
             this.menu.bindTableComponent(componentGroup);
@@ -48531,6 +48581,38 @@
             });
             this.hScrollBar.render();
             this.hScrollBar.hideAll();
+            this.frozenHScrollBar = new ScrollBar({
+                direction: 'horizontal',
+                x: -this.table.tableNoFrameWidth * 2,
+                y: -this.table.tableNoFrameHeight * 2,
+                width: this.table.tableNoFrameWidth,
+                height: width,
+                padding: horizontalPadding,
+                railStyle: {
+                    fill: scrollRailColor
+                },
+                sliderStyle,
+                range: [0, 0.1],
+                visible: false
+            });
+            this.frozenHScrollBar.render();
+            this.frozenHScrollBar.hideAll();
+            this.rightFrozenHScrollBar = new ScrollBar({
+                direction: 'horizontal',
+                x: -this.table.tableNoFrameWidth * 2,
+                y: -this.table.tableNoFrameHeight * 2,
+                width: this.table.tableNoFrameWidth,
+                height: width,
+                padding: horizontalPadding,
+                railStyle: {
+                    fill: scrollRailColor
+                },
+                sliderStyle,
+                range: [0, 0.1],
+                visible: false
+            });
+            this.rightFrozenHScrollBar.render();
+            this.rightFrozenHScrollBar.hideAll();
             this.vScrollBar = new ScrollBar({
                 direction: 'vertical',
                 x: -this.table.tableNoFrameWidth * 2,
@@ -48551,6 +48633,8 @@
         updateScrollBar() {
             const oldHorizontalBarPos = this.table.stateManager.scroll.horizontalBarPos;
             const oldVerticalBarPos = this.table.stateManager.scroll.verticalBarPos;
+            const oldFrozenHorizontalBarPos = this.table.stateManager.scroll.frozenHorizontalBarPos;
+            const oldRightFrozenHorizontalBarPos = this.table.stateManager.scroll.rightFrozenHorizontalBarPos;
             const theme = this.table.theme;
             const width = theme.scrollStyle?.width;
             const visible1 = theme.scrollStyle?.visible;
@@ -48562,13 +48646,17 @@
             const totalWidth = this.table.getAllColsWidth();
             const frozenRowsHeight = this.table.getFrozenRowsHeight();
             const frozenColsWidth = this.table.getFrozenColsWidth();
+            const frozenColsContentWidth = this.table.getFrozenColsContentWidth?.() ?? frozenColsWidth;
             const bottomFrozenRowsHeight = this.table.getBottomFrozenRowsHeight();
             const rightFrozenColsWidth = this.table.getRightFrozenColsWidth();
+            const rightFrozenColsContentWidth = this.table.getRightFrozenColsContentWidth?.() ?? rightFrozenColsWidth;
             const hoverOn = this.table.theme.scrollStyle.hoverOn;
             const sizeTolerance = this.table.options.customConfig?._disableColumnAndRowSizeRound ? 1 : 0;
             if (totalWidth > tableWidth + sizeTolerance) {
                 const y = Math.min(tableHeight, totalHeight);
-                const rangeEnd = Math.max(0.05, (tableWidth - frozenColsWidth) / (totalWidth - frozenColsWidth));
+                const bodyViewportWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth;
+                const bodyContentWidth = totalWidth - frozenColsContentWidth - rightFrozenColsContentWidth;
+                const rangeEnd = bodyContentWidth > 0 ? Math.max(0.05, bodyViewportWidth / bodyContentWidth) : 1;
                 let attrY = 0;
                 if (this.table.theme.scrollStyle.barToSide) {
                     attrY =
@@ -48605,6 +48693,62 @@
                 if (horizontalVisible === 'always') {
                     this.hScrollBar.showAll();
                 }
+                const frozenScrollable = this.table.options.scrollFrozenCols && this.table.getFrozenColsOffset() > 0;
+                if (!ignoreFrozenCols && frozenScrollable) {
+                    const frozenRangeEnd = Math.max(0.05, frozenColsWidth / frozenColsContentWidth);
+                    const x = !hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0;
+                    this.frozenHScrollBar.setAttributes({
+                        x,
+                        y: attrY,
+                        width: frozenColsWidth,
+                        range: [0, frozenRangeEnd],
+                        visible: horizontalVisible === 'always'
+                    });
+                    const bounds = this.frozenHScrollBar.AABBBounds && this.frozenHScrollBar.globalAABBBounds;
+                    this.frozenHScrollBar._viewPosition = {
+                        x: bounds.x1,
+                        y: bounds.y1
+                    };
+                    if (horizontalVisible === 'always') {
+                        this.frozenHScrollBar.showAll();
+                    }
+                }
+                else {
+                    this.frozenHScrollBar.setAttributes({
+                        x: -this.table.tableNoFrameWidth * 2,
+                        y: -this.table.tableNoFrameHeight * 2,
+                        width: 0,
+                        visible: false
+                    });
+                }
+                const rightFrozenScrollable = this.table.options.scrollRightFrozenCols && this.table.getRightFrozenColsOffset() > 0;
+                if (!ignoreFrozenCols && rightFrozenScrollable) {
+                    const rightFrozenRangeEnd = Math.max(0.05, rightFrozenColsWidth / rightFrozenColsContentWidth);
+                    const x = tableWidth - rightFrozenColsWidth + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0);
+                    this.rightFrozenHScrollBar.setAttributes({
+                        x,
+                        y: attrY,
+                        width: rightFrozenColsWidth,
+                        range: [0, rightFrozenRangeEnd],
+                        visible: horizontalVisible === 'always'
+                    });
+                    const bounds = this.rightFrozenHScrollBar.AABBBounds && this.rightFrozenHScrollBar.globalAABBBounds;
+                    this.rightFrozenHScrollBar._viewPosition = {
+                        x: bounds.x1,
+                        y: bounds.y1
+                    };
+                    if (horizontalVisible === 'always') {
+                        this.rightFrozenHScrollBar.showAll();
+                    }
+                }
+                else {
+                    this.rightFrozenHScrollBar.setAttributes({
+                        x: -this.table.tableNoFrameWidth * 2,
+                        y: -this.table.tableNoFrameHeight * 2,
+                        width: 0,
+                        visible: false
+                    });
+                }
             }
             else {
                 this.hScrollBar.setAttributes({
@@ -48613,6 +48757,18 @@
                     width: 0,
                     visible: false
                 });
+                this.frozenHScrollBar.setAttributes({
+                    x: -this.table.tableNoFrameWidth * 2,
+                    y: -this.table.tableNoFrameHeight * 2,
+                    width: 0,
+                    visible: false
+                });
+                this.rightFrozenHScrollBar.setAttributes({
+                    x: -this.table.tableNoFrameWidth * 2,
+                    y: -this.table.tableNoFrameHeight * 2,
+                    width: 0,
+                    visible: false
+                });
             }
             if (totalHeight > tableHeight + sizeTolerance) {
                 const x = Math.min(tableWidth, totalWidth);
@@ -48652,6 +48808,8 @@
                 });
             }
             this.table.stateManager.setScrollLeft(oldHorizontalBarPos);
+            this.table.stateManager.setFrozenColsScrollLeft(oldFrozenHorizontalBarPos, false);
+            this.table.stateManager.setRightFrozenColsScrollLeft(oldRightFrozenHorizontalBarPos, false);
             this.table.stateManager.setScrollTop(oldVerticalBarPos);
         }
         hideResizeCol() {
@@ -48780,7 +48938,9 @@
             this.cellMover.update(backX, lineX, backY, lineY);
         }
         setFrozenColumnShadow(col, isRightFrozen) {
-            const colX = getColX(col, this.table, isRightFrozen);
+            const colX = !isRightFrozen && col === this.table.frozenColCount - 1 && (this.table.getFrozenColsOffset?.() ?? 0) > 0
+                ? this.table.getFrozenColsWidth()
+                : getColX(col, this.table, isRightFrozen);
             if (col < 0 || this.table.theme.frozenColumnLine?.shadow?.visible !== 'always') {
                 this.frozenShadowLine.setAttributes({
                     visible: false,
@@ -48797,7 +48957,10 @@
             }
         }
         setRightFrozenColumnShadow(col) {
-            const colX = getColX(col, this.table, true);
+            const shouldFixViewport = this.table.options.scrollRightFrozenCols && (this.table.getRightFrozenColsOffset?.() ?? 0) > 0;
+            const colX = shouldFixViewport
+                ? this.table.tableNoFrameWidth - this.table.getRightFrozenColsWidth()
+                : getColX(col, this.table, true);
             if (col >= this.table.colCount || this.table.theme.frozenColumnLine?.shadow?.visible !== 'always') {
                 this.rightFrozenShadowLine.setAttributes({
                     visible: false,
@@ -48861,16 +49024,35 @@
             }
             this.hScrollBar.setAttribute('visible', false);
             this.hScrollBar.hideAll();
+            this.frozenHScrollBar.setAttribute('visible', false);
+            this.frozenHScrollBar.hideAll();
+            this.rightFrozenHScrollBar.setAttribute('visible', false);
+            this.rightFrozenHScrollBar.hideAll();
+            this._horizontalScrollBarTarget = undefined;
             this.table.scenegraph.updateNextFrame();
         }
-        showHorizontalScrollBar() {
+        showHorizontalScrollBar(target = 'all') {
             const visible1 = this.table.theme.scrollStyle.visible;
             const horizontalVisible = this.table.theme.scrollStyle.horizontalVisible ?? visible1;
             if (horizontalVisible !== 'focus' && horizontalVisible !== 'scrolling') {
                 return;
             }
-            this.hScrollBar.setAttribute('visible', true);
-            this.hScrollBar.showAll();
+            if (this._horizontalScrollBarTarget === target) {
+                return;
+            }
+            this._horizontalScrollBarTarget = target;
+            const showBody = target === 'all' || target === 'body';
+            const showFrozen = target === 'all' || target === 'frozen';
+            const showRightFrozen = target === 'all' || target === 'rightFrozen';
+            const bodyVisible = showBody && this.hScrollBar.attribute.width > 0;
+            this.hScrollBar.setAttribute('visible', bodyVisible);
+            bodyVisible ? this.hScrollBar.showAll() : this.hScrollBar.hideAll();
+            const frozenVisible = showFrozen && this.frozenHScrollBar.attribute.width > 0;
+            this.frozenHScrollBar.setAttribute('visible', frozenVisible);
+            frozenVisible ? this.frozenHScrollBar.showAll() : this.frozenHScrollBar.hideAll();
+            const rightFrozenVisible = showRightFrozen && this.rightFrozenHScrollBar.attribute.width > 0;
+            this.rightFrozenHScrollBar.setAttribute('visible', rightFrozenVisible);
+            rightFrozenVisible ? this.rightFrozenHScrollBar.showAll() : this.rightFrozenHScrollBar.hideAll();
             this.table.scenegraph.updateNextFrame();
         }
         updateVerticalScrollBarPos(topRatio) {
@@ -48895,6 +49077,28 @@
                 y: bounds.y1
             };
         }
+        updateFrozenHorizontalScrollBarPos(leftRatio) {
+            const range = this.frozenHScrollBar.attribute.range;
+            const size = range[1] - range[0];
+            const range0 = leftRatio * (1 - size);
+            this.frozenHScrollBar.setAttribute('range', [range0, range0 + size]);
+            const bounds = this.frozenHScrollBar.AABBBounds && this.frozenHScrollBar.globalAABBBounds;
+            this.frozenHScrollBar._viewPosition = {
+                x: bounds.x1,
+                y: bounds.y1
+            };
+        }
+        updateRightFrozenHorizontalScrollBarPos(leftRatio) {
+            const range = this.rightFrozenHScrollBar.attribute.range;
+            const size = range[1] - range[0];
+            const range0 = leftRatio * (1 - size);
+            this.rightFrozenHScrollBar.setAttribute('range', [range0, range0 + size]);
+            const bounds = this.rightFrozenHScrollBar.AABBBounds && this.rightFrozenHScrollBar.globalAABBBounds;
+            this.rightFrozenHScrollBar._viewPosition = {
+                x: bounds.x1,
+                y: bounds.y1
+            };
+        }
         updateStyle() {
             const theme = this.table.theme;
             const scrollRailColor = theme.scrollStyle?.scrollRailColor;
@@ -48931,6 +49135,22 @@
                 },
                 sliderStyle
             });
+            this.frozenHScrollBar.setAttributes({
+                height: width,
+                padding: horizontalPadding,
+                railStyle: {
+                    fill: scrollRailColor
+                },
+                sliderStyle
+            });
+            this.rightFrozenHScrollBar.setAttributes({
+                height: width,
+                padding: horizontalPadding,
+                railStyle: {
+                    fill: scrollRailColor
+                },
+                sliderStyle
+            });
             const columnResizeColor = theme.columnResize?.lineColor;
             const columnResizeWidth = theme.columnResize?.lineWidth;
             const columnResizeBgColor = theme.columnResize?.bgColor;
@@ -52357,67 +52577,92 @@
             if (!table) {
                 return;
             }
+            const clipInflate = getSelectOverlayClipInflate(group, table);
             if (group.role === 'body') {
-                const x = -(group.attribute.x ?? 0) + table.getFrozenColsWidth();
-                const y = -(group.attribute.y ?? 0) + table.getFrozenRowsHeight();
-                const width = group.parent.attribute.width - table.getFrozenColsWidth() - table.getRightFrozenColsWidth();
-                const height = group.parent.attribute.height - table.getFrozenRowsHeight() - table.getBottomFrozenRowsHeight();
+                const x = -(group.attribute.x ?? 0) + table.getFrozenColsWidth() - clipInflate.left;
+                const y = -(group.attribute.y ?? 0) + table.getFrozenRowsHeight() - clipInflate.top;
+                const width = group.parent.attribute.width -
+                    table.getFrozenColsWidth() -
+                    table.getRightFrozenColsWidth() +
+                    clipInflate.left +
+                    clipInflate.right;
+                const height = group.parent.attribute.height -
+                    table.getFrozenRowsHeight() -
+                    table.getBottomFrozenRowsHeight() +
+                    clipInflate.top +
+                    clipInflate.bottom;
                 drawClipRect(context, x, y, width, height);
             }
             else if (group.role === 'row-header') {
-                const x = 0;
-                const y = -(group.attribute.y ?? 0) + table.getFrozenRowsHeight();
-                const width = table.getFrozenColsWidth();
-                const height = group.parent.attribute.height - table.getFrozenRowsHeight() - table.getBottomFrozenRowsHeight();
+                const x = 0 - clipInflate.left;
+                const y = -(group.attribute.y ?? 0) + table.getFrozenRowsHeight() - clipInflate.top;
+                const width = table.getFrozenColsWidth() + clipInflate.left + clipInflate.right;
+                const height = group.parent.attribute.height -
+                    table.getFrozenRowsHeight() -
+                    table.getBottomFrozenRowsHeight() +
+                    clipInflate.top +
+                    clipInflate.bottom;
                 drawClipRect(context, x, y, width, height);
             }
             else if (group.role === 'col-header') {
-                const x = -(group.attribute.x ?? 0) + table.getFrozenColsWidth();
-                const y = 0;
-                const width = group.parent.attribute.width - table.getFrozenColsWidth() - table.getRightFrozenColsWidth();
-                const height = table.getFrozenRowsHeight();
+                const x = -(group.attribute.x ?? 0) + table.getFrozenColsWidth() - clipInflate.left;
+                const y = 0 - clipInflate.top;
+                const width = group.parent.attribute.width -
+                    table.getFrozenColsWidth() -
+                    table.getRightFrozenColsWidth() +
+                    clipInflate.left +
+                    clipInflate.right;
+                const height = table.getFrozenRowsHeight() + clipInflate.top + clipInflate.bottom;
                 drawClipRect(context, x, y, width, height);
             }
             else if (group.role === 'right-frozen') {
-                const x = 0;
-                const y = -(group.attribute.y ?? 0) + table.getFrozenRowsHeight();
-                const width = table.getRightFrozenColsWidth();
-                const height = group.parent.attribute.height - table.getFrozenRowsHeight() - table.getBottomFrozenRowsHeight();
+                const x = 0 - clipInflate.left;
+                const y = -(group.attribute.y ?? 0) + table.getFrozenRowsHeight() - clipInflate.top;
+                const width = table.getRightFrozenColsWidth() + clipInflate.left + clipInflate.right;
+                const height = group.parent.attribute.height -
+                    table.getFrozenRowsHeight() -
+                    table.getBottomFrozenRowsHeight() +
+                    clipInflate.top +
+                    clipInflate.bottom;
                 drawClipRect(context, x, y, width, height);
             }
             else if (group.role === 'bottom-frozen') {
-                const x = -(group.attribute.x ?? 0) + table.getFrozenColsWidth();
-                const y = 0;
-                const width = group.parent.attribute.width - table.getFrozenColsWidth() - table.getRightFrozenColsWidth();
-                const height = table.getBottomFrozenRowsHeight();
+                const x = -(group.attribute.x ?? 0) + table.getFrozenColsWidth() - clipInflate.left;
+                const y = 0 - clipInflate.top;
+                const width = group.parent.attribute.width -
+                    table.getFrozenColsWidth() -
+                    table.getRightFrozenColsWidth() +
+                    clipInflate.left +
+                    clipInflate.right;
+                const height = table.getBottomFrozenRowsHeight() + clipInflate.top + clipInflate.bottom;
                 drawClipRect(context, x, y, width, height);
             }
             else if (group.role === 'corner-header') {
-                const x = 0;
-                const y = 0;
-                const width = table.getFrozenColsWidth();
-                const height = table.getFrozenRowsHeight();
+                const x = 0 - clipInflate.left;
+                const y = 0 - clipInflate.top;
+                const width = table.getFrozenColsWidth() + clipInflate.left + clipInflate.right;
+                const height = table.getFrozenRowsHeight() + clipInflate.top + clipInflate.bottom;
                 drawClipRect(context, x, y, width, height);
             }
             else if (group.role === 'corner-right-top-header') {
-                const x = 0;
-                const y = 0;
-                const width = table.getRightFrozenColsWidth();
-                const height = table.getFrozenRowsHeight();
+                const x = 0 - clipInflate.left;
+                const y = 0 - clipInflate.top;
+                const width = table.getRightFrozenColsWidth() + clipInflate.left + clipInflate.right;
+                const height = table.getFrozenRowsHeight() + clipInflate.top + clipInflate.bottom;
                 drawClipRect(context, x, y, width, height);
             }
             else if (group.role === 'corner-right-bottom-header') {
-                const x = 0;
-                const y = 0;
-                const width = table.getRightFrozenColsWidth();
-                const height = table.getBottomFrozenRowsHeight();
+                const x = 0 - clipInflate.left;
+                const y = 0 - clipInflate.top;
+                const width = table.getRightFrozenColsWidth() + clipInflate.left + clipInflate.right;
+                const height = table.getBottomFrozenRowsHeight() + clipInflate.top + clipInflate.bottom;
                 drawClipRect(context, x, y, width, height);
             }
             else if (group.role === 'corner-left-bottom-header') {
-                const x = 0;
-                const y = 0;
-                const width = table.getFrozenColsWidth();
-                const height = table.getBottomFrozenRowsHeight();
+                const x = 0 - clipInflate.left;
+                const y = 0 - clipInflate.top;
+                const width = table.getFrozenColsWidth() + clipInflate.left + clipInflate.right;
+                const height = table.getBottomFrozenRowsHeight() + clipInflate.top + clipInflate.bottom;
                 drawClipRect(context, x, y, width, height);
             }
         }
@@ -52426,6 +52671,27 @@
         injectable()
     ], ClipBodyGroupBeforeRenderContribution);
     const precision = Math.pow(2, 24);
+    function getSelectOverlayClipInflate(group, table) {
+        const isSelectOverlay = group.name === 'select-overlay';
+        if (!isSelectOverlay) {
+            return { left: 0, top: 0, right: 0, bottom: 0 };
+        }
+        const lineWidth = table.theme.selectionStyle?.cellBorderLineWidth;
+        const maxLineWidth = Array.isArray(lineWidth)
+            ? Math.max(...lineWidth.filter(v => typeof v === 'number'))
+            : typeof lineWidth === 'number'
+                ? lineWidth
+                : 0;
+        const baseInflate = Math.max(1, Math.ceil(maxLineWidth / 2) + 1);
+        const shouldInflateForFillHandle = !!table.options.excelOptions?.fillHandle && table.stateManager.select.ranges?.length === 1;
+        const handleInflate = shouldInflateForFillHandle ? 3 : 0;
+        return {
+            left: baseInflate,
+            top: baseInflate,
+            right: Math.max(baseInflate, handleInflate),
+            bottom: Math.max(baseInflate, handleInflate)
+        };
+    }
     function drawClipRect(context, x, y, width, height) {
         context.beginPath();
         const matrix = context.applyedMatrix;
@@ -55322,7 +55588,7 @@
         async setX(x, isEnd = false) {
             const xLimitLeft = this.table.getColsWidth(this.bodyLeftCol, this.bodyLeftCol + (this.colEnd - this.colStart + 1)) / 2;
             const xLimitRight = this.table.getAllColsWidth() - xLimitLeft;
-            const screenLeft = this.table.getTargetColAt(x + this.table.scenegraph.rowHeaderGroup.attribute.width);
+            const screenLeft = this.table.getTargetColAt(x + this.table.scenegraph.rowHeaderGroup.attribute.width + (this.table.getFrozenColsOffset?.() ?? 0));
             if (screenLeft) {
                 this.screenLeftCol = screenLeft.col;
             }
@@ -55503,7 +55769,9 @@
                 if (colGroup) {
                     const deltaX = colGroup.attribute.x +
                         colGroup.attribute.width -
-                        (this.table.getAllColsWidth() - this.table.getFrozenColsWidth() - this.table.getRightFrozenColsWidth());
+                        (this.table.getAllColsWidth() -
+                            (this.table.getFrozenColsContentWidth?.() ?? this.table.getFrozenColsWidth()) -
+                            (this.table.getRightFrozenColsContentWidth?.() ?? this.table.getRightFrozenColsWidth()));
                     this.deltaX = -deltaX;
                 }
             }
@@ -55690,10 +55958,13 @@
         }
         const colsWidth = table.getColsWidth(computeRectCellRangeStartCol, computeRectCellRangeEndCol);
         const rowsHeight = table.getRowsHeight(computeRectCellRangeStartRow, computeRectCellRangeEndRow);
+        const overlayGroup = scene.getSelectOverlayGroup(selectComp.role);
+        const offsetX = scene.tableGroup.attribute.x + (overlayGroup.attribute.x ?? 0);
+        const offsetY = scene.tableGroup.attribute.y + (overlayGroup.attribute.y ?? 0);
         const firstCellBound = scene.highPerformanceGetCell(computeRectCellRangeStartCol, computeRectCellRangeStartRow).globalAABBBounds;
         selectComp.rect.setAttributes({
-            x: firstCellBound.x1 - scene.tableGroup.attribute.x,
-            y: firstCellBound.y1 - scene.tableGroup.attribute.y,
+            x: firstCellBound.x1 - offsetX,
+            y: firstCellBound.y1 - offsetY,
             width: colsWidth,
             height: rowsHeight,
             visible: true
@@ -55716,16 +55987,16 @@
             let handlerX;
             if (endCol < table.colCount - 1) {
                 lastCellBound = scene.highPerformanceGetCell(endCol, endRow).globalAABBBounds;
-                handlerX = lastCellBound.x2 - scene.tableGroup.attribute.x - 3;
+                handlerX = lastCellBound.x2 - offsetX - 3;
             }
             else {
                 if (startCol === 0) {
                     lastCellBound = scene.highPerformanceGetCell(0, endRow).globalAABBBounds;
-                    handlerX = lastCellBound.x1 - scene.tableGroup.attribute.x;
+                    handlerX = lastCellBound.x1 - offsetX;
                 }
                 else {
                     lastCellBound = scene.highPerformanceGetCell(startCol - 1, endRow).globalAABBBounds;
-                    handlerX = lastCellBound.x2 - scene.tableGroup.attribute.x - 3;
+                    handlerX = lastCellBound.x2 - offsetX - 3;
                 }
             }
             if (endRow < table.rowCount - 1) {
@@ -55734,7 +56005,7 @@
             else {
                 lastCellBound = scene.highPerformanceGetCell(endCol, startRow - 1).globalAABBBounds;
             }
-            const handlerY = lastCellBound.y2 - scene.tableGroup.attribute.y - 3;
+            const handlerY = lastCellBound.y2 - offsetY - 3;
             selectComp.fillhandle?.setAttributes({
                 x: handlerX,
                 y: handlerY,
@@ -55743,141 +56014,6 @@
                 visible
             });
         }
-        let isNearRowHeader = table.frozenColCount ? startCol === table.frozenColCount : false;
-        if (!isNearRowHeader && table.frozenColCount && table.scrollLeft > 0 && startCol >= table.frozenColCount) {
-            const startColRelativePosition = table.getColsWidth(0, startCol - 1) - table.scrollLeft;
-            if (startColRelativePosition < table.getFrozenColsWidth()) {
-                isNearRowHeader = true;
-            }
-        }
-        let isNearRightRowHeader = table.rightFrozenColCount
-            ? table.rightFrozenColCount > 0 && endCol === table.colCount - table.rightFrozenColCount - 1
-            : false;
-        if (!isNearRightRowHeader && table.rightFrozenColCount && endCol < table.colCount - table.rightFrozenColCount) {
-            const endColRelativePosition = table.getColsWidth(0, endCol) - table.scrollLeft;
-            if (endColRelativePosition > table.tableNoFrameWidth - table.getRightFrozenColsWidth()) {
-                isNearRightRowHeader = true;
-            }
-        }
-        let isNearColHeader = table.frozenRowCount ? startRow === table.frozenRowCount : true;
-        if (!isNearColHeader && table.frozenRowCount && table.scrollTop > 0 && startRow >= table.frozenRowCount) {
-            const startRowRelativePosition = table.getRowsHeight(0, startRow - 1) - table.scrollTop;
-            if (startRowRelativePosition < table.getFrozenRowsHeight()) {
-                isNearColHeader = true;
-            }
-        }
-        let isNearBottomColHeader = table.bottomFrozenRowCount
-            ? endRow === table.rowCount - table.bottomFrozenRowCount - 1
-            : false;
-        if (!isNearBottomColHeader && table.bottomFrozenRowCount && endRow < table.rowCount - table.bottomFrozenRowCount) {
-            const endRowRelativePosition = table.getRowsHeight(0, endRow) - table.scrollTop;
-            if (endRowRelativePosition > table.tableNoFrameHeight - table.getBottomFrozenRowsHeight()) {
-                isNearBottomColHeader = true;
-            }
-        }
-        const { dynamicUpdateSelectionSize } = table.theme.selectionStyle;
-        if ((isNearRowHeader && (selectComp.rect.attribute.stroke[3] || dynamicUpdateSelectionSize)) ||
-            (isNearRightRowHeader && (selectComp.rect.attribute.stroke[1] || dynamicUpdateSelectionSize)) ||
-            (isNearColHeader && (selectComp.rect.attribute.stroke[0] || dynamicUpdateSelectionSize)) ||
-            (isNearBottomColHeader && (selectComp.rect.attribute.stroke[2] || dynamicUpdateSelectionSize))) {
-            if (isNearRowHeader && selectComp.rect.attribute.stroke[3]) {
-                scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'columnHeader'
-                    ? scene.cornerHeaderGroup
-                    : selectComp.role === 'bottomFrozen'
-                        ? scene.leftBottomCornerGroup
-                        : scene.rowHeaderGroup);
-            }
-            if (isNearBottomColHeader && selectComp.rect.attribute.stroke[2]) {
-                scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'rowHeader'
-                    ? scene.leftBottomCornerGroup
-                    : selectComp.role === 'rightFrozen'
-                        ? scene.rightBottomCornerGroup
-                        : scene.bottomFrozenGroup);
-            }
-            if (isNearColHeader && selectComp.rect.attribute.stroke[0]) {
-                scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'rowHeader'
-                    ? scene.cornerHeaderGroup
-                    : selectComp.role === 'rightFrozen'
-                        ? scene.rightTopCornerGroup
-                        : scene.colHeaderGroup);
-            }
-            if (isNearRightRowHeader && selectComp.rect.attribute.stroke[1]) {
-                scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'columnHeader'
-                    ? scene.rightTopCornerGroup
-                    : selectComp.role === 'bottomFrozen'
-                        ? scene.rightBottomCornerGroup
-                        : scene.rightFrozenGroup);
-            }
-            if (selectComp.rect.attribute.x < table.getFrozenColsWidth() &&
-                table.scrollLeft > 0 &&
-                (selectComp.role === 'body' || selectComp.role === 'columnHeader' || selectComp.role === 'bottomFrozen')) {
-                const width = selectComp.rect.attribute.width - (table.getFrozenColsWidth() - selectComp.rect.attribute.x);
-                selectComp.rect.setAttributes({
-                    x: selectComp.rect.attribute.x + (table.getFrozenColsWidth() - selectComp.rect.attribute.x),
-                    width: width > 0 ? width : 0
-                });
-                selectComp.fillhandle?.setAttributes({
-                    visible: width > 0
-                });
-            }
-            if (table.getRightFrozenColsWidth() > 0 &&
-                scene.rightFrozenGroup.attribute.height > 0 &&
-                selectComp.rect.attribute.x + selectComp.rect.attribute.width > scene.rightFrozenGroup.attribute.x &&
-                (selectComp.role === 'body' || selectComp.role === 'columnHeader' || selectComp.role === 'bottomFrozen')) {
-                const width = scene.rightFrozenGroup.attribute.x - selectComp.rect.attribute.x;
-                selectComp.rect.setAttributes({
-                    x: selectComp.rect.attribute.x,
-                    width: width > 0 ? width : 0
-                });
-                selectComp.fillhandle?.setAttributes({
-                    visible: width - colsWidth > 0
-                });
-            }
-            if (selectComp.rect.attribute.y < scene.colHeaderGroup.attribute.height &&
-                table.scrollTop > 0 &&
-                (selectComp.role === 'body' || selectComp.role === 'rowHeader' || selectComp.role === 'rightFrozen')) {
-                const height = selectComp.rect.attribute.height - (scene.colHeaderGroup.attribute.height - selectComp.rect.attribute.y);
-                selectComp.rect.setAttributes({
-                    y: selectComp.rect.attribute.y + (scene.colHeaderGroup.attribute.height - selectComp.rect.attribute.y),
-                    height: height > 0 ? height : 0
-                });
-                selectComp.fillhandle?.setAttributes({
-                    visible: height > 0
-                });
-            }
-            if (scene.bottomFrozenGroup.attribute.width > 0 &&
-                scene.bottomFrozenGroup.attribute.height > 0 &&
-                selectComp.rect.attribute.y + selectComp.rect.attribute.height > scene.bottomFrozenGroup.attribute.y &&
-                (selectComp.role === 'body' || selectComp.role === 'rowHeader' || selectComp.role === 'rightFrozen')) {
-                const height = scene.bottomFrozenGroup.attribute.y - selectComp.rect.attribute.y;
-                selectComp.rect.setAttributes({
-                    y: selectComp.rect.attribute.y,
-                    height: height > 0 ? height : 0
-                });
-                selectComp.fillhandle?.setAttributes({
-                    visible: height - rowsHeight > 0
-                });
-            }
-        }
-        else {
-            scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'body'
-                ? scene.bodyGroup
-                : selectComp.role === 'columnHeader'
-                    ? scene.colHeaderGroup
-                    : selectComp.role === 'rowHeader'
-                        ? scene.rowHeaderGroup
-                        : selectComp.role === 'cornerHeader'
-                            ? scene.cornerHeaderGroup
-                            : selectComp.role === 'rightTopCorner'
-                                ? scene.rightTopCornerGroup
-                                : selectComp.role === 'rightFrozen'
-                                    ? scene.rightFrozenGroup
-                                    : selectComp.role === 'leftBottomCorner'
-                                        ? scene.leftBottomCornerGroup
-                                        : selectComp.role === 'bottomFrozen'
-                                            ? scene.bottomFrozenGroup
-                                            : scene.rightBottomCornerGroup);
-        }
         let diffSize = 0;
         if (typeof selectComp.rect.attribute.lineWidth === 'number') {
             diffSize = Math.ceil(selectComp.rect.attribute.lineWidth / 2);
@@ -56121,6 +56257,9 @@
         const startRow = Math.min(start_Row, end_Row);
         const endCol = Math.max(start_Col, end_Col);
         const endRow = Math.max(start_Row, end_Row);
+        const overlayGroup = scene.getSelectOverlayGroup(selectRangeType);
+        const offsetX = scene.tableGroup.attribute.x + (overlayGroup.attribute.x ?? 0);
+        const offsetY = scene.tableGroup.attribute.y + (overlayGroup.attribute.y ?? 0);
         const firstCellBound = scene.highPerformanceGetCell(startCol, startRow).globalAABBBounds;
         const lastCellBound = scene.highPerformanceGetCell(endCol, endRow).globalAABBBounds;
         const theme = scene.table.theme;
@@ -56138,8 +56277,8 @@
                 }
                 return false;
             }),
-            x: firstCellBound.x1 - scene.tableGroup.attribute.x,
-            y: firstCellBound.y1 - scene.tableGroup.attribute.y,
+            x: firstCellBound.x1 - offsetX,
+            y: firstCellBound.y1 - offsetY,
             width: 0,
             height: 0,
             visible: true,
@@ -56151,8 +56290,8 @@
                 pickable: false,
                 fill: bodyClickBorderColor,
                 stroke: bodyClickBorderColor,
-                x: lastCellBound.x2 - 3,
-                y: lastCellBound.y2 - 3,
+                x: lastCellBound.x2 - offsetX - 3,
+                y: lastCellBound.y2 - offsetY - 3,
                 width: 6,
                 height: 6,
                 visible: true
@@ -56164,41 +56303,10 @@
             fillhandle,
             role: selectRangeType
         });
-        scene.tableGroup.insertAfter(rect, selectRangeType === 'body'
-            ? scene.bodyGroup
-            : selectRangeType === 'columnHeader'
-                ? scene.colHeaderGroup
-                : selectRangeType === 'rowHeader'
-                    ? scene.rowHeaderGroup
-                    : selectRangeType === 'cornerHeader'
-                        ? scene.cornerHeaderGroup
-                        : selectRangeType === 'rightTopCorner'
-                            ? scene.rightTopCornerGroup
-                            : selectRangeType === 'rightFrozen'
-                                ? scene.rightFrozenGroup
-                                : selectRangeType === 'leftBottomCorner'
-                                    ? scene.leftBottomCornerGroup
-                                    : selectRangeType === 'bottomFrozen'
-                                        ? scene.bottomFrozenGroup
-                                        : scene.rightBottomCornerGroup);
-        isHasFillHandleRect &&
-            scene.tableGroup.insertAfter(fillhandle, selectRangeType === 'body'
-                ? scene.bodyGroup
-                : selectRangeType === 'columnHeader'
-                    ? scene.colHeaderGroup
-                    : selectRangeType === 'rowHeader'
-                        ? scene.rowHeaderGroup
-                        : selectRangeType === 'cornerHeader'
-                            ? scene.cornerHeaderGroup
-                            : selectRangeType === 'rightTopCorner'
-                                ? scene.rightTopCornerGroup
-                                : selectRangeType === 'rightFrozen'
-                                    ? scene.rightFrozenGroup
-                                    : selectRangeType === 'leftBottomCorner'
-                                        ? scene.leftBottomCornerGroup
-                                        : selectRangeType === 'bottomFrozen'
-                                            ? scene.bottomFrozenGroup
-                                            : scene.rightBottomCornerGroup);
+        overlayGroup.addChild(rect);
+        if (isHasFillHandleRect) {
+            overlayGroup.addChild(fillhandle);
+        }
     }
     function getCornerRadius(selectRangeType, cornerRadius, start_Col, start_Row, end_Col, end_Row, table) {
         if (!cornerRadius) {
@@ -57805,6 +57913,42 @@
         const leftBottomCornerGroup = createContainerGroup(0, 0, true);
         leftBottomCornerGroup.role = 'corner-left-bottom-header';
         scene.leftBottomCornerGroup = leftBottomCornerGroup;
+        const bodySelectGroup = createContainerGroup(width, 0, true);
+        bodySelectGroup.role = 'body';
+        bodySelectGroup.name = 'select-overlay';
+        scene.bodySelectGroup = bodySelectGroup;
+        const rowHeaderSelectGroup = createContainerGroup(0, 0, true);
+        rowHeaderSelectGroup.role = 'row-header';
+        rowHeaderSelectGroup.name = 'select-overlay';
+        scene.rowHeaderSelectGroup = rowHeaderSelectGroup;
+        const bottomFrozenSelectGroup = createContainerGroup(0, 0, true);
+        bottomFrozenSelectGroup.role = 'bottom-frozen';
+        bottomFrozenSelectGroup.name = 'select-overlay';
+        scene.bottomFrozenSelectGroup = bottomFrozenSelectGroup;
+        const colHeaderSelectGroup = createContainerGroup(0, 0, true);
+        colHeaderSelectGroup.role = 'col-header';
+        colHeaderSelectGroup.name = 'select-overlay';
+        scene.colHeaderSelectGroup = colHeaderSelectGroup;
+        const rightFrozenSelectGroup = createContainerGroup(0, 0, true);
+        rightFrozenSelectGroup.role = 'right-frozen';
+        rightFrozenSelectGroup.name = 'select-overlay';
+        scene.rightFrozenSelectGroup = rightFrozenSelectGroup;
+        const rightTopCornerSelectGroup = createContainerGroup(0, 0, true);
+        rightTopCornerSelectGroup.role = 'corner-right-top-header';
+        rightTopCornerSelectGroup.name = 'select-overlay';
+        scene.rightTopCornerSelectGroup = rightTopCornerSelectGroup;
+        const rightBottomCornerSelectGroup = createContainerGroup(0, 0, true);
+        rightBottomCornerSelectGroup.role = 'corner-right-bottom-header';
+        rightBottomCornerSelectGroup.name = 'select-overlay';
+        scene.rightBottomCornerSelectGroup = rightBottomCornerSelectGroup;
+        const leftBottomCornerSelectGroup = createContainerGroup(0, 0, true);
+        leftBottomCornerSelectGroup.role = 'corner-left-bottom-header';
+        leftBottomCornerSelectGroup.name = 'select-overlay';
+        scene.leftBottomCornerSelectGroup = leftBottomCornerSelectGroup;
+        const cornerHeaderSelectGroup = createContainerGroup(0, 0, true);
+        cornerHeaderSelectGroup.role = 'corner-header';
+        cornerHeaderSelectGroup.name = 'select-overlay';
+        scene.cornerHeaderSelectGroup = cornerHeaderSelectGroup;
         scene.tableGroup.addChild(bodyGroup);
         scene.tableGroup.addChild(rowHeaderGroup);
         scene.tableGroup.addChild(bottomFrozenGroup);
@@ -57814,6 +57958,15 @@
         scene.tableGroup.addChild(rightTopCornerGroup);
         scene.tableGroup.addChild(leftBottomCornerGroup);
         scene.tableGroup.addChild(cornerHeaderGroup);
+        scene.tableGroup.addChild(bodySelectGroup);
+        scene.tableGroup.addChild(rowHeaderSelectGroup);
+        scene.tableGroup.addChild(bottomFrozenSelectGroup);
+        scene.tableGroup.addChild(colHeaderSelectGroup);
+        scene.tableGroup.addChild(rightFrozenSelectGroup);
+        scene.tableGroup.addChild(rightBottomCornerSelectGroup);
+        scene.tableGroup.addChild(rightTopCornerSelectGroup);
+        scene.tableGroup.addChild(leftBottomCornerSelectGroup);
+        scene.tableGroup.addChild(cornerHeaderSelectGroup);
         scene.tableGroup.addChild(componentGroup);
     }
     function createContainerGroup(width, height, clip) {
@@ -58549,6 +58702,15 @@
         leftBottomCornerGroup;
         rightBottomCornerGroup;
         componentGroup;
+        bodySelectGroup;
+        rowHeaderSelectGroup;
+        bottomFrozenSelectGroup;
+        colHeaderSelectGroup;
+        rightFrozenSelectGroup;
+        rightTopCornerSelectGroup;
+        leftBottomCornerSelectGroup;
+        rightBottomCornerSelectGroup;
+        cornerHeaderSelectGroup;
         selectedRangeComponents;
         selectingRangeComponents;
         customSelectedRangeComponents;
@@ -58710,6 +58872,15 @@
             delete this.rightBottomCornerGroup.border;
             this.leftBottomCornerGroup.clear();
             delete this.leftBottomCornerGroup.border;
+            this.bodySelectGroup?.clear();
+            this.rowHeaderSelectGroup?.clear();
+            this.bottomFrozenSelectGroup?.clear();
+            this.colHeaderSelectGroup?.clear();
+            this.rightFrozenSelectGroup?.clear();
+            this.rightTopCornerSelectGroup?.clear();
+            this.leftBottomCornerSelectGroup?.clear();
+            this.rightBottomCornerSelectGroup?.clear();
+            this.cornerHeaderSelectGroup?.clear();
             this.colHeaderGroup.setAttributes({
                 x: 0,
                 y: 0,
@@ -58767,6 +58938,65 @@
                 height: 0,
                 visible: false
             });
+            this.bodySelectGroup?.setAttributes({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0
+            });
+            this.rowHeaderSelectGroup?.setAttributes({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0
+            });
+            this.bottomFrozenSelectGroup?.setAttributes({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+                visible: false
+            });
+            this.colHeaderSelectGroup?.setAttributes({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0
+            });
+            this.rightFrozenSelectGroup?.setAttributes({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+                visible: false
+            });
+            this.rightTopCornerSelectGroup?.setAttributes({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+                visible: false
+            });
+            this.leftBottomCornerSelectGroup?.setAttributes({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+                visible: false
+            });
+            this.rightBottomCornerSelectGroup?.setAttributes({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+                visible: false
+            });
+            this.cornerHeaderSelectGroup?.setAttributes({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0
+            });
             this.tableGroup.setAttributes({
                 x: this.table.tableX,
                 y: this.table.tableY,
@@ -59535,8 +59765,21 @@
             }
             this.bodyGroup.setAttribute('y', this.colHeaderGroup.attribute.height + y);
             this.rowHeaderGroup.setAttribute('y', this.cornerHeaderGroup.attribute.height + y);
+            this.bodySelectGroup.setAttribute('y', this.bodyGroup.attribute.y);
+            this.rowHeaderSelectGroup.setAttribute('y', this.rowHeaderGroup.attribute.y);
+            this.colHeaderSelectGroup.setAttribute('y', this.colHeaderGroup.attribute.y);
+            this.cornerHeaderSelectGroup.setAttribute('y', this.cornerHeaderGroup.attribute.y);
             if (this.table.rightFrozenColCount > 0) {
                 this.rightFrozenGroup.setAttribute('y', this.rightTopCornerGroup.attribute.height + y);
+                this.rightFrozenSelectGroup.setAttribute('y', this.rightFrozenGroup.attribute.y);
+                this.rightTopCornerSelectGroup.setAttribute('y', this.rightTopCornerGroup.attribute.y);
+            }
+            if (this.table.bottomFrozenRowCount > 0) {
+                this.bottomFrozenSelectGroup.setAttribute('y', this.bottomFrozenGroup.attribute.y);
+                this.leftBottomCornerSelectGroup.setAttribute('y', this.leftBottomCornerGroup.attribute.y);
+            }
+            if (this.table.rightFrozenColCount > 0 && this.table.bottomFrozenRowCount > 0) {
+                this.rightBottomCornerSelectGroup.setAttribute('y', this.rightBottomCornerGroup.attribute.y);
             }
             this.updateNextFrame();
         }
@@ -59563,8 +59806,21 @@
             }
             this.bodyGroup.setAttribute('x', this.table.getFrozenColsWidth() + x);
             this.colHeaderGroup.setAttribute('x', this.table.getFrozenColsWidth() + x);
+            this.bodySelectGroup.setAttribute('x', this.bodyGroup.attribute.x);
+            this.colHeaderSelectGroup.setAttribute('x', this.colHeaderGroup.attribute.x);
+            this.rowHeaderSelectGroup.setAttribute('x', this.rowHeaderGroup.attribute.x);
+            this.cornerHeaderSelectGroup.setAttribute('x', this.cornerHeaderGroup.attribute.x);
             if (this.table.bottomFrozenRowCount > 0) {
                 this.bottomFrozenGroup.setAttribute('x', this.table.getFrozenColsWidth() + x);
+                this.bottomFrozenSelectGroup.setAttribute('x', this.bottomFrozenGroup.attribute.x);
+                this.leftBottomCornerSelectGroup.setAttribute('x', this.leftBottomCornerGroup.attribute.x);
+            }
+            if (this.table.rightFrozenColCount > 0) {
+                this.rightFrozenSelectGroup.setAttribute('x', this.rightFrozenGroup.attribute.x);
+                this.rightTopCornerSelectGroup.setAttribute('x', this.rightTopCornerGroup.attribute.x);
+            }
+            if (this.table.rightFrozenColCount > 0 && this.table.bottomFrozenRowCount > 0) {
+                this.rightBottomCornerSelectGroup.setAttribute('x', this.rightBottomCornerGroup.attribute.x);
             }
             this.updateNextFrame();
         }
@@ -59594,6 +59850,9 @@
             if (this.table.options.menu?.contextMenuWorkOnlyCell === false) {
                 this.canvasShowMenu();
             }
+            if (this.table.stateManager.select.ranges?.length) {
+                this.recreateAllSelectRangeComponents();
+            }
             this.updateNextFrame();
         }
         dealWidthMode() {
@@ -59779,8 +60038,12 @@
             moveHeaderPosition(updateColStart, updateColEnd, updateRowStart, updateRowEnd, moveType, this.table);
         }
         updateContainerAttrWidthAndX() {
-            const cornerX = updateContainerChildrenX(this.cornerHeaderGroup, 0);
-            const rowHeaderX = updateContainerChildrenX(this.rowHeaderGroup, 0);
+            const frozenStartX = -(this.table.getFrozenColsScrollLeft?.() ?? 0);
+            const frozenViewportWidth = this.table.getFrozenColsWidth();
+            const rightFrozenStartX = -this.table.getRightFrozenColsOffset() + (this.table.getRightFrozenColsScrollLeft?.() ?? 0);
+            const rightFrozenContentWidth = this.table.getRightFrozenColsContentWidth();
+            updateContainerChildrenX(this.cornerHeaderGroup, frozenStartX);
+            updateContainerChildrenX(this.rowHeaderGroup, frozenStartX);
             const colHeaderX = this.colHeaderGroup.hasChildNodes() && this.colHeaderGroup.firstChild
                 ? updateContainerChildrenX(this.colHeaderGroup, this.colHeaderGroup.firstChild.col > 0
                     ? this.table.getColsWidth(this.table.frozenColCount ?? 0, this.colHeaderGroup.firstChild.col - 1)
@@ -59791,28 +60054,44 @@
                     ? this.table.getColsWidth(this.table.frozenColCount ?? 0, this.bodyGroup.firstChild.col - 1)
                     : 0)
                 : 0;
-            const rightX = updateContainerChildrenX(this.rightFrozenGroup.childrenCount > 0 ? this.rightFrozenGroup : this.rightTopCornerGroup, 0);
+            if (this.rightFrozenGroup.childrenCount > 0) {
+                updateContainerChildrenX(this.rightFrozenGroup, rightFrozenStartX);
+            }
             this.bottomFrozenGroup.hasChildNodes() &&
                 this.bottomFrozenGroup.firstChild &&
                 updateContainerChildrenX(this.bottomFrozenGroup, this.bottomFrozenGroup.firstChild.col > 0
                     ? this.table.getColsWidth(this.table.frozenColCount ?? 0, this.bottomFrozenGroup.firstChild.col - 1)
                     : 0);
-            updateContainerChildrenX(this.leftBottomCornerGroup, 0);
-            updateContainerChildrenX(this.rightTopCornerGroup, 0);
-            updateContainerChildrenX(this.rightBottomCornerGroup, 0);
-            this.cornerHeaderGroup.setDeltaWidth(cornerX - this.cornerHeaderGroup.attribute.width);
-            this.leftBottomCornerGroup.setDeltaWidth(cornerX - this.leftBottomCornerGroup.attribute.width);
+            updateContainerChildrenX(this.leftBottomCornerGroup, frozenStartX);
+            updateContainerChildrenX(this.rightTopCornerGroup, rightFrozenStartX);
+            updateContainerChildrenX(this.rightBottomCornerGroup, rightFrozenStartX);
+            this.cornerHeaderGroup.setDeltaWidth(frozenViewportWidth - this.cornerHeaderGroup.attribute.width);
+            this.leftBottomCornerGroup.setDeltaWidth(frozenViewportWidth - this.leftBottomCornerGroup.attribute.width);
             this.colHeaderGroup.setDeltaWidth(colHeaderX - this.colHeaderGroup.attribute.width);
-            this.rowHeaderGroup.setDeltaWidth(rowHeaderX - this.rowHeaderGroup.attribute.width);
+            this.rowHeaderGroup.setDeltaWidth(frozenViewportWidth - this.rowHeaderGroup.attribute.width);
             this.bottomFrozenGroup.setDeltaWidth(colHeaderX - this.bottomFrozenGroup.attribute.width);
-            this.rightFrozenGroup.setDeltaWidth(rightX - this.rightFrozenGroup.attribute.width);
-            this.rightTopCornerGroup.setDeltaWidth(rightX - this.rightTopCornerGroup.attribute.width);
-            this.rightBottomCornerGroup.setDeltaWidth(rightX - this.rightBottomCornerGroup.attribute.width);
+            this.rightFrozenGroup.setDeltaWidth(rightFrozenContentWidth - this.rightFrozenGroup.attribute.width);
+            this.rightTopCornerGroup.setDeltaWidth(rightFrozenContentWidth - this.rightTopCornerGroup.attribute.width);
+            this.rightBottomCornerGroup.setDeltaWidth(rightFrozenContentWidth - this.rightBottomCornerGroup.attribute.width);
             this.bodyGroup.setDeltaWidth(bodyX - this.bodyGroup.attribute.width);
             this.colHeaderGroup.setAttribute('x', this.cornerHeaderGroup.attribute.width);
             this.bottomFrozenGroup.setAttribute('x', this.table.getFrozenColsWidth());
             this.bodyGroup.setAttribute('x', this.rowHeaderGroup.attribute.width);
         }
+        setFrozenColsScrollLeft(left) {
+            const frozenStartX = -left;
+            updateContainerChildrenX(this.cornerHeaderGroup, frozenStartX);
+            updateContainerChildrenX(this.rowHeaderGroup, frozenStartX);
+            updateContainerChildrenX(this.leftBottomCornerGroup, frozenStartX);
+            this.updateNextFrame();
+        }
+        setRightFrozenColsScrollLeft(left) {
+            const rightStartX = -this.table.getRightFrozenColsOffset() + left;
+            updateContainerChildrenX(this.rightFrozenGroup, rightStartX);
+            updateContainerChildrenX(this.rightTopCornerGroup, rightStartX);
+            updateContainerChildrenX(this.rightBottomCornerGroup, rightStartX);
+            this.updateNextFrame();
+        }
         updateContainerAttrHeightAndY() {
             for (let i = 0; i < this.cornerHeaderGroup.children.length; i++) {
                 updateContainerChildrenY(this.cornerHeaderGroup.children[i], 0);
@@ -59875,9 +60154,94 @@
                 this.updateContainerAttrHeightAndY();
             }
             this.updateTableSize();
+            this.syncSelectOverlayGroups();
             this.component.updateScrollBar();
             this.updateNextFrame();
         }
+        syncSelectOverlayGroups() {
+            this.bodySelectGroup.setAttributes({
+                x: this.bodyGroup.attribute.x,
+                y: this.bodyGroup.attribute.y,
+                width: this.bodyGroup.attribute.width,
+                height: this.bodyGroup.attribute.height
+            });
+            this.rowHeaderSelectGroup.setAttributes({
+                x: this.rowHeaderGroup.attribute.x,
+                y: this.rowHeaderGroup.attribute.y,
+                width: this.rowHeaderGroup.attribute.width,
+                height: this.rowHeaderGroup.attribute.height
+            });
+            this.colHeaderSelectGroup.setAttributes({
+                x: this.colHeaderGroup.attribute.x,
+                y: this.colHeaderGroup.attribute.y,
+                width: this.colHeaderGroup.attribute.width,
+                height: this.colHeaderGroup.attribute.height
+            });
+            this.cornerHeaderSelectGroup.setAttributes({
+                x: this.cornerHeaderGroup.attribute.x,
+                y: this.cornerHeaderGroup.attribute.y,
+                width: this.cornerHeaderGroup.attribute.width,
+                height: this.cornerHeaderGroup.attribute.height
+            });
+            this.rightFrozenSelectGroup.setAttributes({
+                x: this.rightFrozenGroup.attribute.x,
+                y: this.rightFrozenGroup.attribute.y,
+                width: this.rightFrozenGroup.attribute.width,
+                height: this.rightFrozenGroup.attribute.height,
+                visible: this.rightFrozenGroup.attribute.visible
+            });
+            this.bottomFrozenSelectGroup.setAttributes({
+                x: this.bottomFrozenGroup.attribute.x,
+                y: this.bottomFrozenGroup.attribute.y,
+                width: this.bottomFrozenGroup.attribute.width,
+                height: this.bottomFrozenGroup.attribute.height,
+                visible: this.bottomFrozenGroup.attribute.visible
+            });
+            this.rightTopCornerSelectGroup.setAttributes({
+                x: this.rightTopCornerGroup.attribute.x,
+                y: this.rightTopCornerGroup.attribute.y,
+                width: this.rightTopCornerGroup.attribute.width,
+                height: this.rightTopCornerGroup.attribute.height,
+                visible: this.rightTopCornerGroup.attribute.visible
+            });
+            this.leftBottomCornerSelectGroup.setAttributes({
+                x: this.leftBottomCornerGroup.attribute.x,
+                y: this.leftBottomCornerGroup.attribute.y,
+                width: this.leftBottomCornerGroup.attribute.width,
+                height: this.leftBottomCornerGroup.attribute.height,
+                visible: this.leftBottomCornerGroup.attribute.visible
+            });
+            this.rightBottomCornerSelectGroup.setAttributes({
+                x: this.rightBottomCornerGroup.attribute.x,
+                y: this.rightBottomCornerGroup.attribute.y,
+                width: this.rightBottomCornerGroup.attribute.width,
+                height: this.rightBottomCornerGroup.attribute.height,
+                visible: this.rightBottomCornerGroup.attribute.visible
+            });
+        }
+        getSelectOverlayGroup(selectRangeType) {
+            switch (selectRangeType) {
+                case 'body':
+                    return this.bodySelectGroup;
+                case 'rowHeader':
+                    return this.rowHeaderSelectGroup;
+                case 'bottomFrozen':
+                    return this.bottomFrozenSelectGroup;
+                case 'columnHeader':
+                    return this.colHeaderSelectGroup;
+                case 'rightFrozen':
+                    return this.rightFrozenSelectGroup;
+                case 'rightTopCorner':
+                    return this.rightTopCornerSelectGroup;
+                case 'leftBottomCorner':
+                    return this.leftBottomCornerSelectGroup;
+                case 'rightBottomCorner':
+                    return this.rightBottomCornerSelectGroup;
+                case 'cornerHeader':
+                default:
+                    return this.cornerHeaderSelectGroup;
+            }
+        }
         updateCellContentWhileResize(col, row) {
             const isVtableMerge = this.table.getCellRawRecord(col, row)?.vtableMerge;
             const type = isVtableMerge ? 'text' : this.table.getCellType(col, row);
@@ -62439,6 +62803,9 @@
         const startRow = Math.min(start_Row, end_Row);
         const endCol = Math.max(start_Col, end_Col);
         const endRow = Math.max(start_Row, end_Row);
+        const overlayGroup = scene.getSelectOverlayGroup(selectRangeType);
+        const offsetX = scene.tableGroup.attribute.x + (overlayGroup.attribute.x ?? 0);
+        const offsetY = scene.tableGroup.attribute.y + (overlayGroup.attribute.y ?? 0);
         const firstCellBound = scene.highPerformanceGetCell(startCol, startRow).globalAABBBounds;
         const rect = createRect({
             pickable: false,
@@ -62451,8 +62818,8 @@
                 }
                 return false;
             }),
-            x: firstCellBound.x1 - scene.tableGroup.attribute.x,
-            y: firstCellBound.y1 - scene.tableGroup.attribute.y,
+            x: firstCellBound.x1 - offsetX,
+            y: firstCellBound.y1 - offsetY,
             width: 0,
             height: 0,
             visible: true,
@@ -62462,23 +62829,7 @@
             rect,
             role: selectRangeType
         });
-        scene.tableGroup.insertAfter(rect, selectRangeType === 'body'
-            ? scene.bodyGroup
-            : selectRangeType === 'columnHeader'
-                ? scene.colHeaderGroup
-                : selectRangeType === 'rowHeader'
-                    ? scene.rowHeaderGroup
-                    : selectRangeType === 'cornerHeader'
-                        ? scene.cornerHeaderGroup
-                        : selectRangeType === 'rightTopCorner'
-                            ? scene.rightTopCornerGroup
-                            : selectRangeType === 'rightFrozen'
-                                ? scene.rightFrozenGroup
-                                : selectRangeType === 'leftBottomCorner'
-                                    ? scene.leftBottomCornerGroup
-                                    : selectRangeType === 'bottomFrozen'
-                                        ? scene.bottomFrozenGroup
-                                        : scene.rightBottomCornerGroup);
+        overlayGroup.addChild(rect);
     }
 
     function deletaCustomSelectRanges(state) {
@@ -62534,6 +62885,8 @@
             this.initState();
             this.updateVerticalScrollBar = this.updateVerticalScrollBar.bind(this);
             this.updateHorizontalScrollBar = this.updateHorizontalScrollBar.bind(this);
+            this.updateFrozenHorizontalScrollBar = this.updateFrozenHorizontalScrollBar.bind(this);
+            this.updateRightFrozenHorizontalScrollBar = this.updateRightFrozenHorizontalScrollBar.bind(this);
         }
         initState() {
             this._initState();
@@ -62681,7 +63034,9 @@
             };
             this.scroll = {
                 horizontalBarPos: 0,
-                verticalBarPos: 0
+                verticalBarPos: 0,
+                frozenHorizontalBarPos: 0,
+                rightFrozenHorizontalBarPos: 0
             };
             this.tablePosition = {
                 absoluteX: 0,
@@ -63099,7 +63454,13 @@
                 const frozenWidth = this.table.getColsWidth(0, originalFrozenColCount - 1);
                 const maxFrozenWidth = this.table._getMaxFrozenWidth();
                 if (frozenWidth > maxFrozenWidth) {
-                    if (this.table.internalProps.unfreezeAllOnExceedsMaxWidth) {
+                    if (this.table.options.scrollFrozenCols) {
+                        if (this.table.frozenColCount !== originalFrozenColCount) {
+                            this.table._setFrozenColCount(originalFrozenColCount);
+                            this.setFrozenCol(originalFrozenColCount);
+                        }
+                    }
+                    else if (this.table.internalProps.unfreezeAllOnExceedsMaxWidth) {
                         this.table._setFrozenColCount(0);
                         this.setFrozenCol(-1);
                     }
@@ -63113,11 +63474,69 @@
                     this.table._setFrozenColCount(originalFrozenColCount);
                     this.setFrozenCol(originalFrozenColCount);
                 }
+                if (!this.table.options.scrollFrozenCols || this.table.getFrozenColsOffset() === 0) {
+                    this.setFrozenColsScrollLeft(0, false);
+                }
+                else {
+                    this.setFrozenColsScrollLeft(this.scroll.frozenHorizontalBarPos, false);
+                }
+                if (!this.table.options.scrollRightFrozenCols || this.table.getRightFrozenColsOffset() === 0) {
+                    this.setRightFrozenColsScrollLeft(0, false);
+                }
+                else {
+                    this.setRightFrozenColsScrollLeft(this.scroll.rightFrozenHorizontalBarPos, false);
+                }
             }
             else {
                 this.clearFrozenObserver();
             }
         }
+        setFrozenColsScrollLeft(left, triggerRender = true) {
+            if (!this.table || !this.table.scenegraph) {
+                return;
+            }
+            const maxScrollLeft = this.table.getFrozenColsOffset();
+            left = Math.max(0, Math.min(left, maxScrollLeft));
+            left = Math.ceil(left);
+            if (this.scroll.frozenHorizontalBarPos === left) {
+                return;
+            }
+            this.scroll.frozenHorizontalBarPos = left;
+            const ratio = maxScrollLeft ? left / maxScrollLeft : 0;
+            this.table.scenegraph.component.updateFrozenHorizontalScrollBarPos(ratio);
+            triggerRender && this.table.scenegraph.setFrozenColsScrollLeft(left);
+        }
+        setRightFrozenColsScrollLeft(left, triggerRender = true) {
+            if (!this.table || !this.table.scenegraph) {
+                return;
+            }
+            const maxScrollLeft = this.table.getRightFrozenColsOffset();
+            left = Math.max(0, Math.min(left, maxScrollLeft));
+            left = Math.ceil(left);
+            if (this.scroll.rightFrozenHorizontalBarPos === left) {
+                return;
+            }
+            this.scroll.rightFrozenHorizontalBarPos = left;
+            const ratio = maxScrollLeft ? 1 - left / maxScrollLeft : 1;
+            this.table.scenegraph.component.updateRightFrozenHorizontalScrollBarPos(ratio);
+            triggerRender && this.table.scenegraph.setRightFrozenColsScrollLeft(left);
+        }
+        updateFrozenHorizontalScrollBar(xRatio) {
+            const maxScrollLeft = this.table.getFrozenColsOffset?.() ?? 0;
+            let left = Math.ceil(xRatio * maxScrollLeft);
+            if (!isValid$1(left) || isNaN(left)) {
+                left = 0;
+            }
+            this.setFrozenColsScrollLeft(left, true);
+        }
+        updateRightFrozenHorizontalScrollBar(xRatio) {
+            const maxScrollLeft = this.table.getRightFrozenColsOffset?.() ?? 0;
+            let left = Math.ceil((1 - xRatio) * maxScrollLeft);
+            if (!isValid$1(left) || isNaN(left)) {
+                left = 0;
+            }
+            this.setRightFrozenColsScrollLeft(left, true);
+        }
         clearFrozenObserver() {
             if (this._frozenObserver) {
                 this._frozenObserver.disconnect();
@@ -63219,7 +63638,10 @@
         updateHorizontalScrollBar(xRatio) {
             const totalWidth = this.table.getAllColsWidth();
             const oldHorizontalBarPos = this.scroll.horizontalBarPos;
-            let horizontalBarPos = Math.ceil(xRatio * (totalWidth - this.table.scenegraph.width));
+            const frozenOffset = this.table.getFrozenColsOffset?.() ?? 0;
+            const rightFrozenOffset = this.table.getRightFrozenColsOffset?.() ?? 0;
+            const scrollRange = Math.max(0, totalWidth - this.table.scenegraph.width - frozenOffset - rightFrozenOffset);
+            let horizontalBarPos = Math.ceil(xRatio * scrollRange);
             if (!isValid$1(horizontalBarPos) || isNaN(horizontalBarPos)) {
                 horizontalBarPos = 0;
             }
@@ -63237,7 +63659,7 @@
                 dx: dx
             });
             if (canScroll.some(value => value === false)) {
-                const xRatio = this.scroll.horizontalBarPos / (totalWidth - this.table.scenegraph.width);
+                const xRatio = scrollRange ? this.scroll.horizontalBarPos / scrollRange : 0;
                 this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio);
                 return;
             }
@@ -63329,12 +63751,14 @@
             }
             this.table.scrollLeft;
             const totalWidth = this.table.getAllColsWidth();
-            this.table.getFrozenColsWidth();
+            const frozenOffset = this.table.getFrozenColsOffset?.() ?? 0;
+            const rightFrozenOffset = this.table.getRightFrozenColsOffset?.() ?? 0;
+            const scrollRange = Math.max(0, totalWidth - this.table.scenegraph.width - frozenOffset - rightFrozenOffset);
             const sizeTolerance = this.table.options.customConfig?._disableColumnAndRowSizeRound ? 1 : 0;
-            left = Math.max(0, Math.min(left, totalWidth - this.table.scenegraph.width - sizeTolerance));
+            left = Math.max(0, Math.min(left, scrollRange - sizeTolerance));
             left = Math.ceil(left);
             const oldHorizontalBarPos = this.scroll.horizontalBarPos;
-            const xRatio = left / (totalWidth - this.table.scenegraph.width);
+            const xRatio = scrollRange ? left / scrollRange : 0;
             if ((oldHorizontalBarPos !== left || this.table.options?.customConfig?.scrollEventAlwaysTrigger === true) &&
                 triggerEvent) {
                 let horizontalBarPos = left;
@@ -63355,7 +63779,7 @@
                     dx
                 });
                 if (canScroll.some(value => value === false)) {
-                    const xRatio = this.scroll.horizontalBarPos / (totalWidth - this.table.scenegraph.width);
+                    const xRatio = scrollRange ? this.scroll.horizontalBarPos / scrollRange : 0;
                     this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio);
                     return;
                 }
@@ -63391,8 +63815,8 @@
         }
         showVerticalScrollBar(autoHide) {
             this.table.scenegraph.component.showVerticalScrollBar();
+            clearTimeout(this._clearVerticalScrollBar);
             if (autoHide) {
-                clearTimeout(this._clearVerticalScrollBar);
                 this._clearVerticalScrollBar = setTimeout(() => {
                     this.table.scenegraph?.component.hideVerticalScrollBar();
                 }, 1000);
@@ -63401,11 +63825,11 @@
         hideHorizontalScrollBar() {
             this.table.scenegraph.component.hideHorizontalScrollBar();
         }
-        showHorizontalScrollBar(autoHide) {
-            this.table.scenegraph.component.showHorizontalScrollBar();
+        showHorizontalScrollBar(autoHide, target = 'all') {
+            this.table.scenegraph.component.showHorizontalScrollBar(target);
             this.table.scenegraph?.component.showFrozenColumnShadow();
+            clearTimeout(this._clearHorizontalScrollBar);
             if (autoHide) {
-                clearTimeout(this._clearHorizontalScrollBar);
                 this._clearHorizontalScrollBar = setTimeout(() => {
                     this.table.scenegraph?.component.hideFrozenColumnShadow();
                     this.table.scenegraph?.component.hideHorizontalScrollBar();
@@ -63982,21 +64406,100 @@
                 state.updateInteractionState(InteractionState.scrolling);
             }
         }
-        const autoHide = state.table.options.theme?.scrollStyle?.visible === 'scrolling';
+        const visible1 = state.table.theme.scrollStyle?.visible;
+        const horizontalVisible = state.table.theme.scrollStyle?.horizontalVisible ?? visible1;
+        const verticalVisible = state.table.theme.scrollStyle?.verticalVisible ?? visible1;
+        const horizontalAutoHide = horizontalVisible === 'scrolling';
+        const verticalAutoHide = verticalVisible === 'scrolling';
+        let usedFrozenHorizontal = false;
+        let usedRightFrozenHorizontal = false;
+        let blockedFrozenHorizontal = false;
+        let blockedRightFrozenHorizontal = false;
         if (optimizedDeltaX) {
-            state.setScrollLeft(state.scroll.horizontalBarPos + optimizedDeltaX, event);
-            state.showHorizontalScrollBar(autoHide);
+            const pxEvent = event.x;
+            const pyEvent = event.y;
+            const pxFallback = state.table.eventManager?.LastBodyPointerXY?.x;
+            const pyFallback = state.table.eventManager?.LastBodyPointerXY?.y;
+            const px = typeof pxEvent === 'number' ? pxEvent : pxFallback;
+            const py = typeof pyEvent === 'number' ? pyEvent : pyFallback;
+            const relativeX = typeof px === 'number' ? px - state.table.tableX : NaN;
+            const relativeY = typeof py === 'number' ? py - state.table.tableY : NaN;
+            const isInTable = isFinite(relativeX) &&
+                isFinite(relativeY) &&
+                relativeX >= 0 &&
+                relativeY >= 0 &&
+                relativeX <= state.table.tableNoFrameWidth &&
+                relativeY <= state.table.tableNoFrameHeight;
+            const frozenColsScrollable = state.table.options.scrollFrozenCols && state.table.getFrozenColsOffset() > 0;
+            const rightFrozenColsScrollable = state.table.options.scrollRightFrozenCols && state.table.getRightFrozenColsOffset() > 0;
+            const isInFrozenViewport = isInTable && relativeX > 0 && relativeX < state.table.getFrozenColsWidth();
+            const isInRightFrozenViewport = isInTable && relativeX > state.table.tableNoFrameWidth - state.table.getRightFrozenColsWidth();
+            if (frozenColsScrollable && isInFrozenViewport) {
+                const maxFrozenScrollLeft = state.table.getFrozenColsOffset();
+                const nextFrozenScrollLeft = state.scroll.frozenHorizontalBarPos + optimizedDeltaX;
+                const canScrollFrozen = (optimizedDeltaX < 0 && state.scroll.frozenHorizontalBarPos > 0) ||
+                    (optimizedDeltaX > 0 && state.scroll.frozenHorizontalBarPos < maxFrozenScrollLeft);
+                if (canScrollFrozen) {
+                    state.setFrozenColsScrollLeft(nextFrozenScrollLeft);
+                    usedFrozenHorizontal = true;
+                    state.showHorizontalScrollBar(horizontalAutoHide, 'frozen');
+                }
+                else {
+                    if (state.table.options.scrollFrozenColsPassThroughToBody) {
+                        state.setScrollLeft(state.scroll.horizontalBarPos + optimizedDeltaX, event);
+                        state.showHorizontalScrollBar(horizontalAutoHide, 'body');
+                    }
+                    else {
+                        blockedFrozenHorizontal = true;
+                        state.showHorizontalScrollBar(horizontalAutoHide, 'frozen');
+                    }
+                }
+            }
+            else if (rightFrozenColsScrollable && isInRightFrozenViewport) {
+                const maxRightFrozenScrollLeft = state.table.getRightFrozenColsOffset();
+                const rightFrozenDelta = -optimizedDeltaX;
+                const nextRightFrozenScrollLeft = state.scroll.rightFrozenHorizontalBarPos + rightFrozenDelta;
+                const canScrollRightFrozen = (rightFrozenDelta < 0 && state.scroll.rightFrozenHorizontalBarPos > 0) ||
+                    (rightFrozenDelta > 0 && state.scroll.rightFrozenHorizontalBarPos < maxRightFrozenScrollLeft);
+                if (canScrollRightFrozen) {
+                    state.setRightFrozenColsScrollLeft(nextRightFrozenScrollLeft);
+                    usedRightFrozenHorizontal = true;
+                    state.showHorizontalScrollBar(horizontalAutoHide, 'rightFrozen');
+                }
+                else {
+                    if (state.table.options.scrollFrozenColsPassThroughToBody) {
+                        state.setScrollLeft(state.scroll.horizontalBarPos + optimizedDeltaX, event);
+                        state.showHorizontalScrollBar(horizontalAutoHide, 'body');
+                    }
+                    else {
+                        blockedRightFrozenHorizontal = true;
+                        state.showHorizontalScrollBar(horizontalAutoHide, 'rightFrozen');
+                    }
+                }
+            }
+            else {
+                state.setScrollLeft(state.scroll.horizontalBarPos + optimizedDeltaX, event);
+                state.showHorizontalScrollBar(horizontalAutoHide, 'body');
+            }
         }
         if (optimizedDeltaY) {
             state.setScrollTop(state.scroll.verticalBarPos + optimizedDeltaY, event);
-            state.showVerticalScrollBar(autoHide);
+            state.showVerticalScrollBar(verticalAutoHide);
         }
         isWheelEvent && state.resetInteractionState(state.interactionStateBeforeScroll);
         if (event.nativeEvent?.cancelable &&
             ((state.table.internalProps.overscrollBehavior === 'none' &&
                 ((deltaY && isVerticalExistScrollBar(state)) || (deltaX && isHorizontalExistScrollBar(state)))) ||
                 (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, state)) ||
-                (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, state)))) {
+                (Math.abs(deltaY) <= Math.abs(deltaX) &&
+                    deltaX !== 0 &&
+                    (blockedFrozenHorizontal || blockedRightFrozenHorizontal
+                        ? false
+                        : usedFrozenHorizontal
+                            ? state.table.getFrozenColsOffset() > 0
+                            : usedRightFrozenHorizontal
+                                ? state.table.getRightFrozenColsOffset() > 0
+                                : isHorizontalScrollable(deltaX, state))))) {
             event.nativeEvent.preventDefault();
         }
     }
@@ -64015,7 +64518,9 @@
         return !isScrollToTop(deltaY, state) && !isScrollToBottom(deltaY, state);
     }
     function isHorizontalScrollable(deltaX, state) {
-        const totalWidth = state.table.getAllColsWidth() - state.table.scenegraph.width;
+        const frozenOffset = state.table.getFrozenColsOffset?.() ?? 0;
+        const rightFrozenOffset = state.table.getRightFrozenColsOffset?.() ?? 0;
+        const totalWidth = state.table.getAllColsWidth() - state.table.scenegraph.width - frozenOffset - rightFrozenOffset;
         if (totalWidth === 0) {
             return false;
         }
@@ -64029,7 +64534,9 @@
         return true;
     }
     function isHorizontalExistScrollBar(state) {
-        const totalWidth = state.table.getAllColsWidth() - state.table.scenegraph.width;
+        const frozenOffset = state.table.getFrozenColsOffset?.() ?? 0;
+        const rightFrozenOffset = state.table.getRightFrozenColsOffset?.() ?? 0;
+        const totalWidth = state.table.getAllColsWidth() - state.table.scenegraph.width - frozenOffset - rightFrozenOffset;
         if (totalWidth <= 0) {
             return false;
         }
@@ -64045,12 +64552,16 @@
         return totalHeight !== 0 && deltaY >= 0 && Math.abs(state.scroll.verticalBarPos - totalHeight) < 1 + sizeTolerance;
     }
     function isScrollToLeft(deltaX, state) {
-        const totalWidth = state.table.getAllColsWidth() - state.table.scenegraph.width;
+        const frozenOffset = state.table.getFrozenColsOffset?.() ?? 0;
+        const rightFrozenOffset = state.table.getRightFrozenColsOffset?.() ?? 0;
+        const totalWidth = state.table.getAllColsWidth() - state.table.scenegraph.width - frozenOffset - rightFrozenOffset;
         return totalWidth !== 0 && deltaX <= 0 && state.scroll.horizontalBarPos < 1;
     }
     function isScrollToRight(deltaX, state) {
         const sizeTolerance = state.table.options.customConfig?._disableColumnAndRowSizeRound ? 1 : 0;
-        const totalWidth = state.table.getAllColsWidth() - state.table.scenegraph.width;
+        const frozenOffset = state.table.getFrozenColsOffset?.() ?? 0;
+        const rightFrozenOffset = state.table.getRightFrozenColsOffset?.() ?? 0;
+        const totalWidth = state.table.getAllColsWidth() - state.table.scenegraph.width - frozenOffset - rightFrozenOffset;
         return totalWidth !== 0 && deltaX >= 0 && Math.abs(state.scroll.horizontalBarPos - totalWidth) < 1 + sizeTolerance;
     }
     class InertiaScroll {
@@ -64156,6 +64667,7 @@
     function bindTableGroupListener(eventManager) {
         const table = eventManager.table;
         const stateManager = table.stateManager;
+        const getEventArgsSet = (e) => getCellEventArgsSetWithTable(e, table);
         table.scenegraph.tableGroup.addEventListener('pointermove', (e) => {
             const lastX = table.eventManager.LastPointerXY?.x ?? e.x;
             const lastY = table.eventManager.LastPointerXY?.y ?? e.y;
@@ -64164,7 +64676,7 @@
                 clearTimeout(eventManager.touchSetTimeout);
                 eventManager.touchSetTimeout = undefined;
             }
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getEventArgsSet(e);
             if (eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.MOUSEMOVE_TABLE)) {
                 table.fireListeners(TABLE_EVENT_TYPE.MOUSEMOVE_TABLE, {
                     col: eventArgsSet.eventArgs.col,
@@ -64268,16 +64780,31 @@
                     mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
                 });
             }
+            if ((table.theme.scrollStyle.horizontalVisible && table.theme.scrollStyle.horizontalVisible === 'focus') ||
+                (!table.theme.scrollStyle.horizontalVisible && table.theme.scrollStyle.visible === 'focus')) {
+                const relativeX = e.x - table.tableX;
+                const target = table.options.scrollFrozenCols &&
+                    table.getFrozenColsOffset?.() > 0 &&
+                    relativeX >= 0 &&
+                    relativeX < table.getFrozenColsWidth()
+                    ? 'frozen'
+                    : table.options.scrollRightFrozenCols &&
+                        table.getRightFrozenColsOffset?.() > 0 &&
+                        relativeX > table.tableNoFrameWidth - table.getRightFrozenColsWidth()
+                        ? 'rightFrozen'
+                        : 'body';
+                stateManager.showHorizontalScrollBar(false, target);
+            }
         });
         table.scenegraph.tableGroup.addEventListener('pointerout', (e) => {
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getEventArgsSet(e);
             const cellGoup = eventArgsSet?.eventArgs?.target;
             if (cellGoup?.role === 'table') {
                 eventManager.dealTableHover();
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointerover', (e) => {
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getEventArgsSet(e);
             const cellGoup = eventArgsSet?.eventArgs?.target;
             if (cellGoup &&
                 table.hasListeners(TABLE_EVENT_TYPE.MOUSEOVER_CHART_SYMBOL) &&
@@ -64308,7 +64835,18 @@
         table.scenegraph.tableGroup.addEventListener('pointerenter', (e) => {
             if ((table.theme.scrollStyle.horizontalVisible && table.theme.scrollStyle.horizontalVisible === 'focus') ||
                 (!table.theme.scrollStyle.horizontalVisible && table.theme.scrollStyle.visible === 'focus')) {
-                stateManager.showHorizontalScrollBar();
+                const relativeX = e.x - table.tableX;
+                const target = table.options.scrollFrozenCols &&
+                    table.getFrozenColsOffset?.() > 0 &&
+                    relativeX >= 0 &&
+                    relativeX < table.getFrozenColsWidth()
+                    ? 'frozen'
+                    : table.options.scrollRightFrozenCols &&
+                        table.getRightFrozenColsOffset?.() > 0 &&
+                        relativeX > table.tableNoFrameWidth - table.getRightFrozenColsWidth()
+                        ? 'rightFrozen'
+                        : 'body';
+                stateManager.showHorizontalScrollBar(false, target);
             }
             if ((table.theme.scrollStyle.verticalVisible && table.theme.scrollStyle.verticalVisible === 'focus') ||
                 (!table.theme.scrollStyle.verticalVisible && table.theme.scrollStyle.visible === 'focus')) {
@@ -64372,7 +64910,7 @@
             if (e.button !== 0) {
                 return;
             }
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getEventArgsSet(e);
             eventManager.downIcon = undefined;
             if (stateManager.interactionState !== InteractionState.default) {
                 return;
@@ -64471,7 +65009,7 @@
                     stateManager.updateInteractionState(InteractionState.grabing);
                 }
                 if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_CELL)) {
-                    const eventArgsSet = getCellEventArgsSet(e);
+                    const eventArgsSet = getEventArgsSet(e);
                     if (eventArgsSet.eventArgs) {
                         table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_CELL, {
                             col: eventArgsSet.eventArgs.col,
@@ -64505,7 +65043,7 @@
                     if (table.stateManager.isFillHandle()) {
                         table.stateManager.endFillSelect();
                     }
-                    const eventArgsSet = getCellEventArgsSet(e);
+                    const eventArgsSet = getEventArgsSet(e);
                     if (table.eventManager.isDraging &&
                         eventArgsSet.eventArgs &&
                         table.hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
@@ -64527,7 +65065,7 @@
                 stateManager.updateInteractionState(InteractionState.default);
             }
             if (!table.eventManager.isDraging) {
-                const eventArgsSet = getCellEventArgsSet(e);
+                const eventArgsSet = getEventArgsSet(e);
                 if (!eventManager.isTouchMove &&
                     e.button === 0 &&
                     eventArgsSet.eventArgs &&
@@ -64562,7 +65100,7 @@
                 }
             }
             if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEUP_CELL)) {
-                const eventArgsSet = getCellEventArgsSet(e);
+                const eventArgsSet = getEventArgsSet(e);
                 if (eventArgsSet.eventArgs) {
                     table.fireListeners(TABLE_EVENT_TYPE.MOUSEUP_CELL, {
                         col: eventArgsSet.eventArgs.col,
@@ -64582,7 +65120,7 @@
             }, 0);
         });
         table.scenegraph.tableGroup.addEventListener('rightdown', (e) => {
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getEventArgsSet(e);
             if (eventArgsSet.eventArgs) {
                 stateManager.triggerContextMenu(eventArgsSet.eventArgs.col, eventArgsSet.eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
                 const { col, row } = eventArgsSet.eventArgs;
@@ -64651,7 +65189,7 @@
             if (table.stateManager.columnResize.resizing) {
                 return;
             }
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getEventArgsSet(e);
             if (table.stateManager.columnResize.resizing || table.stateManager.columnMove.moving) {
                 return;
             }
@@ -64661,7 +65199,7 @@
             }
             if (eventManager.touchSetTimeout) {
                 if (e.pointerType === 'touch') {
-                    const eventArgsSet = getCellEventArgsSet(e);
+                    const eventArgsSet = getEventArgsSet(e);
                     if (eventManager.touchSetTimeout) {
                         clearTimeout(eventManager.touchSetTimeout);
                         const isHasSelected = !!stateManager.select.ranges?.length;
@@ -64673,7 +65211,7 @@
             }
         });
         table.scenegraph.stage.addEventListener('pointerdown', (e) => {
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getCellEventArgsSetWithTable(e, table);
             if (!eventArgsSet.eventArgs?.target ||
                 eventArgsSet.eventArgs?.target !== stateManager.residentHoverIcon?.icon) {
                 stateManager.hideMenu();
@@ -64750,7 +65288,7 @@
             }
         });
         table.scenegraph.stage.addEventListener('pointermove', (e) => {
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getCellEventArgsSetWithTable(e, table);
             const isEventFromCurrentTable = e.target?.isDescendantsOf?.(table.scenegraph.tableGroup) ?? false;
             if (!isEventFromCurrentTable) {
                 return;
@@ -64777,7 +65315,7 @@
             }
         });
         table.scenegraph.tableGroup.addEventListener('checkbox_state_change', (e) => {
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getEventArgsSet(e);
             const { col, row } = eventArgsSet.eventArgs;
             const cellInfo = table.getCellInfo(col, row);
             const mergeRange = getCellMergeInfo(table, col, row);
@@ -64829,7 +65367,7 @@
             table.scenegraph.updateNextFrame();
         });
         table.scenegraph.tableGroup.addEventListener('radio_checked', (e) => {
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getEventArgsSet(e);
             const { col, row, target } = eventArgsSet.eventArgs;
             const cellInfo = table.getCellInfo(col, row);
             const indexInCell = regIndexReg.exec(target.id)?.[1];
@@ -64901,7 +65439,7 @@
             table.scenegraph.updateNextFrame();
         });
         table.scenegraph.tableGroup.addEventListener('switch_state_change', (e) => {
-            const eventArgsSet = getCellEventArgsSet(e);
+            const eventArgsSet = getEventArgsSet(e);
             const { col, row, target } = eventArgsSet.eventArgs;
             const cellInfo = table.getCellInfo(col, row);
             const mergeRange = getCellMergeInfo(table, col, row);
@@ -64974,7 +65512,7 @@
         });
     }
     function dblclickHandler(e, table) {
-        const eventArgsSet = getCellEventArgsSet(e);
+        const eventArgsSet = getCellEventArgsSetWithTable(e, table);
         let col = -1;
         let row = -1;
         if (eventArgsSet.eventArgs) {
@@ -65019,23 +65557,72 @@
         const table = eventManager.table;
         const stateManager = table.stateManager;
         const scenegraph = table.scenegraph;
+        const visible1 = table.theme.scrollStyle?.visible;
+        const horizontalVisible = table.theme.scrollStyle?.horizontalVisible ?? visible1;
+        const verticalVisible = table.theme.scrollStyle?.verticalVisible ?? visible1;
         scenegraph.component.vScrollBar.addEventListener('pointerover', (e) => {
-            stateManager.showVerticalScrollBar();
+            if (verticalVisible === 'focus' || verticalVisible === 'scrolling') {
+                stateManager.showVerticalScrollBar();
+            }
         });
         scenegraph.component.hScrollBar.addEventListener('pointerover', (e) => {
-            stateManager.showHorizontalScrollBar();
+            if (horizontalVisible === 'focus' || horizontalVisible === 'scrolling') {
+                stateManager.showHorizontalScrollBar(false, 'body');
+            }
+        });
+        scenegraph.component.frozenHScrollBar.addEventListener('pointerover', (e) => {
+            if (horizontalVisible === 'focus' || horizontalVisible === 'scrolling') {
+                stateManager.showHorizontalScrollBar(false, 'frozen');
+            }
+        });
+        scenegraph.component.rightFrozenHScrollBar.addEventListener('pointerover', (e) => {
+            if (horizontalVisible === 'focus' || horizontalVisible === 'scrolling') {
+                stateManager.showHorizontalScrollBar(false, 'rightFrozen');
+            }
         });
         scenegraph.component.vScrollBar.addEventListener('pointerout', (e) => {
             if (stateManager.interactionState === InteractionState.scrolling) {
                 return;
             }
-            stateManager.hideVerticalScrollBar();
+            if (verticalVisible === 'focus') {
+                stateManager.hideVerticalScrollBar();
+            }
+            else if (verticalVisible === 'scrolling') {
+                stateManager.showVerticalScrollBar(true);
+            }
         });
         scenegraph.component.hScrollBar.addEventListener('pointerout', (e) => {
             if (stateManager.interactionState === InteractionState.scrolling) {
                 return;
             }
-            stateManager.hideHorizontalScrollBar();
+            if (horizontalVisible === 'focus') {
+                stateManager.hideHorizontalScrollBar();
+            }
+            else if (horizontalVisible === 'scrolling') {
+                stateManager.showHorizontalScrollBar(true, 'body');
+            }
+        });
+        scenegraph.component.frozenHScrollBar.addEventListener('pointerout', (e) => {
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                return;
+            }
+            if (horizontalVisible === 'focus') {
+                stateManager.hideHorizontalScrollBar();
+            }
+            else if (horizontalVisible === 'scrolling') {
+                stateManager.showHorizontalScrollBar(true, 'frozen');
+            }
+        });
+        scenegraph.component.rightFrozenHScrollBar.addEventListener('pointerout', (e) => {
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                return;
+            }
+            if (horizontalVisible === 'focus') {
+                stateManager.hideHorizontalScrollBar();
+            }
+            else if (horizontalVisible === 'scrolling') {
+                stateManager.showHorizontalScrollBar(true, 'rightFrozen');
+            }
         });
         scenegraph.component.vScrollBar.addEventListener('pointermove', (e) => {
             scenegraph.table.stateManager.updateCursor('default');
@@ -65083,6 +65670,14 @@
             scenegraph.table.stateManager.updateCursor();
             e.stopPropagation();
         });
+        scenegraph.component.frozenHScrollBar.addEventListener('pointermove', (e) => {
+            scenegraph.table.stateManager.updateCursor();
+            e.stopPropagation();
+        });
+        scenegraph.component.rightFrozenHScrollBar.addEventListener('pointermove', (e) => {
+            scenegraph.table.stateManager.updateCursor();
+            e.stopPropagation();
+        });
         scenegraph.component.hScrollBar.addEventListener('pointerdown', (e) => {
             e.stopPropagation();
             if (scenegraph.table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE)) {
@@ -65091,6 +65686,22 @@
                 });
             }
         });
+        scenegraph.component.frozenHScrollBar.addEventListener('pointerdown', (e) => {
+            e.stopPropagation();
+            if (scenegraph.table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE)) {
+                scenegraph.table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
+                    event: e.nativeEvent
+                });
+            }
+        });
+        scenegraph.component.rightFrozenHScrollBar.addEventListener('pointerdown', (e) => {
+            e.stopPropagation();
+            if (scenegraph.table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE)) {
+                scenegraph.table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
+                    event: e.nativeEvent
+                });
+            }
+        });
         scenegraph.component.hScrollBar.addEventListener('scrollDown', (e) => {
             scenegraph.table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
             scenegraph.table.eventManager.isDown = true;
@@ -65105,6 +65716,34 @@
                 });
             }
         });
+        scenegraph.component.frozenHScrollBar.addEventListener('scrollDown', (e) => {
+            scenegraph.table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
+            scenegraph.table.eventManager.isDown = true;
+            if (stateManager.interactionState !== InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.scrolling);
+            }
+            scenegraph.table.stateManager.hideMenu();
+            scenegraph.table.editorManager?.completeEdit();
+            if (scenegraph.table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE)) {
+                scenegraph.table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
+                    event: e.nativeEvent
+                });
+            }
+        });
+        scenegraph.component.rightFrozenHScrollBar.addEventListener('scrollDown', (e) => {
+            scenegraph.table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
+            scenegraph.table.eventManager.isDown = true;
+            if (stateManager.interactionState !== InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.scrolling);
+            }
+            scenegraph.table.stateManager.hideMenu();
+            scenegraph.table.editorManager?.completeEdit();
+            if (scenegraph.table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE)) {
+                scenegraph.table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
+                    event: e.nativeEvent
+                });
+            }
+        });
         scenegraph.component.hScrollBar.addEventListener('pointerup', () => {
             stateManager.fastScrolling = false;
             scenegraph.table.eventManager.isDraging = false;
@@ -65121,8 +65760,42 @@
         scenegraph.component.hScrollBar.addEventListener('scrollUp', (e) => {
             scenegraph.table.eventManager.isDraging = false;
         });
+        scenegraph.component.frozenHScrollBar.addEventListener('pointerup', () => {
+            stateManager.fastScrolling = false;
+            scenegraph.table.eventManager.isDraging = false;
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.default);
+            }
+        });
+        scenegraph.component.frozenHScrollBar.addEventListener('pointerupoutside', () => {
+            stateManager.fastScrolling = false;
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.default);
+            }
+        });
+        scenegraph.component.frozenHScrollBar.addEventListener('scrollUp', (e) => {
+            scenegraph.table.eventManager.isDraging = false;
+        });
+        scenegraph.component.rightFrozenHScrollBar.addEventListener('pointerup', () => {
+            stateManager.fastScrolling = false;
+            scenegraph.table.eventManager.isDraging = false;
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.default);
+            }
+        });
+        scenegraph.component.rightFrozenHScrollBar.addEventListener('pointerupoutside', () => {
+            stateManager.fastScrolling = false;
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.default);
+            }
+        });
+        scenegraph.component.rightFrozenHScrollBar.addEventListener('scrollUp', (e) => {
+            scenegraph.table.eventManager.isDraging = false;
+        });
         const throttleVerticalWheel = throttle(stateManager.updateVerticalScrollBar, 20);
         const throttleHorizontalWheel = throttle(stateManager.updateHorizontalScrollBar, 20);
+        const throttleFrozenHorizontalWheel = throttle(stateManager.updateFrozenHorizontalScrollBar, 20);
+        const throttleRightFrozenHorizontalWheel = throttle(stateManager.updateRightFrozenHorizontalScrollBar, 20);
         scenegraph.component.vScrollBar.addEventListener('scrollDrag', (e) => {
             if (scenegraph.table.eventManager.isDown) {
                 scenegraph.table.eventManager.isDraging = true;
@@ -65151,6 +65824,34 @@
             const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
             throttleHorizontalWheel(ratio);
         });
+        scenegraph.component.frozenHScrollBar.addEventListener('scrollDrag', (e) => {
+            if (scenegraph.table.eventManager.isDown) {
+                scenegraph.table.eventManager.isDraging = true;
+            }
+            stateManager.fastScrolling = true;
+            if (stateManager.interactionState !== InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.scrolling);
+            }
+            scenegraph.table.stateManager.hideMenu();
+            scenegraph.table.editorManager?.completeEdit();
+            table.scenegraph.deactivateChart(-1, -1, true);
+            const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
+            throttleFrozenHorizontalWheel(ratio);
+        });
+        scenegraph.component.rightFrozenHScrollBar.addEventListener('scrollDrag', (e) => {
+            if (scenegraph.table.eventManager.isDown) {
+                scenegraph.table.eventManager.isDraging = true;
+            }
+            stateManager.fastScrolling = true;
+            if (stateManager.interactionState !== InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.scrolling);
+            }
+            scenegraph.table.stateManager.hideMenu();
+            scenegraph.table.editorManager?.completeEdit();
+            table.scenegraph.deactivateChart(-1, -1, true);
+            const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
+            throttleRightFrozenHorizontalWheel(ratio);
+        });
     }
 
     let defaultPixelRatio = 1;
@@ -65632,6 +66333,7 @@
                         handleWhell({ deltaX: -dx, deltaY: -dy }, table.stateManager, false);
                         let selectX;
                         let selectY;
+                        const frozenOffset = table.getFrozenColsOffset?.() ?? 0;
                         if (bottom) {
                             selectY = table.scrollTop + drawRange.height - bottomFrozenRowHeight - 20;
                         }
@@ -65639,10 +66341,10 @@
                             selectY = table.scrollTop + topFrozenRowHeight + 20;
                         }
                         if (right) {
-                            selectX = table.scrollLeft + drawRange.width - rightFrozenColsWidth - 20;
+                            selectX = table.scrollLeft + frozenOffset + drawRange.width - rightFrozenColsWidth - 20;
                         }
                         else if (left) {
-                            selectX = table.scrollLeft + leftFrozenColsWidth + 20;
+                            selectX = table.scrollLeft + frozenOffset + leftFrozenColsWidth + 20;
                         }
                         let considerFrozenY = false;
                         let considerFrozenX = false;
@@ -65653,7 +66355,7 @@
                                 considerFrozenX = true;
                             }
                             else {
-                                selectX = table.scrollLeft + x;
+                                selectX = table.scrollLeft + frozenOffset + x;
                             }
                         }
                         if (!bottom && !top) {
@@ -70339,10 +71041,12 @@
             return { left: 0, col: 0, right: 0, width: 0 };
         }
         absoluteX = absoluteX - _this.tableX;
+        const rightFrozenScrollLeft = _this.getRightFrozenColsScrollLeft?.() ?? 0;
         if (isConsider &&
             absoluteX > _this.tableNoFrameWidth - _this.getRightFrozenColsWidth() &&
             absoluteX < _this.tableNoFrameWidth &&
             absoluteX <= _this.getAllColsWidth()) {
+            absoluteX -= rightFrozenScrollLeft;
             for (let i = 0; i < _this.rightFrozenColCount; i++) {
                 if (absoluteX > _this.tableNoFrameWidth - _this.getColsWidth(_this.colCount - i - 1, _this.colCount - 1)) {
                     return {
@@ -70407,12 +71111,15 @@
     function getCellAtRelativePosition(x, y, _this) {
         x -= _this.tableX;
         y -= _this.tableY;
+        const frozenColsWidth = _this.getFrozenColsWidth();
+        const frozenColsOffset = _this.getFrozenColsOffset?.() ?? 0;
+        const frozenColsScrollLeft = _this.getFrozenColsScrollLeft?.() ?? 0;
         let topFrozen = false;
         if (y > 0 && y < _this.getFrozenRowsHeight()) {
             topFrozen = true;
         }
         let leftFrozen = false;
-        if (x > 0 && x < _this.getFrozenColsWidth()) {
+        if (x > 0 && x < frozenColsWidth) {
             leftFrozen = true;
         }
         let bottomFrozen = false;
@@ -70427,7 +71134,7 @@
             x <= _this.getAllColsWidth()) {
             rightFrozen = true;
         }
-        const colInfo = getTargetColAtConsiderRightFrozen((leftFrozen || rightFrozen ? x : x + _this.scrollLeft) + _this.tableX, rightFrozen, _this);
+        const colInfo = getTargetColAtConsiderRightFrozen((leftFrozen ? x + frozenColsScrollLeft : rightFrozen ? x : x + _this.scrollLeft + frozenColsOffset) + _this.tableX, rightFrozen, _this);
         const rowInfo = getTargetRowAtConsiderBottomFrozen((topFrozen || bottomFrozen ? y : y + _this.scrollTop) + _this.tableY, bottomFrozen, _this);
         if (colInfo && rowInfo) {
             const { row, top, bottom, height } = rowInfo;
@@ -70450,8 +71157,11 @@
     }
     function getColAtRelativePosition(x, _this) {
         x -= _this.tableX;
+        const frozenColsWidth = _this.getFrozenColsWidth();
+        const frozenColsOffset = _this.getFrozenColsOffset?.() ?? 0;
+        const frozenColsScrollLeft = _this.getFrozenColsScrollLeft?.() ?? 0;
         let leftFrozen = false;
-        if (x > 0 && x < _this.getFrozenColsWidth()) {
+        if (x > 0 && x < frozenColsWidth) {
             leftFrozen = true;
         }
         let rightFrozen = false;
@@ -70460,7 +71170,7 @@
             x <= _this.getAllColsWidth()) {
             rightFrozen = true;
         }
-        const colInfo = getTargetColAtConsiderRightFrozen((leftFrozen || rightFrozen ? x : x + _this.scrollLeft) + _this.tableX, rightFrozen, _this);
+        const colInfo = getTargetColAtConsiderRightFrozen((leftFrozen ? x + frozenColsScrollLeft : rightFrozen ? x : x + _this.scrollLeft + frozenColsOffset) + _this.tableX, rightFrozen, _this);
         if (colInfo) {
             const { col } = colInfo;
             return col;
@@ -71130,7 +71840,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.24.0";
+        version = "1.25.1-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -71148,6 +71858,20 @@
         rotateDegree;
         constructor(container, options = {}) {
             super();
+            if (typeof window !== 'undefined') {
+                const g = window;
+                g[this.id] = this;
+                const registry = g.__vtable__ ||
+                    (g.__vtable__ = {
+                        byId: Object.create(null),
+                        list: [],
+                        last: null
+                    });
+                registry.byId[this.id] = this;
+                registry.list.push(this);
+                registry.last = this;
+                g.__vtable_last_id__ = this.id;
+            }
             if (Env.mode === 'node') {
                 options = container;
                 container = null;
@@ -71233,6 +71957,12 @@
                 internalProps.focusControl = new FocusInput(this, internalProps.element);
                 internalProps.canvas = this.options.canvas;
                 internalProps.context = internalProps.canvas.getContext('2d');
+                internalProps.canvas.__vtable__ = this;
+                internalProps.canvas.__vtable_id__ = this.id;
+                if (internalProps.element) {
+                    internalProps.element.__vtable__ = this;
+                    internalProps.element.__vtable_id__ = this.id;
+                }
             }
             else if (Env.mode !== 'node') {
                 internalProps.element = createRootElement(this.padding);
@@ -71240,6 +71970,10 @@
                 internalProps.canvas = document.createElement('canvas');
                 internalProps.element.appendChild(internalProps.canvas);
                 internalProps.context = internalProps.canvas.getContext('2d');
+                internalProps.canvas.__vtable__ = this;
+                internalProps.canvas.__vtable_id__ = this.id;
+                internalProps.element.__vtable__ = this;
+                internalProps.element.__vtable_id__ = this.id;
                 if (options.customConfig?.createReactContainer) {
                     createReactContainer(this);
                 }
@@ -71521,7 +72255,7 @@
             this.internalProps.frozenColCount = frozenColCount;
             this.options.frozenColCount = frozenColCount;
             const maxFrozenWidth = this._getMaxFrozenWidth();
-            if (this.getColsWidth(0, frozenColCount - 1) > maxFrozenWidth) {
+            if (!this.options.scrollFrozenCols && this.getColsWidth(0, frozenColCount - 1) > maxFrozenWidth) {
                 if (this.internalProps.unfreezeAllOnExceedsMaxWidth) {
                     this.internalProps.frozenColCount = 0;
                 }
@@ -71539,7 +72273,7 @@
             this.internalProps.frozenColCount = frozenColCount;
             this.options.frozenColCount = frozenColCount;
             const maxFrozenWidth = this._getMaxFrozenWidth();
-            if (this.getColsWidth(0, frozenColCount - 1) > maxFrozenWidth) {
+            if (!this.options.scrollFrozenCols && this.getColsWidth(0, frozenColCount - 1) > maxFrozenWidth) {
                 if (this.internalProps.unfreezeAllOnExceedsMaxWidth) {
                     this.internalProps.frozenColCount = 0;
                 }
@@ -71729,6 +72463,10 @@
             const maxFrozenWidth = this.options.maxFrozenWidth ?? '80%';
             return _toPxWidth(this, maxFrozenWidth);
         }
+        _getMaxRightFrozenWidth() {
+            const maxRightFrozenWidth = this.options.maxRightFrozenWidth ?? this.options.maxFrozenWidth ?? '80%';
+            return _toPxWidth(this, maxRightFrozenWidth);
+        }
         _getComputedFrozenColCount(frozenColCount) {
             const maxFrozenWidth = this._getMaxFrozenWidth();
             let computedfrozenColCount = frozenColCount;
@@ -72374,7 +73112,11 @@
                 relativeY = false;
             }
             const cellRect = this.getCellRect(col, row);
-            return this._toRelativeRect(cellRect, relativeX, relativeY);
+            const rect = this._toRelativeRect(cellRect, relativeX, relativeY);
+            if (isFrozenCell?.col && !this.isRightFrozenColumn(col, row)) {
+                rect.offsetLeft(-this.getFrozenColsScrollLeft());
+            }
+            return rect;
         }
         getCellRangeRelativeRect(range) {
             if (range.start) {
@@ -72391,7 +73133,11 @@
                 else if (isFrozenCell?.row) {
                     relativeY = false;
                 }
-                return this._toRelativeRect(this.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row), relativeX, relativeY);
+                const rect = this._toRelativeRect(this.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row), relativeX, relativeY);
+                if (isFrozenCell?.col && !this.isRightFrozenColumn(range.start.col, range.start.row)) {
+                    rect.offsetLeft(-this.getFrozenColsScrollLeft());
+                }
+                return rect;
             }
             const cellRange = this.getCellRange(range.col, range.row);
             const isFrozenCell = this.isFrozenCell(range.col, range.row);
@@ -72407,7 +73153,11 @@
             else if (isFrozenCell?.row) {
                 relativeY = false;
             }
-            return this._toRelativeRect(this.getCellsRect(cellRange.start.col, cellRange.start.row, cellRange.end.col, cellRange.end.row), relativeX, relativeY);
+            const rect = this._toRelativeRect(this.getCellsRect(cellRange.start.col, cellRange.start.row, cellRange.end.col, cellRange.end.row), relativeX, relativeY);
+            if (isFrozenCell?.col && !this.isRightFrozenColumn(range.col, range.row)) {
+                rect.offsetLeft(-this.getFrozenColsScrollLeft());
+            }
+            return rect;
         }
         getVisibleCellRangeRelativeRect(range) {
             let cellRange;
@@ -72591,7 +73341,7 @@
             const { scrollTop, scrollLeft } = this;
             const width = this.tableNoFrameWidth;
             const height = this.tableNoFrameHeight;
-            return new Rect$1(scrollLeft, scrollTop, width, height);
+            return new Rect$1(scrollLeft + this.getFrozenColsOffset(), scrollTop, width, height);
         }
         get visibleRowCount() {
             const { frozenRowCount } = this;
@@ -72619,16 +73369,17 @@
         getBodyVisibleCellRange() {
             const { scrollTop, scrollLeft } = this;
             const frozenRowsHeight = this.getFrozenRowsHeight();
-            const frozenColsWidth = this.getFrozenColsWidth();
+            const frozenColsContentWidth = this.getFrozenColsContentWidth();
+            const frozenColsOffset = this.getFrozenColsOffset();
             const bottomFrozenRowsHeight = this.getBottomFrozenRowsHeight();
             const rightFrozenColsWidth = this.getRightFrozenColsWidth();
             const { row: rowStart } = this.getRowAt(scrollTop + frozenRowsHeight + 1);
-            const { col: colStart } = this.getColAt(scrollLeft + frozenColsWidth + 1);
+            const { col: colStart } = this.getColAt(scrollLeft + frozenColsContentWidth + 1);
             const rowEnd = this.getAllRowsHeight() > this.tableNoFrameHeight
                 ? this.getRowAt(scrollTop + this.tableNoFrameHeight - 1 - bottomFrozenRowsHeight).row
                 : this.rowCount - 1;
             const colEnd = this.getAllColsWidth() > this.tableNoFrameWidth
-                ? this.getColAt(scrollLeft + this.tableNoFrameWidth - 1 - rightFrozenColsWidth).col
+                ? this.getColAt(scrollLeft + frozenColsOffset + this.tableNoFrameWidth - 1 - rightFrozenColsWidth).col
                 : this.colCount - 1;
             if (colEnd < 0 || rowEnd < 0) {
                 return null;
@@ -72650,11 +73401,13 @@
         }
         getBodyVisibleColRange(start_deltaX = 0, end_deltaX = 0) {
             const { scrollLeft } = this;
-            const frozenColsWidth = this.getFrozenColsWidth();
+            const frozenColsContentWidth = this.getFrozenColsContentWidth();
+            const frozenColsOffset = this.getFrozenColsOffset();
             const rightFrozenColsWidth = this.getRightFrozenColsWidth();
-            const { col: colStart } = this.getColAt(scrollLeft + frozenColsWidth + 1 + start_deltaX);
+            const { col: colStart } = this.getColAt(scrollLeft + frozenColsContentWidth + 1 + start_deltaX);
             const colEnd = this.getAllColsWidth() > this.tableNoFrameWidth
-                ? this.getColAt(scrollLeft + this.tableNoFrameWidth - 1 - rightFrozenColsWidth + end_deltaX).col
+                ? this.getColAt(scrollLeft + frozenColsOffset + this.tableNoFrameWidth - 1 - rightFrozenColsWidth + end_deltaX)
+                    .col
                 : this.colCount - 1;
             if (colEnd < 0) {
                 return null;
@@ -72664,7 +73417,7 @@
         get visibleColCount() {
             const { frozenColCount } = this;
             const visibleRect = this.getVisibleRect();
-            const visibleLeft = frozenColCount > 0 ? visibleRect.left + this.getColsWidth(0, frozenColCount - 1) : visibleRect.left;
+            const visibleLeft = frozenColCount > 0 ? visibleRect.left + this.getFrozenColsWidth() : visibleRect.left;
             const initCol = this.getTargetColAt(visibleLeft);
             if (!initCol) {
                 return 0;
@@ -72728,14 +73481,51 @@
             }
         }
         release() {
+            if (typeof window !== 'undefined') {
+                const g = window;
+                if (g?.[this.id] === this) {
+                    delete g[this.id];
+                }
+                else if (g?.[this.id]) {
+                    g[this.id] = null;
+                }
+                const registry = g?.__vtable__;
+                if (registry?.byId?.[this.id] === this) {
+                    delete registry.byId[this.id];
+                }
+                const list = registry?.list;
+                if (Array.isArray(list) && list.length) {
+                    for (let i = list.length - 1; i >= 0; i--) {
+                        if (list[i] === this) {
+                            list.splice(i, 1);
+                        }
+                    }
+                }
+                if (registry?.last === this) {
+                    registry.last = Array.isArray(list) && list.length ? list[list.length - 1] : null;
+                }
+                if (g?.__vtable_last_id__ === this.id) {
+                    g.__vtable_last_id__ = registry?.last?.id ?? null;
+                }
+            }
+            if (this.isReleased) {
+                return;
+            }
             this.scenegraph?.component?.vScrollBar?.release();
             this.scenegraph?.component?.hScrollBar?.release();
             this.animationManager.clear();
             this.animationManager.ticker.release();
             this.scenegraph?.stage?.ticker?.release();
             const internalProps = this.internalProps;
-            if (this.isReleased) {
-                return;
+            const canvas = internalProps?.canvas;
+            if (canvas?.__vtable__ === this) {
+                delete canvas.__vtable__;
+                delete canvas.__vtable_id__;
+            }
+            const element = internalProps?.element;
+            if (element?.__vtable__ === this) {
+                delete element.__vtable__;
+                delete element.__vtable_id__;
             }
             this.clearCorrectTimer();
             internalProps.tooltipHandler?.release?.();
@@ -72981,8 +73771,23 @@
             return height;
         }
         getFrozenColsWidth() {
-            const w = this.getColsWidth(0, this.frozenColCount - 1);
-            return w;
+            const contentWidth = this.getFrozenColsContentWidth();
+            if (!this.options.scrollFrozenCols) {
+                return contentWidth;
+            }
+            const maxFrozenWidth = this._getMaxFrozenWidth();
+            return Math.min(contentWidth, maxFrozenWidth);
+        }
+        getFrozenColsContentWidth() {
+            return this.getColsWidth(0, this.frozenColCount - 1);
+        }
+        getFrozenColsOffset() {
+            const contentWidth = this.getFrozenColsContentWidth();
+            const viewportWidth = this.getFrozenColsWidth();
+            return Math.max(0, contentWidth - viewportWidth);
+        }
+        getFrozenColsScrollLeft() {
+            return this.stateManager.scroll.frozenHorizontalBarPos ?? 0;
         }
         getBottomFrozenRowsHeight() {
             if (this.bottomFrozenRowCount > 0) {
@@ -72995,6 +73800,14 @@
             return 0;
         }
         getRightFrozenColsWidth() {
+            const contentWidth = this.getRightFrozenColsContentWidth();
+            if (!this.options.scrollRightFrozenCols) {
+                return contentWidth;
+            }
+            const maxRightFrozenWidth = this._getMaxRightFrozenWidth();
+            return Math.min(contentWidth, maxRightFrozenWidth);
+        }
+        getRightFrozenColsContentWidth() {
             if (this.rightFrozenColCount > 0) {
                 let width = 0;
                 for (let col = this.colCount - this.rightFrozenColCount; col <= this.colCount - 1; col++) {
@@ -73004,6 +73817,14 @@
             }
             return 0;
         }
+        getRightFrozenColsOffset() {
+            const contentWidth = this.getRightFrozenColsContentWidth();
+            const viewportWidth = this.getRightFrozenColsWidth();
+            return Math.max(0, contentWidth - viewportWidth);
+        }
+        getRightFrozenColsScrollLeft() {
+            return this.stateManager.scroll.rightFrozenHorizontalBarPos ?? 0;
+        }
         getDrawRange() {
             const width = this.containerFit?.width
                 ? this.tableNoFrameWidth
@@ -95491,7 +96312,7 @@
     }
 
     registerForVrender();
-    const version = "1.24.0";
+    const version = "1.25.1-alpha.0";
     function getIcons() {
         return get$2();
     }