@visactor/vtable 0.22.1 → 0.22.2-alpha.0

package/dist/vtable.js

@@ -21687,6 +21687,7 @@
         _padding;
         _defaultPadding = [10, 16, 10, 16];
         _textStick;
+        _textStickBaseOnAlign;
         _textOverflow;
         _textAlign;
         _textBaseline;
@@ -21725,6 +21726,7 @@
             this._borderColor = style?.borderColor ?? bodyStyle?.borderColor;
             this._textOverflow = style?.textOverflow ?? bodyStyle?.textOverflow;
             this._textStick = style.textStick ?? bodyStyle?.textStick ?? false;
+            this._textStickBaseOnAlign = style.textStickBaseOnAlign ?? bodyStyle?.textStickBaseOnAlign ?? false;
             this._bgColor = style?.bgColor ?? bodyStyle?.bgColor;
             this._lineHeight = style?.lineHeight ?? bodyStyle?.lineHeight;
             this._underline = style?.underline ?? bodyStyle?.underline;
@@ -21806,6 +21808,12 @@
         set textStick(textStick) {
             this._textStick = textStick;
         }
+        get textStickBaseOnAlign() {
+            return this._textStickBaseOnAlign;
+        }
+        set textStickBaseOnAlign(textStickBaseOnAlign) {
+            this._textStickBaseOnAlign = textStickBaseOnAlign;
+        }
         get textAlign() {
             return this._textAlign;
         }
@@ -22089,6 +22097,7 @@
         _padding;
         _defaultPadding = [10, 16, 10, 16];
         _textStick;
+        _textStickBaseOnAlign;
         _marked;
         _textAlign;
         _textBaseline;
@@ -22122,6 +22131,7 @@
             this._fontStyle = style.fontStyle ?? headerStyle?.fontStyle;
             this._textOverflow = (style.textOverflow ?? headerStyle?.textOverflow) || 'ellipsis';
             this._textStick = style.textStick ?? headerStyle?.textStick ?? false;
+            this._textStickBaseOnAlign = style.textStickBaseOnAlign ?? headerStyle?.textStickBaseOnAlign ?? false;
             this._marked = style.marked ?? headerStyle?.marked ?? false;
             this._textAlign = (style.textAlign ?? headerStyle?.textAlign) || 'left';
             this._textBaseline = (style.textBaseline ?? headerStyle?.textBaseline) || 'middle';
@@ -22207,6 +22217,12 @@
         set textStick(textStick) {
             this._textStick = textStick;
         }
+        get textStickBaseOnAlign() {
+            return this._textStickBaseOnAlign;
+        }
+        set textStickBaseOnAlign(textStickBaseOnAlign) {
+            this._textStickBaseOnAlign = textStickBaseOnAlign;
+        }
         get marked() {
             return this._marked;
         }
@@ -36459,9 +36475,13 @@
         const height = table.getRowHeight(row);
         let contentWidth = width;
         let contentHeight = height;
+        let _contentOffset = 0;
+        if (isNumber$4(table.theme._contentOffset)) {
+            _contentOffset = table.theme._contentOffset;
+        }
         const percentCompleteBarGroup = new Group$1({
-            x: 0,
-            y: 0,
+            x: -_contentOffset,
+            y: -_contentOffset,
             width: contentWidth,
             height: contentHeight
         });
@@ -37790,7 +37810,7 @@
         }
         iconAttribute.marginLeft = (icon.marginLeft ?? 0) + hierarchyOffset;
         iconAttribute.marginRight = icon.marginRight ?? 0;
-        if (icon.interactive) {
+        if (icon.interactive === false) {
             iconAttribute.pickable = false;
         }
         if (icon.hover) {
@@ -38693,7 +38713,7 @@
                 });
             }
         });
-        const lineWidth = cellGroup.attribute.lineWidth;
+        const lineWidth = cellGroup.attribute.strokeArrayWidth ?? cellGroup.attribute.lineWidth;
         const isLineWidthArray = isArray$3(lineWidth);
         const newLineWidth = [0, 0, 0, 0];
         if (col === range.start.col) {
@@ -39912,7 +39932,7 @@
         }
     }
     function computeRowHeight(row, startCol, endCol, table) {
-        let maxHeight = 0;
+        let maxHeight;
         if (table.isPivotChart() &&
             row >= table.columnHeaderLevelCount &&
             row < table.rowCount - table.bottomFrozenRowCount) {
@@ -39932,7 +39952,7 @@
         for (let col = startCol; col <= endCol; col++) {
             const customHeight = computeCustomRenderHeight(col, row, table);
             if (customHeight) {
-                maxHeight = Math.max(customHeight.height, maxHeight);
+                maxHeight = isValid$3(maxHeight) ? Math.max(customHeight.height, maxHeight) : customHeight.height;
                 if (!customHeight.renderDefault) {
                     continue;
                 }
@@ -39943,7 +39963,7 @@
                 if (axisConfig) {
                     const axisWidth = computeAxisComponentHeight(axisConfig, table);
                     if (typeof axisWidth === 'number') {
-                        maxHeight = Math.max(axisWidth, maxHeight);
+                        maxHeight = isValid$3(maxHeight) ? Math.max(axisWidth, maxHeight) : axisWidth;
                         continue;
                     }
                 }
@@ -39956,19 +39976,14 @@
             const cellType = table.isHeader(col, row)
                 ? table._getHeaderLayoutMap(col, row)?.headerType
                 : table.getBodyColumnType(col, row);
-            if (isValid$3(cellType) &&
-                cellType !== 'text' &&
-                cellType !== 'link' &&
-                cellType !== 'progressbar' &&
-                cellType !== 'checkbox') {
-                const defaultHeight = table.getDefaultRowHeight(row);
-                maxHeight = Math.max(maxHeight, isNumber$4(defaultHeight) ? defaultHeight : table.defaultRowHeight);
-                continue;
-            }
             const textHeight = computeTextHeight(col, row, cellType, table);
-            maxHeight = Math.max(textHeight, maxHeight);
+            maxHeight = isValid$3(maxHeight) ? Math.max(textHeight, maxHeight) : textHeight;
         }
-        return maxHeight;
+        if (isValid$3(maxHeight)) {
+            return maxHeight;
+        }
+        const defaultHeight = table.getDefaultRowHeight(row);
+        return isNumber$4(defaultHeight) ? defaultHeight : table.defaultRowHeight;
     }
     function checkFixedStyleAndNoWrap(table) {
         const { layoutMap } = table.internalProps;
@@ -40164,87 +40179,92 @@
         const fontFamily = getProp('fontFamily', actStyle, col, row, table);
         const autoWrapText = getProp('autoWrapText', actStyle, col, row, table);
         let text;
-        if (cellType === 'checkbox') {
-            text = isObject$4(cellValue) ? cellValue.text : cellValue;
+        if (cellType !== 'text' && cellType !== 'link' && cellType !== 'progressbar' && cellType !== 'checkbox') {
+            maxHeight = lineHeight;
         }
         else {
-            text = cellValue;
-        }
-        const lines = validToString(text).split('\n') || [];
-        const cellWidth = table.getColsWidth(col, endCol);
-        if (cellType === 'checkbox') {
-            const size = getProp('size', actStyle, col, row, table);
-            if (autoWrapText) {
-                const spaceBetweenTextAndIcon = getProp('spaceBetweenTextAndIcon', actStyle, col, row, table);
-                const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth - size - spaceBetweenTextAndIcon;
-                utilCheckBoxMark.setAttributes({
-                    text: {
-                        maxLineWidth,
-                        text: lines,
-                        fontSize,
-                        fontStyle,
-                        fontWeight,
-                        fontFamily,
-                        lineHeight,
-                        wordBreak: 'break-word'
-                    },
-                    icon: {
-                        width: Math.floor(size / 1.4),
-                        height: Math.floor(size / 1.4)
-                    },
-                    box: {
-                        width: size,
-                        height: size
-                    },
-                    spaceBetweenTextAndIcon
+            if (cellType === 'checkbox') {
+                text = isObject$4(cellValue) ? cellValue.text : cellValue;
+            }
+            else {
+                text = cellValue;
+            }
+            const lines = validToString(text).split('\n') || [];
+            const cellWidth = table.getColsWidth(col, endCol);
+            if (cellType === 'checkbox') {
+                const size = getProp('size', actStyle, col, row, table);
+                if (autoWrapText) {
+                    const spaceBetweenTextAndIcon = getProp('spaceBetweenTextAndIcon', actStyle, col, row, table);
+                    const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth - size - spaceBetweenTextAndIcon;
+                    utilCheckBoxMark.setAttributes({
+                        text: {
+                            maxLineWidth,
+                            text: lines,
+                            fontSize,
+                            fontStyle,
+                            fontWeight,
+                            fontFamily,
+                            lineHeight,
+                            wordBreak: 'break-word'
+                        },
+                        icon: {
+                            width: Math.floor(size / 1.4),
+                            height: Math.floor(size / 1.4)
+                        },
+                        box: {
+                            width: size,
+                            height: size
+                        },
+                        spaceBetweenTextAndIcon
+                    });
+                    utilCheckBoxMark.render();
+                    maxHeight = utilTextMark.AABBBounds.height();
+                }
+                else {
+                    maxHeight = Math.max(size, lines.length * lineHeight);
+                }
+            }
+            else if (iconInlineFront.length || iconInlineEnd.length) {
+                const textOption = Object.assign({
+                    text: cellValue?.toString(),
+                    fontFamily,
+                    fontSize,
+                    fontStyle,
+                    fontWeight,
+                    lineHeight
                 });
-                utilCheckBoxMark.render();
-                maxHeight = utilTextMark.AABBBounds.height();
+                textOption.textBaseline = 'middle';
+                const textConfig = [
+                    ...iconInlineFront.map(icon => dealWithRichTextIcon(icon)),
+                    textOption,
+                    ...iconInlineEnd.map(icon => dealWithRichTextIcon(icon))
+                ];
+                utilRichTextMark.setAttributes({
+                    width: cellWidth - (padding[1] + padding[3]) - iconWidth,
+                    height: 0,
+                    textConfig
+                });
+                maxHeight = utilRichTextMark.AABBBounds.height();
+            }
+            else if (autoWrapText) {
+                const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth;
+                utilTextMark.setAttributes({
+                    maxLineWidth,
+                    text: lines,
+                    fontSize,
+                    fontStyle,
+                    fontWeight,
+                    fontFamily,
+                    lineHeight,
+                    wordBreak: 'break-word',
+                    whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
+                });
+                maxHeight = utilTextMark.AABBBounds.height() || (typeof lineHeight === 'number' ? lineHeight : fontSize);
             }
             else {
-                maxHeight = Math.max(size, lines.length * lineHeight);
+                maxHeight = lines.length * lineHeight;
             }
         }
-        else if (iconInlineFront.length || iconInlineEnd.length) {
-            const textOption = Object.assign({
-                text: cellValue?.toString(),
-                fontFamily,
-                fontSize,
-                fontStyle,
-                fontWeight,
-                lineHeight
-            });
-            textOption.textBaseline = 'middle';
-            const textConfig = [
-                ...iconInlineFront.map(icon => dealWithRichTextIcon(icon)),
-                textOption,
-                ...iconInlineEnd.map(icon => dealWithRichTextIcon(icon))
-            ];
-            utilRichTextMark.setAttributes({
-                width: cellWidth - (padding[1] + padding[3]) - iconWidth,
-                height: 0,
-                textConfig
-            });
-            maxHeight = utilRichTextMark.AABBBounds.height();
-        }
-        else if (autoWrapText) {
-            const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth;
-            utilTextMark.setAttributes({
-                maxLineWidth,
-                text: lines,
-                fontSize,
-                fontStyle,
-                fontWeight,
-                fontFamily,
-                lineHeight,
-                wordBreak: 'break-word',
-                whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
-            });
-            maxHeight = utilTextMark.AABBBounds.height() || (typeof lineHeight === 'number' ? lineHeight : fontSize);
-        }
-        else {
-            maxHeight = lines.length * lineHeight;
-        }
         return (Math.max(maxHeight, iconHeight) + padding[0] + padding[2]) / spanRow;
     }
     function getCellRect$1(col, row, table) {
@@ -40395,7 +40415,13 @@
                     if (customLayout || customRender) {
                         const style = scene.table._getCellStyle(col, row);
                         const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
-                        const customResult = dealWithCustom(customLayout, customRender, col, row, cell.attribute.width, cell.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
+                        let width = cell.attribute.width;
+                        let height = cell.attribute.height;
+                        if (isMergeCellGroup(cell)) {
+                            width = scene.table.getColsWidth(cell.mergeStartCol, cell.mergeEndCol);
+                            height = scene.table.getRowsHeight(cell.mergeStartRow, cell.mergeEndRow);
+                        }
+                        const customResult = dealWithCustom(customLayout, customRender, col, row, width, height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
                         customElementsGroup = customResult.elementsGroup;
                         renderDefault = customResult.renderDefault;
                     }
@@ -40407,13 +40433,10 @@
                     }
                 }
             }
-            if (renderDefault) {
-                const style = scene.table._getCellStyle(col, row);
-                updateMergeCellContentHeight(cell, distHeight, detaY, scene.table.heightMode === 'autoHeight', getQuadProps(style.padding), style.textAlign, style.textBaseline, scene.table);
-            }
+            updateMergeCellContentHeight(cell, distHeight, detaY, scene.table.heightMode === 'autoHeight', renderDefault, scene.table);
         }
     }
-    function updateMergeCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, padding, textAlign, textBaseline, table) {
+    function updateMergeCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, renderDefault, table) {
         if (isMergeCellGroup(cellGroup)) {
             distHeight = 0;
             for (let row = cellGroup.mergeStartRow; row <= cellGroup.mergeEndRow; row++) {
@@ -40429,7 +40452,10 @@
                             dy: 0
                         });
                     });
-                    updateCellContentHeight(singleCellGroup, distHeight, detaY, autoRowHeight, padding, textAlign, textBaseline);
+                    if (renderDefault) {
+                        const style = table._getCellStyle(col, row);
+                        updateCellContentHeight(singleCellGroup, distHeight, detaY, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline);
+                    }
                     const rangeHeight = table.getRowHeight(row);
                     const rangeWidth = table.getColWidth(col);
                     singleCellGroup.contentHeight = distHeight;
@@ -40450,7 +40476,8 @@
             }
         }
         else {
-            updateCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, padding, textAlign, textBaseline);
+            const style = table._getCellStyle(cellGroup.col, cellGroup.row);
+            updateCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline);
         }
     }
 
@@ -40695,7 +40722,13 @@
                     if (customLayout || customRender) {
                         const style = scene.table._getCellStyle(col, row);
                         const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
-                        const customResult = dealWithCustom(customLayout, customRender, col, row, cellGroup.attribute.width, cellGroup.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
+                        let width = cellGroup.attribute.width;
+                        let height = cellGroup.attribute.height;
+                        if (isMergeCellGroup(cellGroup)) {
+                            width = scene.table.getColsWidth(cellGroup.mergeStartCol, cellGroup.mergeEndCol);
+                            height = scene.table.getRowsHeight(cellGroup.mergeStartRow, cellGroup.mergeEndRow);
+                        }
+                        const customResult = dealWithCustom(customLayout, customRender, col, row, width, height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
                         customElementsGroup = customResult.elementsGroup;
                         renderDefault = customResult.renderDefault;
                         isHeightChange = true;
@@ -40708,14 +40741,12 @@
                     }
                 }
             }
-            if (renderDefault) {
-                const style = scene.table._getCellStyle(col, row);
-                isHeightChange = updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline, scene.table);
-            }
+            const cellChange = updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, renderDefault, scene.table);
+            isHeightChange = isHeightChange || cellChange;
         }
         return autoRowHeight && autoWrapText ? isHeightChange : false;
     }
-    function updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, padding, textAlign, textBaseline, table) {
+    function updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, renderDefault, table) {
         if (isMergeCellGroup(cellGroup)) {
             distWidth = 0;
             let isHeightChange = false;
@@ -40729,6 +40760,9 @@
             const { colStart, colEnd, rowStart, rowEnd } = getCellMergeRange(cellGroup, table.scenegraph);
             for (let col = colStart; col <= colEnd; col++) {
                 for (let row = rowStart; row <= rowEnd; row++) {
+                    if (col === cellGroup.col && row !== cellGroup.row) {
+                        continue;
+                    }
                     const singleCellGroup = table.scenegraph.getCell(col, row);
                     singleCellGroup.forEachChildren((child) => {
                         child.setAttributes({
@@ -40736,13 +40770,20 @@
                             dy: 0
                         });
                     });
-                    const changed = updateCellContentWidth(singleCellGroup, distWidth, cellHeight, detaX, autoRowHeight, padding, textAlign, textBaseline, table.scenegraph);
-                    const hierarchyOffset = getHierarchyOffset(singleCellGroup.col, singleCellGroup.row, table);
-                    if (hierarchyOffset) {
-                        const text = singleCellGroup.getChildByName('text');
-                        const icon = singleCellGroup.getChildByName('expand') || singleCellGroup.getChildByName('collapse');
-                        if (icon?.role !== 'icon-left' && text) {
-                            text.setAttribute('dx', hierarchyOffset);
+                    let changed = false;
+                    if (renderDefault) {
+                        const style = table._getCellStyle(col, row);
+                        const padding = getQuadProps(style.padding);
+                        const textAlign = style.textAlign;
+                        const textBaseline = style.textBaseline;
+                        changed = updateCellContentWidth(singleCellGroup, distWidth, cellHeight, detaX, autoRowHeight, padding, textAlign, textBaseline, table.scenegraph);
+                        const hierarchyOffset = getHierarchyOffset(singleCellGroup.col, singleCellGroup.row, table);
+                        if (hierarchyOffset) {
+                            const text = singleCellGroup.getChildByName('text');
+                            const icon = singleCellGroup.getChildByName('expand') || singleCellGroup.getChildByName('collapse');
+                            if (icon?.role !== 'icon-left' && text) {
+                                text.setAttribute('dx', hierarchyOffset);
+                            }
                         }
                     }
                     const rangeHeight = table.getRowHeight(row);
@@ -40766,6 +40807,10 @@
             }
             return isHeightChange;
         }
+        const style = table._getCellStyle(cellGroup.col, cellGroup.row);
+        const padding = getQuadProps(style.padding);
+        const textAlign = style.textAlign;
+        const textBaseline = style.textBaseline;
         return updateCellContentWidth(cellGroup, distWidth, table.getRowHeight(cellGroup.row), detaX, autoRowHeight, padding, textAlign, textBaseline, table.scenegraph);
     }
     function resetRowHeight(scene, row) {
@@ -43032,6 +43077,7 @@
     }
 
     let customAlphabetCharSet = '';
+    let textMeasureMode = 'quick';
     const textMeasureModule = new ContainerModule((bind, unbind, isBound, rebind) => {
         if (isBound(TextMeasureContribution)) {
             rebind(TextMeasureContribution).to(FastTextMeasureContribution).inSingletonScope();
@@ -43079,13 +43125,13 @@
         measureTextWidth(text, options) {
             const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
             const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
+            const textMeasure = fastTextMeasure.measure(text, textMeasureMode);
             return textMeasure.width;
         }
         measureText(text, options) {
             const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
             const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
+            const textMeasure = fastTextMeasure.measure(text, textMeasureMode);
             return textMeasure;
         }
     }
@@ -43093,13 +43139,13 @@
         measureText(text, options) {
             const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
             const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
+            const textMeasure = fastTextMeasure.measure(text, textMeasureMode);
             return textMeasure;
         }
         measureTextWidth(text, options) {
             const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
             const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
+            const textMeasure = fastTextMeasure.measure(text, textMeasureMode);
             return textMeasure.width;
         }
         clipText(text, options, width) {
@@ -43173,6 +43219,7 @@
         fastTextMeasureCache.clear();
     }
     function restoreMeasureText() {
+        textMeasureMode = 'canvas';
         container.load(restoreTextMeasureModule);
     }
 
@@ -43557,8 +43604,9 @@
                 if (customLayoutObj.rootContainer instanceof Group$2) {
                     customLayoutObj.rootContainer = decodeReactDom(customLayoutObj.rootContainer);
                     dealPercentCalc(customLayoutObj.rootContainer, 0, table.getRowHeight(row));
+                    const setedWidth = customLayoutObj.rootContainer.attribute.width;
                     customLayoutObj.rootContainer.setStage(table.scenegraph.stage);
-                    width = customLayoutObj.rootContainer.AABBBounds.width() ?? 0;
+                    width = setedWidth > 0 ? setedWidth : customLayoutObj.rootContainer.AABBBounds.width() ?? 0;
                     renderDefault = customLayoutObj.renderDefault;
                     enableCellPadding = customLayoutObj.enableCellPadding;
                 }
@@ -43897,7 +43945,8 @@
         proxy.setParamsForColumn();
         let distCol;
         let distRow;
-        if (table.widthMode === 'adaptive') {
+        if (table.widthMode === 'adaptive' ||
+            (table.options.autoWrapText && (table.heightMode === 'adaptive' || table.heightMode === 'autoHeight'))) {
             distCol = table.colCount - 1;
         }
         else {
@@ -52112,6 +52161,7 @@
                     const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
                     if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
                         this.table.scenegraph.updateAutoColWidth(resizeCol.col);
+                        this.table.internalProps._widthResizedColMap.add(resizeCol.col);
                         this.table.scenegraph.updateChartSize(resizeCol.col);
                         const state = this.table.stateManager;
                         if (state.columnResize.col < state.table.frozenColCount &&
@@ -55495,7 +55545,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.22.1";
+        version = "0.22.2-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -57754,13 +57804,23 @@
             return customLayout;
         }
         hasAutoImageColumn() {
-            return this.internalProps.layoutMap.columnObjects.find((column) => {
-                if ((column.cellType === 'image' || typeof column.cellType === 'function') &&
+            const bodyColumn = this.internalProps.layoutMap.columnObjects.find((column) => {
+                if ((column.cellType === 'image' || column.cellType === 'video' || typeof column.cellType === 'function') &&
                     column.define.imageAutoSizing) {
                     return true;
                 }
                 return false;
             });
+            const headerObj = this.internalProps.layoutMap.headerObjects.find((column) => {
+                if (column) {
+                    if ((column.headerType === 'image' || column.headerType === 'video' || typeof column.headerType === 'function') &&
+                        column.define.imageAutoSizing) {
+                        return true;
+                    }
+                }
+                return false;
+            });
+            return bodyColumn || headerObj;
         }
         _getActiveChartInstance() {
             const cellGroup = this.scenegraph.getCell(this.stateManager.hover?.cellPos?.col, this.stateManager.hover?.cellPos?.row);
@@ -67576,7 +67636,7 @@
     }
 
     registerForVrender();
-    const version = "0.22.1";
+    const version = "0.22.2-alpha.0";
     function getIcons() {
         return get$2();
     }