@visactor/vtable 1.26.6 → 1.26.7

package/dist/vtable.js

@@ -44946,6 +44946,7 @@
 	    MOUSELEAVE_CELL: 'mouseleave_cell',
 	    CONTEXTMENU_CELL: 'contextmenu_cell',
 	    CONTEXTMENU_CANVAS: 'contextmenu_canvas',
+	    CONTEXT_MENU_CLICK: 'context_menu_click',
 	    RESIZE_COLUMN: 'resize_column',
 	    RESIZE_COLUMN_END: 'resize_column_end',
 	    RESIZE_ROW: 'resize_row',
@@ -58142,7 +58143,80 @@
 	    }
 	}
 
-	function createImageCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync) {
+	const CELL_MEDIA_KEY = '__vtable_cell_media__';
+	const CELL_MEDIA_KIND_KEY = '__vtable_cell_media_kind__';
+	function markCellMedia(graphic, kind) {
+	    graphic[CELL_MEDIA_KEY] = true;
+	    graphic[CELL_MEDIA_KIND_KEY] = kind;
+	    return graphic;
+	}
+	function isCellMedia(graphic) {
+	    return graphic?.[CELL_MEDIA_KEY] === true;
+	}
+	function getCellMediaChildren(cellGroup) {
+	    const mediaChildren = [];
+	    cellGroup.forEachChildren((child) => {
+	        if (isCellMedia(child)) {
+	            mediaChildren.push(child);
+	        }
+	    });
+	    return mediaChildren;
+	}
+	function getCellMediaByKind(cellGroup, kind) {
+	    let graphic;
+	    cellGroup.forEachChildren((child) => {
+	        if (isCellMedia(child) && child[CELL_MEDIA_KIND_KEY] === kind) {
+	            graphic = child;
+	            return true;
+	        }
+	        return false;
+	    });
+	    return graphic;
+	}
+	function getCellMediaImage(cellGroup) {
+	    return getCellMediaByKind(cellGroup, 'image');
+	}
+	function getCellMediaPlayIcon(cellGroup) {
+	    return getCellMediaByKind(cellGroup, 'play-icon');
+	}
+	function releaseVideoResource(video) {
+	    try {
+	        video.pause();
+	    }
+	    catch (err) {
+	    }
+	    video.removeAttribute('src');
+	    try {
+	        video.load();
+	    }
+	    catch (err) {
+	    }
+	}
+	function releaseGraphicMediaResource(graphic) {
+	    const source = graphic?.attribute?.image;
+	    if (typeof HTMLVideoElement !== 'undefined' && source instanceof HTMLVideoElement) {
+	        releaseVideoResource(source);
+	    }
+	}
+	function removeCellMediaChildren(cellGroup) {
+	    const mediaChildren = getCellMediaChildren(cellGroup);
+	    mediaChildren.forEach(child => {
+	        releaseGraphicMediaResource(child);
+	        cellGroup.removeChild(child);
+	        child.release?.();
+	    });
+	}
+
+	function hasCellMedia(cellGroup) {
+	    return getCellMediaChildren(cellGroup).length > 0;
+	}
+	function getResizeImage(cellGroup) {
+	    return hasCellMedia(cellGroup) ? getCellMediaImage(cellGroup) : undefined;
+	}
+	function getResizePlayIcon(cellGroup) {
+	    return hasCellMedia(cellGroup) ? getCellMediaPlayIcon(cellGroup) : undefined;
+	}
+	function createImageCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync, cellValue) {
 	    const headerStyle = table._getCellStyle(col, row);
 	    const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
 	    if (table.options.customConfig?.imageMargin) {
@@ -58242,18 +58316,19 @@
 	                child.setAttribute('y', padding[0]);
 	            }
 	        });
-	        cellGroup._cellLeftIconWidth = cellLeftIconWidth;
-	        cellGroup._cellRightIconWidth = cellRightIconWidth;
 	    }
-	    const value = table.getCellValue(col, row);
-	    const image = createImage({
+	    cellGroup._cellLeftIconWidth = cellLeftIconWidth;
+	    cellGroup._cellRightIconWidth = cellRightIconWidth;
+	    const value = arguments.length >= 18 ? cellValue : table.getCellValue(col, row);
+	    removeCellMediaChildren(cellGroup);
+	    const image = markCellMedia(createImage({
 	        x: padding[3],
 	        y: padding[0],
 	        width: width - padding[1] - padding[3] - iconWidth,
 	        height: height - padding[0] - padding[2],
 	        image: value,
 	        cursor: 'pointer'
-	    });
+	    }), 'image');
 	    image.name = 'image';
 	    image.keepAspectRatio = keepAspectRatio;
 	    image.textAlign = textAlign;
@@ -58345,13 +58420,13 @@
 	    return false;
 	}
 	function updateImageCellContentWhileResize(cellGroup, col, row, deltaX, deltaY, table) {
-	    const image = cellGroup.getChildByName('image');
+	    const image = getResizeImage(cellGroup);
 	    if (!image) {
 	        return;
 	    }
 	    const originImage = (typeof image.attribute.image !== 'string' && image.attribute.image) ||
 	        image.resources?.get(image.attribute.image).data;
-	    if (!originImage) {
+	    if (!originImage && !image.isAudioIcon) {
 	        return;
 	    }
 	    const headerStyle = table._getCellStyle(col, row);
@@ -58368,16 +58443,34 @@
 	    const colStart = cellGroup.mergeStartCol ?? cellGroup.col;
 	    const rowStart = cellGroup.mergeStartRow ?? cellGroup.row;
 	    const colEnd = cellGroup.mergeEndCol ?? cellGroup.col;
-	    const rowEnd = cellGroup.mergeEndCol ?? cellGroup.row;
+	    const rowEnd = cellGroup.mergeEndRow ?? cellGroup.row;
 	    const leftIconWidth = cellGroup._cellLeftIconWidth ?? 0;
 	    const rightIconWidth = cellGroup._cellRightIconWidth ?? 0;
-	    if (image.keepAspectRatio || isDamagePic(image)) {
+	    if (image.isAudioIcon) {
+	        const availableWidth = Math.max(1, cellWidth - padding[1] - padding[3] - leftIconWidth - rightIconWidth);
+	        const availableHeight = Math.max(1, cellHeight - padding[0] - padding[2]);
+	        const iconSize = Math.max(1, Math.min(availableWidth, availableHeight, 32));
+	        const pos = calcStartPosition(leftIconWidth, 0, cellWidth - leftIconWidth - rightIconWidth, cellHeight, iconSize, iconSize, textAlign, textBaseline, padding);
+	        for (let col = colStart; col <= colEnd; col++) {
+	            for (let row = rowStart; row <= rowEnd; row++) {
+	                const cellGroup = table.scenegraph.getCell(col, row);
+	                const image = getResizeImage(cellGroup);
+	                image?.setAttributes({
+	                    x: pos.x,
+	                    y: pos.y,
+	                    width: iconSize,
+	                    height: iconSize
+	                });
+	            }
+	        }
+	    }
+	    else if (image.keepAspectRatio || isDamagePic(image)) {
 	        const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(originImage.width || originImage.videoWidth, originImage.height || originImage.videoHeight, cellWidth - (padding[1] + padding[3]), cellHeight - (padding[0] + padding[2]));
 	        const pos = calcStartPosition(0, 0, cellWidth, cellHeight, imageWidth, imageHeight, textAlign, textBaseline, padding);
 	        for (let col = colStart; col <= colEnd; col++) {
 	            for (let row = rowStart; row <= rowEnd; row++) {
 	                const cellGroup = table.scenegraph.getCell(col, row);
-	                const image = cellGroup.getChildByName('image');
+	                const image = getResizeImage(cellGroup);
 	                image?.setAttributes({
 	                    x: pos.x,
 	                    y: pos.y,
@@ -58391,7 +58484,7 @@
 	        for (let col = colStart; col <= colEnd; col++) {
 	            for (let row = rowStart; row <= rowEnd; row++) {
 	                const cellGroup = table.scenegraph.getCell(col, row);
-	                const image = cellGroup.getChildByName('image');
+	                const image = getResizeImage(cellGroup);
 	                image?.setAttributes({
 	                    x: leftIconWidth + padding[3],
 	                    y: padding[0],
@@ -58401,7 +58494,7 @@
 	            }
 	        }
 	    }
-	    const playIcon = cellGroup.getChildByName('play-icon');
+	    const playIcon = getResizePlayIcon(cellGroup);
 	    if (playIcon) {
 	        const left = 0;
 	        const top = 0;
@@ -58412,8 +58505,8 @@
 	        for (let col = colStart; col <= colEnd; col++) {
 	            for (let row = rowStart; row <= rowEnd; row++) {
 	                const cellGroup = table.scenegraph.getCell(col, row);
-	                const playIcon = cellGroup.getChildByName('play-icon');
-	                playIcon.setAttributes({
+	                const playIcon = getResizePlayIcon(cellGroup);
+	                playIcon?.setAttributes({
 	                    x: anchorX - iconSize / 2,
 	                    y: anchorY - iconSize / 2,
 	                    width: iconSize,
@@ -58470,14 +58563,14 @@
 	        for (let row = startRow; row <= endRow; row++) {
 	            const cellGroup = table.scenegraph.getCell(col, row);
 	            if (cellGroup) {
-	                const image = cellGroup.getChildByName('image');
+	                const image = getResizeImage(cellGroup);
 	                if (image) {
 	                    image.setAttributes({
 	                        dx: -table.getColsWidth(cellGroup.mergeStartCol, col - 1),
 	                        dy: -table.getRowsHeight(cellGroup.mergeStartRow, row - 1)
 	                    });
 	                }
-	                const playIcon = cellGroup.getChildByName('play-icon');
+	                const playIcon = getResizePlayIcon(cellGroup);
 	                if (playIcon) {
 	                    playIcon.setAttributes({
 	                        dx: -table.getColsWidth(cellGroup.mergeStartCol, col - 1),
@@ -58518,8 +58611,8 @@
 
 	function dealPromiseData(dataPromise, tabel, callback) {
 	    dataPromise
-	        .then(() => {
-	        callback();
+	        .then(value => {
+	        callback(value);
 	        tabel.scenegraph.updateNextFrame();
 	    })
 	        .catch((err) => {
@@ -58539,19 +58632,34 @@
 	    }
 	}
 
-	function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
+	const PROMISE_CELL_UPDATE_TOKEN_KEY = '__vtable_promise_cell_update_token__';
+	function nextPromiseCellUpdateToken(cellGroup) {
+	    const token = (cellGroup[PROMISE_CELL_UPDATE_TOKEN_KEY] ?? 0) + 1;
+	    cellGroup[PROMISE_CELL_UPDATE_TOKEN_KEY] = token;
+	    return token;
+	}
+	function isPromiseCellUpdateCurrent(table, col, row, cellGroup, token) {
+	    const currentCellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
+	    return currentCellGroup === cellGroup && cellGroup[PROMISE_CELL_UPDATE_TOKEN_KEY] === token;
+	}
+	function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, cellValue) {
 	    let isAsync = false;
 	    let cellGroup;
+	    const hasCellValue = arguments.length >= 19;
+	    let renderValue = hasCellValue ? cellValue : value;
 	    if (isPromise(value)) {
 	        if (table.scenegraph.highPerformanceGetCell(col, row).role !== 'cell') {
 	            return cellGroup;
 	        }
-	        value = table.getCellValue(col, row);
+	        if (!hasCellValue) {
+	            renderValue = table.getCellValue(col, row);
+	        }
 	        isAsync = true;
 	    }
+	    value = renderValue;
 	    if (type === 'checkbox' && define.tree) {
 	        const createCheckboxCellGroup = Factory.getFunction('createCheckboxCellGroup');
-	        cellGroup = createCheckboxCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, true);
+	        cellGroup = createCheckboxCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, true, value);
 	    }
 	    else if (type === 'text' || type === 'link' || customResult) {
 	        if (type === 'link') {
@@ -58610,11 +58718,15 @@
 	    }
 	    else if (type === 'image') {
 	        const createImageCellGroup = Factory.getFunction('createImageCellGroup');
-	        cellGroup = createImageCellGroup(columnGroup, 0, y, col, row, cellWidth, cellHeight, define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync);
+	        cellGroup = createImageCellGroup(columnGroup, 0, y, col, row, cellWidth, cellHeight, define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync, value);
+	    }
+	    else if (type === 'audio') {
+	        const createAudioCellGroup = Factory.getFunction('createAudioCellGroup');
+	        cellGroup = createAudioCellGroup(columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync, value);
 	    }
 	    else if (type === 'video') {
 	        const createVideoCellGroup = Factory.getFunction('createVideoCellGroup');
-	        cellGroup = createVideoCellGroup(columnGroup, 0, y, col, row, cellWidth, cellHeight, define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync);
+	        cellGroup = createVideoCellGroup(columnGroup, 0, y, col, row, cellWidth, cellHeight, define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync, value);
 	    }
 	    else if (type === 'chart') {
 	        const chartInstance = table.internalProps.layoutMap.getChartInstance(col, row);
@@ -58638,7 +58750,7 @@
 	    }
 	    else if (type === 'sparkline') {
 	        const createSparkLineCellGroup = Factory.getFunction('createSparkLineCellGroup');
-	        cellGroup = createSparkLineCellGroup(null, columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, table, cellTheme, isAsync);
+	        cellGroup = createSparkLineCellGroup(null, columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, table, cellTheme, isAsync, value);
 	    }
 	    else if (type === 'checkbox') {
 	        const isAggregation = 'isAggregation' in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row);
@@ -58648,7 +58760,7 @@
 	        }
 	        else {
 	            const createCheckboxCellGroup = Factory.getFunction('createCheckboxCellGroup');
-	            cellGroup = createCheckboxCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, false);
+	            cellGroup = createCheckboxCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, false, value);
 	        }
 	    }
 	    else if (type === 'radio') {
@@ -58659,16 +58771,16 @@
 	        }
 	        else {
 	            const createRadioCellGroup = Factory.getFunction('createRadioCellGroup');
-	            cellGroup = createRadioCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, table, cellTheme, define, range);
+	            cellGroup = createRadioCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, table, cellTheme, define, range, isAsync, value);
 	        }
 	    }
 	    else if (type === 'switch') {
 	        const createSwitchCellGroup = Factory.getFunction('createSwitchCellGroup');
-	        cellGroup = createSwitchCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync);
+	        cellGroup = createSwitchCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, value);
 	    }
 	    else if (type === 'button') {
 	        const createButtonCellGroup = Factory.getFunction('createButtonCellGroup');
-	        cellGroup = createButtonCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync);
+	        cellGroup = createButtonCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, value);
 	    }
 	    cellGroup.onBeforeAttributeUpdate = onBeforeAttributeUpdateForInvertHighlight;
 	    return cellGroup;
@@ -58880,10 +58992,11 @@
 	        cellHeight = table.getRowHeight(row);
 	    }
 	    if (isPromise(value)) {
+	        const updateToken = nextPromiseCellUpdateToken(oldCellGroup);
+	        removeCellMediaChildren(oldCellGroup);
 	        oldCellGroup.removeAllChild();
 	        dealPromiseData(value, table, callUpdateCellContentForPromiseValue.bind(null, {
 	            type,
-	            value,
 	            define,
 	            table,
 	            col,
@@ -58898,7 +59011,9 @@
 	            addNew,
 	            range,
 	            customResult,
-	            customStyle
+	            customStyle,
+	            promiseValue: value,
+	            updateToken
 	        }));
 	    }
 	    else {
@@ -58918,10 +59033,8 @@
 	    }
 	    return newCellGroup;
 	}
-	function updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult) {
-	    if (isPromise(value)) {
-	        value = table.getCellValue(col, row);
-	    }
+	function updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult, cellValue) {
+	    const hasCellValue = arguments.length >= 18;
 	    if (!addNew && (oldCellGroup.row !== row || oldCellGroup.col !== col)) {
 	        return null;
 	    }
@@ -58936,10 +59049,34 @@
 	            }
 	        }
 	    }
-	    const newCellGroup = createCell(type, value, define, table, col, row, table.getColWidth(col), cellWidth, cellHeight, addNew ? table.scenegraph.getColGroup(col) : oldCellGroup.parent, addNew ? 0 : table.scenegraph.getCellGroupY(row), padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
-	    if (!addNew && oldCellGroup.parent) {
+	    const createCellArgs = [
+	        type,
+	        value,
+	        define,
+	        table,
+	        col,
+	        row,
+	        table.getColWidth(col),
+	        cellWidth,
+	        cellHeight,
+	        addNew ? table.scenegraph.getColGroup(col) : oldCellGroup.parent,
+	        addNew ? 0 : table.scenegraph.getCellGroupY(row),
+	        padding,
+	        textAlign,
+	        textBaseline,
+	        mayHaveIcon,
+	        cellTheme,
+	        range,
+	        customResult
+	    ];
+	    if (hasCellValue) {
+	        createCellArgs.push(cellValue);
+	    }
+	    const newCellGroup = createCell(...createCellArgs);
+	    if (!addNew && oldCellGroup.parent && newCellGroup !== oldCellGroup) {
 	        oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
 	        oldCellGroup.parent.removeChild(oldCellGroup);
+	        removeCellMediaChildren(oldCellGroup);
 	        oldCellGroup.release(true);
 	        if (table.scenegraph?.proxy.cellCache.get(col)) {
 	            table.scenegraph?.proxy.cellCache.set(col, newCellGroup);
@@ -58963,12 +59100,15 @@
 	    }
 	    return false;
 	}
-	function callUpdateCellContentForPromiseValue(updateCellArgs) {
-	    const { type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, range, customResult, customStyle } = updateCellArgs;
+	function callUpdateCellContentForPromiseValue(updateCellArgs, resolvedValue) {
+	    const { type, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, range, customResult, customStyle, promiseValue, updateToken } = updateCellArgs;
+	    if (!isPromiseCellUpdateCurrent(table, col, row, oldCellGroup, updateToken)) {
+	        return;
+	    }
 	    const cellStyle = customStyle || table._getCellStyle(range ? range.start.col : col, range ? range.start.row : row);
 	    const cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
 	    cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
-	    updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
+	    updateCellContent(type, promiseValue, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult, resolvedValue);
 	}
 	function dealWithMergeCellSize(range, cellWidth, cellHeight, padding, textAlign, textBaseline, table) {
 	    for (let col = range.start.col; col <= range.end.col; col++) {
@@ -59720,11 +59860,12 @@
 	            cellRange = table.getCellRange(col, row);
 	            spanRow = cellRange.end.row - cellRange.start.row + 1;
 	        }
+	        const skipCellValue = shouldSkipCustomRenderCellValueForComputation$1(col, row, table);
 	        const arg = {
 	            col: cellRange?.start.col ?? col,
 	            row: cellRange?.start.row ?? row,
-	            dataValue: table.getCellOriginValue(col, row),
-	            value: table.getCellValue(col, row),
+	            dataValue: skipCellValue ? undefined : table.getCellOriginValue(col, row),
+	            value: skipCellValue ? undefined : table.getCellValue(col, row),
 	            rect: getCellRect$1(col, row, table),
 	            table,
 	            originCol: col,
@@ -59765,12 +59906,15 @@
 	            height += padding[0] + padding[2];
 	        }
 	        return {
-	            height: height / spanRow,
+	            height: getMergedCellSingleRowHeight(height / spanRow, spanRow, table),
 	            renderDefault
 	        };
 	    }
 	    return undefined;
 	}
+	function shouldSkipCustomRenderCellValueForComputation$1(col, row, table) {
+	    return (table.isListTable() && !table.isHeader(col, row) && !table.internalProps.dataSource?.dataSourceObj?.records);
+	}
 	function computeTextHeight(col, row, cellType, table) {
 	    let maxHeight = 0;
 	    const cellValue = table.getCellValue(col, row);
@@ -59923,7 +60067,15 @@
 	            }
 	        }
 	    }
-	    return (Math.max(maxHeight, iconHeight) + padding[0] + padding[2]) / spanRow;
+	    return getMergedCellSingleRowHeight((Math.max(maxHeight, iconHeight) + padding[0] + padding[2]) / spanRow, spanRow, table);
+	}
+	function getMergedCellSingleRowHeight(height, spanRow, table) {
+	    if (spanRow <= 1) {
+	        return height;
+	    }
+	    const configuredMinHeight = table.options.customConfig?.minSingleRowHeight;
+	    const minSingleRowHeight = isNumber$3(configuredMinHeight) && configuredMinHeight > 0 ? configuredMinHeight : 2;
+	    return Math.max(height, minSingleRowHeight);
 	}
 	function getCellRect$1(col, row, table) {
 	    return {
@@ -60019,7 +60171,7 @@
 	        const createSparkLineCellGroup = Factory.getFunction('createSparkLineCellGroup');
 	        createSparkLineCellGroup(cell, cell.parent, cell.attribute.x, cell.attribute.y, col, row, cell.attribute.width, cell.attribute.height, padding, scene.table, getStyleTheme(headerStyle, scene.table, col, row, getProp).theme, false);
 	    }
-	    else if (type === 'image' || type === 'video') {
+	    else if (type === 'image' || type === 'video' || type === 'audio') {
 	        updateImageCellContentWhileResize(cell, col, row, 0, detaY, scene.table);
 	    }
 	    else if (cell.firstChild?.name === 'axis') {
@@ -60360,7 +60512,7 @@
 	        const createSparkLineCellGroup = Factory.getFunction('createSparkLineCellGroup');
 	        createSparkLineCellGroup(cellGroup, cellGroup.parent, cellGroup.attribute.x, cellGroup.attribute.y, col, row, cellGroup.attribute.width, cellGroup.attribute.height, padding, scene.table, getStyleTheme(headerStyle, scene.table, col, row, getProp).theme, false);
 	    }
-	    else if (type === 'image' || type === 'video') {
+	    else if (type === 'image' || type === 'video' || type === 'audio') {
 	        updateImageCellContentWhileResize(cellGroup, col, row, detaX, 0, scene.table);
 	    }
 	    else if (cellGroup.firstChild?.name === 'axis') {
@@ -62527,11 +62679,12 @@
 	            cellRange = table.getCellRange(col, row);
 	            spanCol = cellRange.end.col - cellRange.start.col + 1;
 	        }
+	        const skipCellValue = shouldSkipCustomRenderCellValueForComputation(col, row, table);
 	        const arg = {
 	            col: cellRange?.start.col ?? col,
 	            row: cellRange?.start.row ?? row,
-	            dataValue: table.getCellOriginValue(col, row),
-	            value: table.getCellValue(col, row),
+	            dataValue: skipCellValue ? undefined : table.getCellOriginValue(col, row),
+	            value: skipCellValue ? undefined : table.getCellValue(col, row),
 	            rect: getCellRect(col, row, table),
 	            table,
 	            originCol: col,
@@ -62580,6 +62733,11 @@
 	    }
 	    return undefined;
 	}
+	function shouldSkipCustomRenderCellValueForComputation(col, row, table) {
+	    return (table.isListTable() &&
+	        !table.isHeader(col, row) &&
+	        !table.internalProps.dataSource?.dataSourceObj?.records);
+	}
 	function computeTextWidth(col, row, cellType, table) {
 	    let maxWidth = 0;
 	    const cellValue = table.getCellValue(col, row);
@@ -63014,10 +63172,10 @@
 	        }
 	        const type = isVtableMerge || isCustomMerge ? 'text' : table.getCellType(col, row);
 	        if (isPromise(value)) {
-	            createEmptyCellGroup(col, row, 0, y, cellWidth, cellHeight, columnGroup);
+	            const cellGroup = createEmptyCellGroup(col, row, 0, y, cellWidth, cellHeight, columnGroup);
+	            const updateToken = nextPromiseCellUpdateToken(cellGroup);
 	            dealPromiseData(value, table, callCreateCellForPromiseValue.bind(null, {
 	                type,
-	                value,
 	                define,
 	                table,
 	                col,
@@ -63032,7 +63190,10 @@
 	                cellLocation,
 	                range,
 	                customResult,
-	                defaultRowHeight
+	                defaultRowHeight,
+	                promiseValue: value,
+	                oldCellGroup: cellGroup,
+	                updateToken
 	            }));
 	            columnGroup.updateColumnRowNumber(row);
 	            const height = table.getRowHeight(row);
@@ -63085,11 +63246,14 @@
 	        height: y
 	    };
 	}
-	function callCreateCellForPromiseValue(createCellArgs) {
+	function callCreateCellForPromiseValue(createCellArgs, resolvedValue) {
 	    let padding;
 	    let textAlign;
 	    let textBaseline;
-	    const { type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, cellLocation, mayHaveIcon, customStyle, range, customResult, defaultRowHeight } = createCellArgs;
+	    const { type, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, cellLocation, mayHaveIcon, customStyle, range, customResult, defaultRowHeight, promiseValue, oldCellGroup, updateToken } = createCellArgs;
+	    if (!isPromiseCellUpdateCurrent(table, col, row, oldCellGroup, updateToken)) {
+	        return;
+	    }
 	    const cellStyle = customStyle || table._getCellStyle(range ? range.start.col : col, range ? range.start.row : row);
 	    const cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
 	    cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
@@ -63107,7 +63271,7 @@
 	    if (cellLocation !== 'body' && !cellTheme.group.fill) {
 	        cellTheme.group.fill = '#fff';
 	    }
-	    createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
+	    createCell(type, promiseValue, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, resolvedValue);
 	}
 	function dealMerge(range, mergeMap, table, forceUpdate) {
 	    let cellWidth = 0;
@@ -63145,6 +63309,7 @@
 	    cellGroup.col = col;
 	    cellGroup.row = row;
 	    columnGroup.addChild(cellGroup);
+	    return cellGroup;
 	}
 
 	function createColGroup(containerGroup, xOrigin, yOrigin, colStart, colEnd, rowStart, rowEnd, cellLocation, table, rowLimit) {
@@ -64072,6 +64237,7 @@
 	    await proxy.progress();
 	}
 
+	let stickTextUpdateId = 0;
 	function resetTextStick(table) {
 	    const { changedCells } = table.internalProps.stick;
 	    changedCells.forEach((cellPos) => {
@@ -64088,6 +64254,8 @@
 	}
 	function handleTextStick(table) {
 	    const changedCells = resetTextStick(table);
+	    const horizontalUpdateId = ++stickTextUpdateId;
+	    const verticalUpdateId = ++stickTextUpdateId;
 	    const { scrollTop, scrollLeft, frozenRowCount, frozenColCount } = table;
 	    const frozenRowsHeight = table.getFrozenRowsHeight();
 	    const frozenColsWidth = table.getFrozenColsWidth();
@@ -64112,7 +64280,7 @@
 	            const style = table._getCellStyle(col, row);
 	            if (style?.textStick && style?.textStick !== 'vertical') {
 	                const cellGroup = table.scenegraph.getCell(col, row);
-	                adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX, changedCells, style?.textStickBaseOnAlign, table);
+	                adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX, changedCells, style?.textStickBaseOnAlign, table, horizontalUpdateId, { colStart, colEnd, rowStart: row, rowEnd: row });
 	            }
 	        });
 	    }
@@ -64122,10 +64290,9 @@
 	        }
 	        [rowStart, rowEnd].forEach((row) => {
 	            const style = table._getCellStyle(col, row);
-	            if (style?.textStick &&
-	                style?.textStick !== 'horizontal') {
+	            if (style?.textStick && style?.textStick !== 'horizontal') {
 	                const cellGroup = table.scenegraph.getCell(col, row);
-	                adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY, changedCells, style?.textStickBaseOnAlign, table);
+	                adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY, changedCells, style?.textStickBaseOnAlign, table, verticalUpdateId, { colStart: col, colEnd: col, rowStart, rowEnd });
 	            }
 	        });
 	    }
@@ -64137,7 +64304,7 @@
 	            const style = table._getCellStyle(col, row);
 	            if (style?.textStick && style?.textStick !== 'horizontal') {
 	                const cellGroup = table.scenegraph.getCell(col, row);
-	                adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY, changedCells, style?.textStickBaseOnAlign, table);
+	                adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY, changedCells, style?.textStickBaseOnAlign, table, verticalUpdateId, { colStart: col, colEnd: col, rowStart, rowEnd });
 	            }
 	        });
 	    }
@@ -64149,30 +64316,15 @@
 	            const style = table._getCellStyle(col, row);
 	            if (style?.textStick && style?.textStick !== 'vertical') {
 	                const cellGroup = table.scenegraph.getCell(col, row);
-	                adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX, changedCells, style?.textStickBaseOnAlign, table);
+	                adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX, changedCells, style?.textStickBaseOnAlign, table, horizontalUpdateId, { colStart, colEnd, rowStart: row, rowEnd: row });
 	            }
 	        });
 	    }
 	}
-	function adjustCellContentVerticalLayout(cellGroup, minTop, maxTop, changedCells, textStickBaseOnAlign, table) {
-	    if (isNumber$3(cellGroup.mergeStartCol) &&
-	        isNumber$3(cellGroup.mergeStartRow) &&
-	        isNumber$3(cellGroup.mergeEndCol) &&
-	        isNumber$3(cellGroup.mergeEndRow)) {
-	        const { colStart, colEnd, rowStart, rowEnd } = getCellMergeRange(cellGroup, table.scenegraph);
-	        for (let col = colStart; col <= colEnd; col++) {
-	            for (let row = rowStart; row <= rowEnd; row++) {
-	                const singleCellGroup = table.scenegraph.getCell(col, row);
-	                if (singleCellGroup.role !== 'cell') {
-	                    continue;
-	                }
-	                dealVertical(singleCellGroup, minTop, maxTop, changedCells, textStickBaseOnAlign);
-	            }
-	        }
-	    }
-	    else {
-	        dealVertical(cellGroup, minTop, maxTop, changedCells, textStickBaseOnAlign);
-	    }
+	function adjustCellContentVerticalLayout(cellGroup, minTop, maxTop, changedCells, textStickBaseOnAlign, table, updateId, visibleRange) {
+	    dealMergedCellGroups(cellGroup, table, visibleRange, updateId, 'verticalStickUpdateId', singleCellGroup => {
+	        dealVertical(singleCellGroup, minTop, maxTop, changedCells, textStickBaseOnAlign);
+	    });
 	}
 	function dealVertical(cellGroup, minTop, maxTop, changedCells, textStickBaseOnAlign) {
 	    const graphic = cellGroup.getChildByName('text', true) || cellGroup.getChildByName('image', true);
@@ -64239,24 +64391,38 @@
 	        });
 	    }
 	}
-	function adjustCellContentHorizontalLayout(cellGroup, minLeft, maxLeft, changedCells, textStickBaseOnAlign, table) {
+	function adjustCellContentHorizontalLayout(cellGroup, minLeft, maxLeft, changedCells, textStickBaseOnAlign, table, updateId, visibleRange) {
+	    dealMergedCellGroups(cellGroup, table, visibleRange, updateId, 'horizontalStickUpdateId', singleCellGroup => {
+	        dealHorizontal(singleCellGroup, minLeft, maxLeft, changedCells, textStickBaseOnAlign);
+	    });
+	}
+	function dealMergedCellGroups(cellGroup, table, visibleRange, updateId, updateIdKey, dealCell) {
 	    if (isNumber$3(cellGroup.mergeStartCol) &&
 	        isNumber$3(cellGroup.mergeStartRow) &&
 	        isNumber$3(cellGroup.mergeEndCol) &&
 	        isNumber$3(cellGroup.mergeEndRow)) {
 	        const { colStart, colEnd, rowStart, rowEnd } = getCellMergeRange(cellGroup, table.scenegraph);
-	        for (let col = colStart; col <= colEnd; col++) {
-	            for (let row = rowStart; row <= rowEnd; row++) {
+	        const visibleColStart = Math.max(colStart, visibleRange.colStart);
+	        const visibleColEnd = Math.min(colEnd, visibleRange.colEnd);
+	        const visibleRowStart = Math.max(rowStart, visibleRange.rowStart);
+	        const visibleRowEnd = Math.min(rowEnd, visibleRange.rowEnd);
+	        for (let col = visibleColStart; col <= visibleColEnd; col++) {
+	            for (let row = visibleRowStart; row <= visibleRowEnd; row++) {
 	                const singleCellGroup = table.scenegraph.getCell(col, row);
-	                if (singleCellGroup.role !== 'cell') {
+	                if (singleCellGroup.role !== 'cell' || singleCellGroup[updateIdKey] === updateId) {
 	                    continue;
 	                }
-	                dealHorizontal(singleCellGroup, minLeft, maxLeft, changedCells, textStickBaseOnAlign);
+	                singleCellGroup[updateIdKey] = updateId;
+	                dealCell(singleCellGroup);
 	            }
 	        }
 	    }
 	    else {
-	        dealHorizontal(cellGroup, minLeft, maxLeft, changedCells, textStickBaseOnAlign);
+	        if (cellGroup[updateIdKey] === updateId) {
+	            return;
+	        }
+	        cellGroup[updateIdKey] = updateId;
+	        dealCell(cellGroup);
 	    }
 	}
 	function dealHorizontal(cellGroup, minLeft, maxLeft, changedCells, textStickBaseOnAlign) {
@@ -64390,12 +64556,13 @@
 	    cellCache = new Map();
 	    constructor(table) {
 	        this.table = table;
+	        const defaultRowHeight = this.getEstimatedRowHeightForProxy();
 	        if (this.table.isPivotChart()) {
-	            this.rowLimit = Math.max(100, Math.ceil((table.tableNoFrameHeight * 2) / table.defaultRowHeight));
+	            this.rowLimit = Math.max(100, Math.ceil((table.tableNoFrameHeight * 2) / defaultRowHeight));
 	            this.colLimit = Math.max(100, Math.ceil((table.tableNoFrameWidth * 2) / table.defaultColWidth));
 	        }
 	        else if (this.table.isAutoRowHeight(table.columnHeaderLevelCount)) {
-	            this.rowLimit = Math.max(100, Math.ceil((table.tableNoFrameHeight * 2) / table.defaultRowHeight));
+	            this.rowLimit = Math.max(100, Math.ceil((table.tableNoFrameHeight * 2) / defaultRowHeight));
 	        }
 	        else if (this.table.widthMode === 'autoWidth') {
 	            this.colLimit = Math.max(100, Math.ceil((table.tableNoFrameWidth * 2) / table.defaultColWidth));
@@ -64454,7 +64621,7 @@
 	        this.totalRow = this.bodyTopRow + totalActualBodyRowCount - 1;
 	        this.rowStart = this.bodyTopRow;
 	        this.rowEnd = this.totalRow;
-	        const defaultRowHeight = this.table.defaultRowHeight;
+	        const defaultRowHeight = this.getEstimatedRowHeightForProxy();
 	        this.taskRowCount = Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight) * 1;
 	        const totalBodyHeight = defaultRowHeight * totalActualBodyRowCount;
 	        const totalHeight = defaultRowHeight * (this.bodyBottomRow - this.bodyTopRow + 1);
@@ -64485,12 +64652,19 @@
 	        const widthLimit = this.table.tableNoFrameWidth * 5;
 	        this.screenColCount = Math.ceil(this.table.tableNoFrameWidth / defaultColWidth);
 	        this.firstScreenColLimit = this.bodyLeftCol + Math.min(this.colLimit, Math.ceil(widthLimit / defaultColWidth));
-	        const defaultRowHeight = this.table.defaultRowHeight;
+	        const defaultRowHeight = this.getEstimatedRowHeightForProxy();
 	        this.taskRowCount = Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight) * 1;
 	        const heightLimit = this.table.tableNoFrameHeight * 5;
 	        this.screenRowCount = Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight);
 	        this.firstScreenRowLimit = this.bodyTopRow + Math.min(this.rowLimit, Math.ceil(heightLimit / defaultRowHeight));
 	    }
+	    getEstimatedRowHeightForProxy() {
+	        const minSingleRowHeight = this.table.options.customConfig?.minSingleRowHeight;
+	        if (this.table.heightMode === 'autoHeight') {
+	            return isNumber$3(minSingleRowHeight) && minSingleRowHeight > 0 ? minSingleRowHeight : 2;
+	        }
+	        return this.table.defaultRowHeight;
+	    }
 	    createGroupForFirstScreen(cornerHeaderGroup, colHeaderGroup, rowHeaderGroup, rightFrozenGroup, bottomFrozenGroup, bodyGroup, xOrigin, yOrigin) {
 	        createGroupForFirstScreen(cornerHeaderGroup, colHeaderGroup, rowHeaderGroup, rightFrozenGroup, bottomFrozenGroup, bodyGroup, xOrigin, yOrigin, this);
 	    }
@@ -67230,6 +67404,7 @@
 	                },
 	                placement: baseIcon.tooltip.placement
 	            },
+	            appearDelay: baseIcon.tooltip.appearDelay,
 	            disappearDelay: baseIcon.tooltip.disappearDelay,
 	            style: Object.assign({}, scene.table.internalProps.theme?.tooltipStyle, baseIcon.tooltip?.style)
 	        };
@@ -68719,81 +68894,6 @@
 	            width: tableWidth,
 	            height: tableHeight
 	        });
-	        if (this.tableGroup.border) {
-	            const rectAttributes = this.tableGroup.border?.attribute;
-	            let borderTop;
-	            let borderRight;
-	            let borderBottom;
-	            let borderLeft;
-	            if (rectAttributes?.strokeArrayWidth) {
-	                borderTop = rectAttributes.strokeArrayWidth
-	                    ? rectAttributes.strokeArrayWidth[0]
-	                    : rectAttributes.lineWidth ?? 0;
-	                borderRight = rectAttributes.strokeArrayWidth
-	                    ? rectAttributes.strokeArrayWidth[1]
-	                    : rectAttributes.lineWidth ?? 0;
-	                borderBottom = rectAttributes.strokeArrayWidth
-	                    ? rectAttributes.strokeArrayWidth[2]
-	                    : rectAttributes.lineWidth ?? 0;
-	                borderLeft = rectAttributes.strokeArrayWidth
-	                    ? rectAttributes.strokeArrayWidth[3]
-	                    : rectAttributes.lineWidth ?? 0;
-	            }
-	            else {
-	                borderTop = rectAttributes?.lineWidth ?? 0;
-	                borderRight = rectAttributes?.lineWidth ?? 0;
-	                borderBottom = rectAttributes?.lineWidth ?? 0;
-	                borderLeft = rectAttributes?.lineWidth ?? 0;
-	            }
-	            if (this.tableGroup.border.type === 'rect') {
-	                if (this.table.theme.frameStyle?.innerBorder) {
-	                    this.tableGroup.border.setAttributes({
-	                        x: this.table.tableX + borderLeft / 2,
-	                        y: this.table.tableY + borderTop / 2,
-	                        width: this.tableGroup.attribute.width - borderLeft / 2 - borderRight / 2,
-	                        height: this.tableGroup.attribute.height - borderTop / 2 - borderBottom / 2
-	                    });
-	                }
-	                else {
-	                    this.tableGroup.border.setAttributes({
-	                        x: this.table.tableX - borderLeft / 2,
-	                        y: this.table.tableY - borderTop / 2,
-	                        width: this.tableGroup.attribute.width + borderLeft / 2 + borderRight / 2,
-	                        height: this.tableGroup.attribute.height + borderTop / 2 + borderBottom / 2
-	                    });
-	                }
-	            }
-	            else if (this.tableGroup.border.type === 'group') {
-	                if (this.table.theme.frameStyle?.innerBorder) {
-	                    this.tableGroup.border.setAttributes({
-	                        x: this.table.tableX + borderLeft / 2,
-	                        y: this.table.tableY + borderTop / 2,
-	                        width: this.tableGroup.attribute.width - borderLeft / 2 - borderRight / 2,
-	                        height: this.tableGroup.attribute.height - borderTop / 2 - borderBottom / 2
-	                    });
-	                    this.tableGroup.border.firstChild?.setAttributes({
-	                        x: 0,
-	                        y: 0,
-	                        width: this.tableGroup.attribute.width - borderLeft / 2 - borderRight / 2,
-	                        height: this.tableGroup.attribute.height - borderTop / 2 - borderBottom / 2
-	                    });
-	                }
-	                else {
-	                    this.tableGroup.border.setAttributes({
-	                        x: this.table.tableX - borderLeft / 2,
-	                        y: this.table.tableY - borderTop / 2,
-	                        width: this.tableGroup.attribute.width + borderLeft / 2 + borderRight / 2,
-	                        height: this.tableGroup.attribute.height + borderTop / 2 + borderBottom / 2
-	                    });
-	                    this.tableGroup.border.firstChild?.setAttributes({
-	                        x: borderLeft / 2,
-	                        y: borderTop / 2,
-	                        width: this.tableGroup.attribute.width,
-	                        height: this.tableGroup.attribute.height
-	                    });
-	                }
-	            }
-	        }
 	        const hasFrozenCols = this.table.frozenColCount > 0;
 	        const hasRightFrozenCols = this.table.rightFrozenColCount > 0;
 	        const hasFrozenRows = this.table.frozenRowCount > 0;
@@ -68855,8 +68955,93 @@
 	                height: 0
 	            });
 	        }
+	        if (hasBottomFrozenRows && !this.table.containerFit?.height) {
+	            const actualContentBottom = Math.max(this.colHeaderGroup.attribute.y + this.colHeaderGroup.attribute.height, this.cornerHeaderGroup.attribute.y + this.cornerHeaderGroup.attribute.height, this.rightTopCornerGroup.attribute.y + this.rightTopCornerGroup.attribute.height, this.rowHeaderGroup.attribute.y + this.rowHeaderGroup.attribute.height, this.bodyGroup.attribute.y + this.bodyGroup.attribute.height, this.rightFrozenGroup.attribute.y + this.rightFrozenGroup.attribute.height, this.leftBottomCornerGroup.attribute.y + this.leftBottomCornerGroup.attribute.height, this.bottomFrozenGroup.attribute.y + this.bottomFrozenGroup.attribute.height, this.rightBottomCornerGroup.attribute.y + this.rightBottomCornerGroup.attribute.height);
+	            if (actualContentBottom > 0 && actualContentBottom < this.tableGroup.attribute.height) {
+	                this.tableGroup.setAttribute('height', actualContentBottom);
+	            }
+	        }
+	        this.updateTableGroupBorder();
 	        this.updateDomContainer();
 	    }
+	    updateTableGroupBorder() {
+	        if (!this.tableGroup.border) {
+	            return;
+	        }
+	        const rectAttributes = this.tableGroup.border?.attribute;
+	        let borderTop;
+	        let borderRight;
+	        let borderBottom;
+	        let borderLeft;
+	        if (rectAttributes?.strokeArrayWidth) {
+	            borderTop = rectAttributes.strokeArrayWidth
+	                ? rectAttributes.strokeArrayWidth[0]
+	                : rectAttributes.lineWidth ?? 0;
+	            borderRight = rectAttributes.strokeArrayWidth
+	                ? rectAttributes.strokeArrayWidth[1]
+	                : rectAttributes.lineWidth ?? 0;
+	            borderBottom = rectAttributes.strokeArrayWidth
+	                ? rectAttributes.strokeArrayWidth[2]
+	                : rectAttributes.lineWidth ?? 0;
+	            borderLeft = rectAttributes.strokeArrayWidth
+	                ? rectAttributes.strokeArrayWidth[3]
+	                : rectAttributes.lineWidth ?? 0;
+	        }
+	        else {
+	            borderTop = rectAttributes?.lineWidth ?? 0;
+	            borderRight = rectAttributes?.lineWidth ?? 0;
+	            borderBottom = rectAttributes?.lineWidth ?? 0;
+	            borderLeft = rectAttributes?.lineWidth ?? 0;
+	        }
+	        if (this.tableGroup.border.type === 'rect') {
+	            if (this.table.theme.frameStyle?.innerBorder) {
+	                this.tableGroup.border.setAttributes({
+	                    x: this.table.tableX + borderLeft / 2,
+	                    y: this.table.tableY + borderTop / 2,
+	                    width: this.tableGroup.attribute.width - borderLeft / 2 - borderRight / 2,
+	                    height: this.tableGroup.attribute.height - borderTop / 2 - borderBottom / 2
+	                });
+	            }
+	            else {
+	                this.tableGroup.border.setAttributes({
+	                    x: this.table.tableX - borderLeft / 2,
+	                    y: this.table.tableY - borderTop / 2,
+	                    width: this.tableGroup.attribute.width + borderLeft / 2 + borderRight / 2,
+	                    height: this.tableGroup.attribute.height + borderTop / 2 + borderBottom / 2
+	                });
+	            }
+	        }
+	        else if (this.tableGroup.border.type === 'group') {
+	            if (this.table.theme.frameStyle?.innerBorder) {
+	                this.tableGroup.border.setAttributes({
+	                    x: this.table.tableX + borderLeft / 2,
+	                    y: this.table.tableY + borderTop / 2,
+	                    width: this.tableGroup.attribute.width - borderLeft / 2 - borderRight / 2,
+	                    height: this.tableGroup.attribute.height - borderTop / 2 - borderBottom / 2
+	                });
+	                this.tableGroup.border.firstChild?.setAttributes({
+	                    x: 0,
+	                    y: 0,
+	                    width: this.tableGroup.attribute.width - borderLeft / 2 - borderRight / 2,
+	                    height: this.tableGroup.attribute.height - borderTop / 2 - borderBottom / 2
+	                });
+	            }
+	            else {
+	                this.tableGroup.border.setAttributes({
+	                    x: this.table.tableX - borderLeft / 2,
+	                    y: this.table.tableY - borderTop / 2,
+	                    width: this.tableGroup.attribute.width + borderLeft / 2 + borderRight / 2,
+	                    height: this.tableGroup.attribute.height + borderTop / 2 + borderBottom / 2
+	                });
+	                this.tableGroup.border.firstChild?.setAttributes({
+	                    x: borderLeft / 2,
+	                    y: borderTop / 2,
+	                    width: this.tableGroup.attribute.width,
+	                    height: this.tableGroup.attribute.height
+	                });
+	            }
+	        }
+	    }
 	    updateRowHeight(row, detaY, skipTableHeightMap) {
 	        detaY = Math.round(detaY);
 	        updateRowHeight(this, row, detaY, skipTableHeightMap);
@@ -69465,7 +69650,7 @@
 	        const isVtableMerge = this.table.getCellRawRecord(col, row)?.vtableMerge;
 	        const type = isVtableMerge ? 'text' : this.table.getCellType(col, row);
 	        const cellGroup = this.getCell(col, row);
-	        if (type === 'image' || type === 'video') {
+	        if (type === 'image' || type === 'video' || type === 'audio') {
 	            updateImageCellContentWhileResize(cellGroup, col, row, 0, 0, this.table);
 	        }
 	    }
@@ -70989,11 +71174,15 @@
 	                    rowMax = rowMax + moveContext.sourceSize - 1;
 	                }
 	            }
-	            if (!state.table.transpose &&
+	            if (state.table.isListTable() &&
+	                !state.table.transpose &&
 	                (state.table.internalProps.layoutMap.isSeriesNumberInBody(state.columnMove.colSource, state.columnMove.rowSource) ||
 	                    state.columnMove.movingColumnOrRow === 'row')) {
+	                const sourceRecordPath = state.table.getRecordIndexByCell(0, moveContext.sourceIndex);
+	                const targetRecordPath = state.table.getRecordIndexByCell(0, moveContext.targetIndex);
 	                state.table.changeRecordOrder(moveContext.sourceIndex, moveContext.targetIndex);
-	                state.changeCheckboxAndRadioOrder(moveContext.sourceIndex, moveContext.targetIndex);
+	                state.changeCheckboxOrder(sourceRecordPath, targetRecordPath);
+	                state.changeRadioOrder(sourceRecordPath, targetRecordPath);
 	            }
 	            if (moveContext.moveType === 'column') {
 	                clearWidthsAndHeightsCache(colMin, colMax, 0, -1, state.table);
@@ -71436,30 +71625,89 @@
 	        radio?._handlePointerUp();
 	    }
 	}
-	function changeRadioOrder(sourceIndex, targetIndex, state) {
-	    const { radioState, table } = state;
-	    if (table.internalProps.transpose) {
-	        sourceIndex = table.getRecordShowIndexByCell(sourceIndex, 0);
-	        targetIndex = table.getRecordShowIndexByCell(targetIndex, 0);
+	function normalizeRecordPath$1(recordPath) {
+	    return Array.isArray(recordPath) ? recordPath : [recordPath];
+	}
+	function parseRecordPathKey(key) {
+	    return isNumber$3(key) ? [key] : key.split(',').map(item => Number(item));
+	}
+	function isSameRecordPath$1(source, target) {
+	    return source.length === target.length && source.every((item, index) => item === target[index]);
+	}
+	function isSameParentPath$1(source, target) {
+	    if (source.length !== target.length) {
+	        return false;
 	    }
-	    else {
-	        sourceIndex = table.getRecordShowIndexByCell(0, sourceIndex);
-	        targetIndex = table.getRecordShowIndexByCell(0, targetIndex);
+	    return source.slice(0, -1).every((item, index) => item === target[index]);
+	}
+	function isDescendantPath$1(path, ancestor) {
+	    return ancestor.length <= path.length && ancestor.every((item, index) => item === path[index]);
+	}
+	function getMovedRecordPath$1(path, source, target) {
+	    return target.concat(path.slice(source.length));
+	}
+	function getShiftedSiblingPath$1(path, parent, sourceIndex, targetIndex) {
+	    if (path.length <= parent.length || !isDescendantPath$1(path.slice(0, parent.length), parent)) {
+	        return path;
 	    }
-	    if (sourceIndex > targetIndex) {
-	        const sourceRecord = radioState[sourceIndex];
-	        for (let i = sourceIndex; i > targetIndex; i--) {
-	            radioState[i] = radioState[i - 1];
-	        }
-	        radioState[targetIndex] = sourceRecord;
+	    const siblingIndex = path[parent.length];
+	    if (sourceIndex < targetIndex && siblingIndex > sourceIndex && siblingIndex <= targetIndex) {
+	        const shifted = [...path];
+	        shifted[parent.length] = siblingIndex - 1;
+	        return shifted;
 	    }
-	    else if (sourceIndex < targetIndex) {
-	        const sourceRecord = radioState[sourceIndex];
-	        for (let i = sourceIndex; i < targetIndex; i++) {
-	            radioState[i] = radioState[i + 1];
-	        }
-	        radioState[targetIndex] = sourceRecord;
+	    if (sourceIndex > targetIndex && siblingIndex >= targetIndex && siblingIndex < sourceIndex) {
+	        const shifted = [...path];
+	        shifted[parent.length] = siblingIndex + 1;
+	        return shifted;
+	    }
+	    return path;
+	}
+	function getChangedRecordPath(path, sourcePath, targetPath) {
+	    const parentPath = sourcePath.slice(0, -1);
+	    const sourceIndex = sourcePath[sourcePath.length - 1];
+	    const targetIndex = targetPath[targetPath.length - 1];
+	    if (isDescendantPath$1(path, sourcePath)) {
+	        return getMovedRecordPath$1(path, sourcePath, targetPath);
+	    }
+	    return getShiftedSiblingPath$1(path, parentPath, sourceIndex, targetIndex);
+	}
+	function getRadioStateValue(recordPath) {
+	    return recordPath.length === 1 ? recordPath[0] : recordPath;
+	}
+	function getRadioStateKey(recordPath) {
+	    return recordPath.toString();
+	}
+	function changeRadioStateValue(value, sourcePath, targetPath) {
+	    if (isNumber$3(value)) {
+	        return getRadioStateValue(getChangedRecordPath([value], sourcePath, targetPath));
+	    }
+	    if (Array.isArray(value)) {
+	        return getRadioStateValue(getChangedRecordPath(value, sourcePath, targetPath));
+	    }
+	    if (isString$2(value)) {
+	        return getRadioStateKey(getChangedRecordPath(parseRecordPathKey(value), sourcePath, targetPath));
+	    }
+	    if (isObject$7(value)) {
+	        const nextValue = {};
+	        Object.keys(value).forEach(key => {
+	            const nextPath = getChangedRecordPath(parseRecordPathKey(key), sourcePath, targetPath);
+	            nextValue[getRadioStateKey(nextPath)] = value[key];
+	        });
+	        return nextValue;
 	    }
+	    return value;
+	}
+	function changeRadioOrder(sourceRecordPath, targetRecordPath, state) {
+	    const { radioState } = state;
+	    const sourcePath = normalizeRecordPath$1(sourceRecordPath);
+	    const targetPath = normalizeRecordPath$1(targetRecordPath);
+	    if (isSameRecordPath$1(sourcePath, targetPath) || !isSameParentPath$1(sourcePath, targetPath)) {
+	        return;
+	    }
+	    Object.keys(radioState).forEach(field => {
+	        radioState[field] = changeRadioStateValue(radioState[field], sourcePath, targetPath);
+	    });
 	}
 
 	function setCheckedState(col, row, field, checked, state) {
@@ -71730,62 +71978,73 @@
 	        }
 	    }
 	}
-	function changeCheckboxOrder(sourceIndex, targetIndex, state) {
-	    const { checkedState, table } = state;
-	    let source;
-	    let target;
-	    if (table.internalProps.transpose) {
-	        sourceIndex = table.getRecordShowIndexByCell(sourceIndex, 0);
-	        targetIndex = table.getRecordShowIndexByCell(targetIndex, 0);
+	function normalizeRecordPath(recordPath) {
+	    return isArray$5(recordPath) ? recordPath : [recordPath];
+	}
+	function parseCheckboxStateKey(key) {
+	    return isNumber$3(key) ? [key] : key.split(',').map(item => Number(item));
+	}
+	function stringifyRecordPath(recordPath) {
+	    return recordPath.toString();
+	}
+	function isSameRecordPath(source, target) {
+	    return source.length === target.length && source.every((item, index) => item === target[index]);
+	}
+	function isSameParentPath(source, target) {
+	    if (source.length !== target.length) {
+	        return false;
 	    }
-	    else {
-	        source = table.isPivotTable() ? undefined : table.getRecordIndexByCell(0, sourceIndex);
-	        target = table.isPivotTable() ? undefined : table.getRecordIndexByCell(0, targetIndex);
+	    return source.slice(0, -1).every((item, index) => item === target[index]);
+	}
+	function isDescendantPath(path, ancestor) {
+	    return ancestor.length <= path.length && ancestor.every((item, index) => item === path[index]);
+	}
+	function getMovedRecordPath(path, source, target) {
+	    return target.concat(path.slice(source.length));
+	}
+	function getShiftedSiblingPath(path, parent, sourceIndex, targetIndex) {
+	    if (path.length <= parent.length || !isDescendantPath(path.slice(0, parent.length), parent)) {
+	        return path;
 	    }
-	    if (isNumber$3(source) && isNumber$3(target)) {
-	        sourceIndex = source;
-	        targetIndex = target;
-	        if (sourceIndex > targetIndex) {
-	            const sourceRecord = checkedState.get(sourceIndex.toString());
-	            for (let i = sourceIndex; i > targetIndex; i--) {
-	                checkedState.set(i.toString(), checkedState.get((i - 1).toString()));
-	            }
-	            checkedState.set(targetIndex.toString(), sourceRecord);
-	        }
-	        else if (sourceIndex < targetIndex) {
-	            const sourceRecord = checkedState.get(sourceIndex.toString());
-	            for (let i = sourceIndex; i < targetIndex; i++) {
-	                checkedState.set(i.toString(), checkedState.get((i + 1).toString()));
-	            }
-	            checkedState.set(targetIndex.toString(), sourceRecord);
-	        }
+	    const siblingIndex = path[parent.length];
+	    if (sourceIndex < targetIndex && siblingIndex > sourceIndex && siblingIndex <= targetIndex) {
+	        const shifted = [...path];
+	        shifted[parent.length] = siblingIndex - 1;
+	        return shifted;
 	    }
-	    else if (isArray$5(source) && isArray$5(target)) {
-	        sourceIndex = source[source.length - 1];
-	        targetIndex = target[target.length - 1];
-	        if (sourceIndex > targetIndex) {
-	            const sourceRecord = checkedState.get(source.toString());
-	            for (let i = sourceIndex; i > targetIndex; i--) {
-	                const now = [...source];
-	                now[now.length - 1] = i;
-	                const last = [...source];
-	                last[last.length - 1] = i - 1;
-	                checkedState.set(now.toString(), checkedState.get(last.toString()));
-	            }
-	            checkedState.set(target.toString(), sourceRecord);
+	    if (sourceIndex > targetIndex && siblingIndex >= targetIndex && siblingIndex < sourceIndex) {
+	        const shifted = [...path];
+	        shifted[parent.length] = siblingIndex + 1;
+	        return shifted;
+	    }
+	    return path;
+	}
+	function changeCheckboxOrder(sourceRecordPath, targetRecordPath, state) {
+	    const { checkedState } = state;
+	    const sourcePath = normalizeRecordPath(sourceRecordPath);
+	    const targetPath = normalizeRecordPath(targetRecordPath);
+	    if (isSameRecordPath(sourcePath, targetPath) || !isSameParentPath(sourcePath, targetPath)) {
+	        return;
+	    }
+	    const parentPath = sourcePath.slice(0, -1);
+	    const sourceIndex = sourcePath[sourcePath.length - 1];
+	    const targetIndex = targetPath[targetPath.length - 1];
+	    const nextCheckedState = new Map();
+	    checkedState.forEach((value, key) => {
+	        const keyPath = parseCheckboxStateKey(key);
+	        let nextPath;
+	        if (isDescendantPath(keyPath, sourcePath)) {
+	            nextPath = getMovedRecordPath(keyPath, sourcePath, targetPath);
 	        }
-	        else if (sourceIndex < targetIndex) {
-	            const sourceRecord = checkedState.get(source.toString());
-	            for (let i = sourceIndex; i < targetIndex; i++) {
-	                const now = [...source];
-	                now[now.length - 1] = i;
-	                const next = [...source];
-	                next[next.length - 1] = i + 1;
-	                checkedState.set(now.toString(), checkedState.get(next.toString()));
-	            }
-	            checkedState.set(target.toString(), sourceRecord);
+	        else {
+	            nextPath = getShiftedSiblingPath(keyPath, parentPath, sourceIndex, targetIndex);
 	        }
-	    }
+	        nextCheckedState.set(stringifyRecordPath(nextPath), value);
+	    });
+	    checkedState.clear();
+	    nextCheckedState.forEach((value, key) => {
+	        checkedState.set(key, value);
+	    });
 	}
 	function getGroupCheckboxState(table) {
 	    const result = [];
@@ -72699,6 +72958,7 @@
 	                        placement: inlineIcon.attribute.tooltip.placement
 	                    },
 	                    style: Object.assign({}, this.table.internalProps.theme?.tooltipStyle, inlineIcon.tooltip?.style, inlineIcon.attribute?.tooltip?.style),
+	                    appearDelay: inlineIcon.attribute.tooltip.appearDelay,
 	                    disappearDelay: inlineIcon.attribute.tooltip.disappearDelay
 	                };
 	                if (!this.table.internalProps.tooltipHandler.isBinded(tooltipOptions)) {
@@ -73600,12 +73860,14 @@
 	    syncRadioState(col, row, field, radioType, indexInCell, isChecked) {
 	        return syncRadioState(col, row, field, radioType, indexInCell, isChecked, this);
 	    }
-	    changeCheckboxAndRadioOrder(sourceIndex, targetIndex) {
+	    changeCheckboxOrder(sourceRecordPath, targetRecordPath) {
 	        if (this.checkedState.size) {
-	            changeCheckboxOrder(sourceIndex, targetIndex, this);
+	            changeCheckboxOrder(sourceRecordPath, targetRecordPath, this);
 	        }
-	        if (this.radioState.length) {
-	            changeRadioOrder(sourceIndex, targetIndex, this);
+	    }
+	    changeRadioOrder(sourceRecordPath, targetRecordPath) {
+	        if (Object.keys(this.radioState).length) {
+	            changeRadioOrder(sourceRecordPath, targetRecordPath, this);
 	        }
 	    }
 	    setCustomSelectRanges(customSelectRanges) {
@@ -73614,8 +73876,243 @@
 	    }
 	}
 
+	const AUDIO_EXTENSIONS = new Set(['mp3', 'wav', 'oga', 'm4a', 'aac', 'flac', 'opus']);
+	function isAudioUrl(value) {
+	    if (typeof value !== 'string') {
+	        return false;
+	    }
+	    const trimmedValue = value.trim();
+	    const queryIndex = trimmedValue.indexOf('?');
+	    const hashIndex = trimmedValue.indexOf('#');
+	    let endIndex = trimmedValue.length;
+	    if (queryIndex >= 0) {
+	        endIndex = queryIndex;
+	    }
+	    if (hashIndex >= 0 && hashIndex < endIndex) {
+	        endIndex = hashIndex;
+	    }
+	    const path = trimmedValue.slice(0, endIndex);
+	    const dotIndex = path.lastIndexOf('.');
+	    if (dotIndex < 0 || dotIndex === path.length - 1) {
+	        return false;
+	    }
+	    return AUDIO_EXTENSIONS.has(path.slice(dotIndex + 1).toLowerCase());
+	}
+
+	const MEDIA_PREVIEW_MANAGER_KEY = '__vtable_media_preview_manager__';
+	function formatAudioTime(time) {
+	    if (!Number.isFinite(time) || time < 0) {
+	        return '0:00';
+	    }
+	    const minutes = Math.floor(time / 60);
+	    const seconds = Math.floor(time % 60);
+	    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+	}
+	function updateAudioProgressStyle(progress, value) {
+	    progress.style.background = `linear-gradient(
+    to right,
+    #2563EB 0%,
+    #2563EB ${value}%,
+    #D1D5DB ${value}%,
+    #D1D5DB 100%
+  )`;
+	}
+	function ensureAudioPreviewStyle() {
+	    const styleId = 'vtable-audio-preview-style';
+	    if (document.getElementById(styleId)) {
+	        return;
+	    }
+	    const style = document.createElement('style');
+	    style.id = styleId;
+	    style.textContent = `
+    .vtable-audio-preview-progress {
+      -webkit-appearance: none;
+      appearance: none;
+    }
+    .vtable-audio-preview-progress::-webkit-slider-runnable-track {
+      height: 4px;
+      border-radius: 999px;
+      background: transparent;
+    }
+    .vtable-audio-preview-progress::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 12px;
+      height: 12px;
+      margin-top: -4px;
+      border-radius: 50%;
+      border: 0;
+      background: #2563EB;
+    }
+    .vtable-audio-preview-progress::-moz-range-track {
+      height: 4px;
+      border-radius: 999px;
+      background: transparent;
+    }
+    .vtable-audio-preview-progress::-moz-range-thumb {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      border: 0;
+      background: #2563EB;
+    }
+  `;
+	    document.head.appendChild(style);
+	}
+	function createAudioPreview(cellValue) {
+	    ensureAudioPreviewStyle();
+	    const audio = document.createElement('audio');
+	    audio.src = cellValue;
+	    audio.preload = 'auto';
+	    let released = false;
+	    const wrapper = document.createElement('div');
+	    wrapper.style.width = '80%';
+	    wrapper.style.maxWidth = '640px';
+	    wrapper.style.height = '54px';
+	    wrapper.style.boxSizing = 'border-box';
+	    wrapper.style.padding = '0 16px';
+	    wrapper.style.borderRadius = '27px';
+	    wrapper.style.background = '#F8FAFC';
+	    wrapper.style.display = 'flex';
+	    wrapper.style.alignItems = 'center';
+	    wrapper.style.gap = '10px';
+	    wrapper.style.boxShadow = '0 8px 24px rgba(15, 23, 42, 0.16)';
+	    const playButton = document.createElement('button');
+	    playButton.type = 'button';
+	    playButton.textContent = '▶';
+	    playButton.style.width = '34px';
+	    playButton.style.height = '34px';
+	    playButton.style.border = '1px solid #CBD5E1';
+	    playButton.style.borderRadius = '8px';
+	    playButton.style.background = '#EFF6FF';
+	    playButton.style.color = '#0F172A';
+	    playButton.style.cursor = 'pointer';
+	    playButton.style.flex = '0 0 auto';
+	    playButton.style.fontSize = '14px';
+	    const timeLabel = document.createElement('span');
+	    timeLabel.textContent = '0:00 / 0:00';
+	    timeLabel.style.color = '#0F172A';
+	    timeLabel.style.font = '14px sans-serif';
+	    timeLabel.style.whiteSpace = 'nowrap';
+	    const progress = document.createElement('input');
+	    progress.className = 'vtable-audio-preview-progress';
+	    progress.type = 'range';
+	    progress.min = '0';
+	    progress.max = '100';
+	    progress.value = '0';
+	    progress.step = '0.1';
+	    progress.style.flex = '1 1 auto';
+	    progress.style.height = '4px';
+	    progress.style.borderRadius = '999px';
+	    progress.style.outline = 'none';
+	    progress.style.cursor = 'pointer';
+	    progress.style.accentColor = '#2563EB';
+	    updateAudioProgressStyle(progress, 0);
+	    const updateProgress = () => {
+	        const duration = Number.isFinite(audio.duration) ? audio.duration : 0;
+	        const currentTime = audio.currentTime || 0;
+	        const value = duration > 0 ? Math.min(100, (currentTime / duration) * 100) : 0;
+	        progress.disabled = duration <= 0;
+	        progress.style.cursor = duration > 0 ? 'pointer' : 'default';
+	        progress.value = `${value}`;
+	        timeLabel.textContent = `${formatAudioTime(currentTime)} / ${formatAudioTime(duration)}`;
+	        updateAudioProgressStyle(progress, value);
+	    };
+	    playButton.addEventListener('click', e => {
+	        e.stopPropagation();
+	        if (audio.paused) {
+	            const playPromise = audio.play();
+	            if (playPromise) {
+	                playPromise.catch(error => {
+	                    if (released || error?.name === 'AbortError') {
+	                        return;
+	                    }
+	                    playButton.textContent = '▶';
+	                });
+	            }
+	        }
+	        else {
+	            audio.pause();
+	        }
+	    });
+	    progress.addEventListener('click', e => {
+	        e.stopPropagation();
+	    });
+	    progress.addEventListener('input', () => {
+	        const duration = Number.isFinite(audio.duration) ? audio.duration : 0;
+	        const value = Number(progress.value);
+	        if (duration > 0 && Number.isFinite(value)) {
+	            audio.currentTime = (duration * value) / 100;
+	        }
+	        updateProgress();
+	    });
+	    audio.addEventListener('loadedmetadata', updateProgress);
+	    audio.addEventListener('durationchange', updateProgress);
+	    audio.addEventListener('timeupdate', updateProgress);
+	    audio.addEventListener('play', () => {
+	        playButton.textContent = '❚❚';
+	    });
+	    audio.addEventListener('pause', () => {
+	        playButton.textContent = '▶';
+	    });
+	    audio.addEventListener('ended', () => {
+	        audio.currentTime = 0;
+	        playButton.textContent = '▶';
+	        updateProgress();
+	    });
+	    wrapper.appendChild(playButton);
+	    wrapper.appendChild(timeLabel);
+	    wrapper.appendChild(progress);
+	    wrapper.appendChild(audio);
+	    return {
+	        element: wrapper,
+	        destroy: () => {
+	            released = true;
+	            audio.pause();
+	            audio.removeAttribute('src');
+	            audio.load();
+	        }
+	    };
+	}
+	function createMediaPreviewManager(table) {
+	    const manager = {
+	        closePreview: null,
+	        registered: false,
+	        close() {
+	            const closePreview = manager.closePreview;
+	            manager.closePreview = null;
+	            closePreview?.();
+	        },
+	        open(closePreview) {
+	            manager.close();
+	            manager.closePreview = closePreview;
+	        },
+	        release() {
+	            manager.close();
+	            manager.registered = false;
+	        },
+	        ensureRegistered() {
+	            if (manager.registered) {
+	                return;
+	            }
+	            table.addReleaseObj(manager);
+	            manager.registered = true;
+	        }
+	    };
+	    return manager;
+	}
+	function getMediaPreviewManager(table) {
+	    const tableWithManager = table;
+	    if (!tableWithManager[MEDIA_PREVIEW_MANAGER_KEY]) {
+	        tableWithManager[MEDIA_PREVIEW_MANAGER_KEY] = createMediaPreviewManager(table);
+	    }
+	    const manager = tableWithManager[MEDIA_PREVIEW_MANAGER_KEY];
+	    manager.ensureRegistered();
+	    return manager;
+	}
 	function bindMediaClick(table) {
 	    if (Env.mode === 'browser') {
+	        getMediaPreviewManager(table);
 	        table.on(TABLE_EVENT_TYPE.CLICK_CELL, (e) => {
 	            const { col, row } = e;
 	            if (e.target.type === 'image' && e.target.role && e.target.role.startsWith('icon')) {
@@ -73693,6 +74190,7 @@
 	                if (clickToPreview === false) {
 	                    return;
 	                }
+	                const previewManager = getMediaPreviewManager(table);
 	                const overlay = document.createElement('div');
 	                overlay.style.width = '100%';
 	                overlay.style.height = '100%';
@@ -73705,9 +74203,15 @@
 	                overlay.style.alignItems = 'center';
 	                overlay.style.overflow = 'hidden';
 	                overlay.style.zIndex = '9999';
+	                const closeOverlay = () => {
+	                    if (overlay.parentNode) {
+	                        document.body.removeChild(overlay);
+	                    }
+	                };
+	                previewManager.open(closeOverlay);
 	                overlay.addEventListener('click', e => {
 	                    if (e.target === overlay) {
-	                        document.body.removeChild(overlay);
+	                        previewManager.close();
 	                    }
 	                });
 	                const image = new Image();
@@ -73718,11 +74222,12 @@
 	                overlay.appendChild(image);
 	                document.body.appendChild(overlay);
 	            }
-	            else if (cellType === 'video') {
+	            else if (cellType === 'audio' || (cellType === 'video' && isAudioUrl(cellValue))) {
 	                const { clickToPreview } = columnDefine;
 	                if (clickToPreview === false) {
 	                    return;
 	                }
+	                const previewManager = getMediaPreviewManager(table);
 	                const overlay = document.createElement('div');
 	                overlay.style.width = '100%';
 	                overlay.style.height = '100%';
@@ -73735,18 +74240,69 @@
 	                overlay.style.alignItems = 'center';
 	                overlay.style.overflow = 'hidden';
 	                overlay.style.zIndex = '9999';
+	                const audioPreview = createAudioPreview(cellValue);
+	                const closeOverlay = () => {
+	                    audioPreview.destroy();
+	                    if (overlay.parentNode) {
+	                        document.body.removeChild(overlay);
+	                    }
+	                };
+	                previewManager.open(closeOverlay);
 	                overlay.addEventListener('click', e => {
 	                    if (e.target === overlay) {
-	                        document.body.removeChild(overlay);
+	                        previewManager.close();
 	                    }
 	                });
+	                overlay.appendChild(audioPreview.element);
+	                document.body.appendChild(overlay);
+	            }
+	            else if (cellType === 'video') {
+	                const { clickToPreview } = columnDefine;
+	                if (clickToPreview === false) {
+	                    return;
+	                }
+	                const previewManager = getMediaPreviewManager(table);
+	                const overlay = document.createElement('div');
+	                overlay.style.width = '100%';
+	                overlay.style.height = '100%';
+	                overlay.style.position = 'fixed';
+	                overlay.style.top = '0';
+	                overlay.style.left = '0';
+	                overlay.style.backgroundColor = 'rgba(30, 30, 30, 0.4)';
+	                overlay.style.display = 'flex';
+	                overlay.style.justifyContent = 'center';
+	                overlay.style.alignItems = 'center';
+	                overlay.style.overflow = 'hidden';
+	                overlay.style.zIndex = '9999';
 	                const video = document.createElement('video');
 	                video.src = cellValue;
 	                video.style.maxWidth = '80%';
 	                video.style.maxHeight = '80%';
 	                video.setAttribute('preload', 'auto');
 	                video.setAttribute('controls', 'true');
+	                const closeOverlay = () => {
+	                    try {
+	                        video.pause();
+	                    }
+	                    catch (err) {
+	                    }
+	                    video.removeAttribute('src');
+	                    try {
+	                        video.load();
+	                    }
+	                    catch (err) {
+	                    }
+	                    if (overlay.parentNode) {
+	                        document.body.removeChild(overlay);
+	                    }
+	                };
+	                previewManager.open(closeOverlay);
 	                overlay.appendChild(video);
+	                overlay.addEventListener('click', e => {
+	                    if (e.target === overlay) {
+	                        previewManager.close();
+	                    }
+	                });
 	                document.body.appendChild(overlay);
 	            }
 	        });
@@ -77639,8 +78195,8 @@
 	            case 'text':
 	                return TextStyle;
 	            case 'image':
-	                return ImageStyle$1;
 	            case 'video':
+	            case 'audio':
 	                return ImageStyle$1;
 	            case 'link':
 	                return TextStyle;
@@ -79120,8 +79676,8 @@
 	            case 'text':
 	                return TextHeaderStyle;
 	            case 'image':
-	                return ImageStyle;
 	            case 'video':
+	            case 'audio':
 	                return ImageStyle;
 	            case 'link':
 	                return TextHeaderStyle;
@@ -81368,7 +81924,7 @@
 	        return TABLE_EVENT_TYPE;
 	    }
 	    options;
-	    version = "1.26.6";
+	    version = "1.26.7";
 	    pagination;
 	    id = `VTable${Date.now()}`;
 	    headerStyleCache;
@@ -83587,10 +84143,15 @@
 	                    rowMax = rowMax + moveContext.sourceSize - 1;
 	                }
 	            }
-	            if (!this.transpose &&
+	            if (this.isListTable() &&
+	                !this.transpose &&
 	                (this.isSeriesNumberInBody(args.source.col, args.source.row) || args.movingColumnOrRow === 'row')) {
+	                const listTable = this;
+	                const sourceRecordPath = listTable.getRecordIndexByCell(args.source.col, moveContext.sourceIndex);
+	                const targetRecordPath = listTable.getRecordIndexByCell(args.target.col, moveContext.targetIndex);
 	                this.changeRecordOrder(moveContext.sourceIndex, moveContext.targetIndex);
-	                this.stateManager.changeCheckboxAndRadioOrder(moveContext.sourceIndex, moveContext.targetIndex);
+	                this.stateManager.changeCheckboxOrder(sourceRecordPath, targetRecordPath);
+	                this.stateManager.changeRadioOrder(sourceRecordPath, targetRecordPath);
 	            }
 	            if (moveContext.moveType === 'column') {
 	                for (let col = colMin; col <= colMax; col++) {
@@ -90108,6 +90669,8 @@
 	        }
 	        typeof window !== 'undefined' ? window.performance.now() : 0;
 	        const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
+	        const oldScrollLeft = this.stateManager.scroll.horizontalBarPos;
+	        const oldScrollTop = this.stateManager.scroll.verticalBarPos;
 	        this.scenegraph.clearCells();
 	        if (sort !== undefined) {
 	            if (sort === null || (!Array.isArray(sort) && isValid$1(sort.field)) || Array.isArray(sort)) {
@@ -90140,6 +90703,8 @@
 	        }
 	        this.stateManager.initCheckedState(records);
 	        this.clearCellStyleCache();
+	        this.stateManager.scroll.horizontalBarPos = 0;
+	        this.stateManager.scroll.verticalBarPos = 0;
 	        this.scenegraph.createSceneGraph();
 	        this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
 	        this._updateSize();
@@ -90155,6 +90720,12 @@
 	            }
 	        });
 	        this.scenegraph.resize();
+	        if (oldScrollLeft) {
+	            this.stateManager.setScrollLeft(oldScrollLeft, undefined, false);
+	        }
+	        if (oldScrollTop) {
+	            this.stateManager.setScrollTop(oldScrollTop, undefined, false);
+	        }
 	        if (this.options.emptyTip) {
 	            if (this.internalProps.emptyTip) {
 	                this.internalProps.emptyTip?.resetVisible();
@@ -93577,6 +94148,7 @@
 	    _table;
 	    _tooltipInstances;
 	    _attachInfo;
+	    _pendingInfo;
 	    confine;
 	    constructor(table, confine) {
 	        this._table = table;
@@ -93585,14 +94157,39 @@
 	        this.confine = confine;
 	    }
 	    release() {
+	        this._clearPendingBind();
 	        const tooltipInstances = this._tooltipInstances;
 	        for (const k in tooltipInstances) {
 	            tooltipInstances[k]?.release?.();
 	        }
 	        delete this._tooltipInstances;
 	        this._attachInfo = null;
+	        this._pendingInfo = null;
 	    }
 	    _bindToCell(col, row, tooltipOptions) {
+	        this._clearPendingBind();
+	        const appearDelay = tooltipOptions?.appearDelay;
+	        if (tooltipOptions && appearDelay && appearDelay > 0) {
+	            this._unbindAttachedTooltip();
+	            const id = setTimeout(() => {
+	                this._pendingInfo = null;
+	                this._bindToCellImmediately(col, row, tooltipOptions);
+	            }, appearDelay);
+	            this._pendingInfo = {
+	                id,
+	                col,
+	                row,
+	                tooltipOptions
+	            };
+	            return;
+	        }
+	        this._bindToCellImmediately(col, row, tooltipOptions);
+	    }
+	    _bindToCellImmediately(col, row, tooltipOptions) {
+	        if (!tooltipOptions) {
+	            this._unbindAttachedTooltip();
+	            return;
+	        }
 	        const info = this._attachInfo;
 	        const instance = this._getTooltipInstanceInfo(col, row);
 	        if (info && (!instance || info.instance !== instance)) {
@@ -93608,6 +94205,21 @@
 	            this._attachInfo = { range, instance, tooltipOptions };
 	        }
 	    }
+	    _clearPendingBind() {
+	        if (this._pendingInfo) {
+	            clearTimeout(this._pendingInfo.id);
+	            this._pendingInfo = null;
+	        }
+	    }
+	    _unbindAttachedTooltip() {
+	        const info = this._attachInfo;
+	        if (!info) {
+	            return;
+	        }
+	        const { instance } = info;
+	        instance?.unbindTooltipElement();
+	        this._attachInfo = null;
+	    }
 	    _move(col, row, tooltipOptions) {
 	        const info = this._attachInfo;
 	        if (!info || !cellInRange(info.range, col, row)) {
@@ -93627,15 +94239,13 @@
 	        instance?.locateTooltipElement(col, row, position, referencePosition, this.confine);
 	    }
 	    _unbindFromCell() {
-	        const info = this._attachInfo;
-	        if (!info) {
-	            return;
-	        }
-	        const { instance } = info;
-	        instance?.unbindTooltipElement();
-	        this._attachInfo = null;
+	        this._clearPendingBind();
+	        this._unbindAttachedTooltip();
 	    }
 	    _isBindCell(col, row) {
+	        if (this._pendingInfo && this._pendingInfo.col === col && this._pendingInfo.row === row) {
+	            return true;
+	        }
 	        const info = this._attachInfo;
 	        if (!info) {
 	            return false;
@@ -93748,7 +94358,8 @@
 	        return instance;
 	    }
 	    isBinded(tooltipOptions) {
-	        if (JSON.stringify(tooltipOptions) === JSON.stringify(this._attachInfo?.tooltipOptions)) {
+	        if (JSON.stringify(tooltipOptions) === JSON.stringify(this._attachInfo?.tooltipOptions) ||
+	            JSON.stringify(tooltipOptions) === JSON.stringify(this._pendingInfo?.tooltipOptions)) {
 	            return true;
 	        }
 	        return false;
@@ -94113,7 +94724,7 @@
 	        }
 	    }
 	    cellGroup.AABBBounds.width();
-	    if ((isNoChartDataRenderNothing && Array.isArray(table.getCellValue(col, row))) || !isNoChartDataRenderNothing) {
+	    if ((isNoChartDataRenderNothing && Array.isArray(dataValue)) || !isNoChartDataRenderNothing) {
 	        const chartGroup = new Chart(isShareChartSpec, {
 	            stroke: false,
 	            x: padding[3],
@@ -94127,7 +94738,7 @@
 	            height: height - padding[2] - padding[0],
 	            chartInstance,
 	            dataId,
-	            data: table.getCellValue(col, row) || [],
+	            data: dataValue || [],
 	            cellPadding: padding,
 	            dpr: table.internalProps.pixelRatio,
 	            detectPickChartItem: table.options.customConfig?.detectPickChartItem,
@@ -94290,7 +94901,8 @@
 	    }
 	}
 
-	function createCheckboxCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, isCheckboxTree) {
+	function createCheckboxCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, isCheckboxTree, cellValue) {
+	    const value = arguments.length >= 20 ? cellValue : table.getCellValue(col, row);
 	    if (!cellGroup) {
 	        const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
 	        if (isAsync) {
@@ -94382,7 +94994,7 @@
 	            }
 	        });
 	    }
-	    const checkboxComponent = createCheckbox(col, row, colWidth - iconWidth, width, height, padding, cellTheme, define, table, isCheckboxTree);
+	    const checkboxComponent = createCheckbox(col, row, colWidth - iconWidth, width, height, padding, cellTheme, define, table, isCheckboxTree, value);
 	    if (cellContentLeftIcons.length === 1 &&
 	        (cellContentLeftIcons[0].name === InternalIconName.expandIconName ||
 	            cellContentLeftIcons[0].name === InternalIconName.collapseIconName)) {
@@ -94487,7 +95099,7 @@
 	    }
 	    return cellGroup;
 	}
-	function createCheckbox(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, table, isCheckboxTree) {
+	function createCheckbox(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, table, isCheckboxTree, cellValue) {
 	    const style = table._getCellStyle(col, row);
 	    const size = getProp('size', style, col, row, table);
 	    const spaceBetweenTextAndIcon = getProp('spaceBetweenTextAndIcon', style, col, row, table);
@@ -94500,7 +95112,7 @@
 	    const disableCheckedStroke = getProp('disableCheckedStroke', style, col, row, table);
 	    const checkIconImage = getProp('checkIconImage', style, col, row, table);
 	    const indeterminateIconImage = getProp('indeterminateIconImage', style, col, row, table);
-	    const value = table.getCellValue(col, row);
+	    const value = cellValue;
 	    const dataValue = table.getCellOriginValue(col, row);
 	    let isChecked;
 	    let isDisabled;
@@ -94608,31 +95220,55 @@
 	    return checkbox;
 	}
 
-	function createRadioCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, table, cellTheme, define, range) {
+	function createRadioCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, table, cellTheme, define, range, isAsync, cellValue) {
+	    const value = arguments.length >= 18 ? cellValue : table.getCellValue(col, row);
 	    if (!cellGroup) {
 	        const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
-	        cellGroup = new Group$1({
-	            x: xOrigin,
-	            y: yOrigin,
-	            width,
-	            height,
-	            lineWidth: cellTheme?.group?.lineWidth ?? undefined,
-	            fill: cellTheme?.group?.fill ?? undefined,
-	            stroke: cellTheme?.group?.stroke ?? undefined,
-	            strokeArrayWidth: strokeArrayWidth,
-	            strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
-	            cursor: cellTheme?.group?.cursor ?? undefined,
-	            lineDash: cellTheme?.group?.lineDash ?? undefined,
-	            lineCap: 'butt',
-	            clip: true,
-	            cornerRadius: cellTheme.group.cornerRadius
-	        });
-	        cellGroup.role = 'cell';
-	        cellGroup.col = col;
-	        cellGroup.row = row;
-	        cellGroup = columnGroup?.addCellGroup(cellGroup) ?? cellGroup;
+	        if (isAsync) {
+	            cellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
+	            if (cellGroup && cellGroup.role === 'cell') {
+	                cellGroup.setAttributes({
+	                    x: xOrigin,
+	                    y: yOrigin,
+	                    width,
+	                    height,
+	                    lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+	                    fill: cellTheme?.group?.fill ?? undefined,
+	                    stroke: cellTheme?.group?.stroke ?? undefined,
+	                    strokeArrayWidth: strokeArrayWidth,
+	                    strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
+	                    cursor: cellTheme?.group?.cursor ?? undefined,
+	                    lineDash: cellTheme?.group?.lineDash ?? undefined,
+	                    lineCap: 'butt',
+	                    clip: true,
+	                    cornerRadius: cellTheme.group.cornerRadius
+	                });
+	            }
+	        }
+	        if (!cellGroup || cellGroup.role !== 'cell') {
+	            cellGroup = new Group$1({
+	                x: xOrigin,
+	                y: yOrigin,
+	                width,
+	                height,
+	                lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+	                fill: cellTheme?.group?.fill ?? undefined,
+	                stroke: cellTheme?.group?.stroke ?? undefined,
+	                strokeArrayWidth: strokeArrayWidth,
+	                strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
+	                cursor: cellTheme?.group?.cursor ?? undefined,
+	                lineDash: cellTheme?.group?.lineDash ?? undefined,
+	                lineCap: 'butt',
+	                clip: true,
+	                cornerRadius: cellTheme.group.cornerRadius
+	            });
+	            cellGroup.role = 'cell';
+	            cellGroup.col = col;
+	            cellGroup.row = row;
+	            cellGroup = columnGroup?.addCellGroup(cellGroup) ?? cellGroup;
+	        }
 	    }
-	    const { width: radioWidth, height: radioHeight } = createRadio(col, row, colWidth, width, height, padding, cellTheme, define, cellGroup, range, table);
+	    const { width: radioWidth, height: radioHeight } = createRadio(col, row, colWidth, width, height, padding, cellTheme, define, cellGroup, range, table, value);
 	    width -= padding[1] + padding[3];
 	    height -= padding[0] + padding[2];
 	    cellGroup.forEachChildren((radioComponent) => {
@@ -94657,7 +95293,7 @@
 	    });
 	    return cellGroup;
 	}
-	function createRadio(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, cellGroup, range, table) {
+	function createRadio(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, cellGroup, range, table, cellValue) {
 	    const style = table._getCellStyle(col, row);
 	    let size = getProp('size', style, col, row, table);
 	    let innerRadius = getProp('innerRadius', style, col, row, table);
@@ -94680,7 +95316,7 @@
 	    if (!isNumber$3(innerRadius) || innerRadius < 0) {
 	        innerRadius = Math.round((outerRadius / 7) * 3);
 	    }
-	    const value = table.getCellValue(col, row);
+	    const value = cellValue;
 	    const dataValue = table.getCellOriginValue(col, row);
 	    const hierarchyOffset = getHierarchyOffset(col, row, table);
 	    const cellStyle = table._getCellStyle(col, row);
@@ -94813,7 +95449,8 @@
 	    return isDisabled ?? globalDisable ?? false;
 	}
 
-	function createSwitchCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync) {
+	function createSwitchCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, cellValue) {
+	    const value = arguments.length >= 19 ? cellValue : table.getCellValue(col, row);
 	    if (!cellGroup) {
 	        const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
 	        if (isAsync) {
@@ -94899,7 +95536,7 @@
 	            }
 	        });
 	    }
-	    const switchComponent = createSwitch(col, row, colWidth - iconWidth, width, height, padding, cellTheme, define, table);
+	    const switchComponent = createSwitch(col, row, colWidth - iconWidth, width, height, padding, cellTheme, define, table, value);
 	    if (switchComponent) {
 	        cellGroup.appendChild(switchComponent);
 	    }
@@ -94926,7 +95563,7 @@
 	    }
 	    return cellGroup;
 	}
-	function createSwitch(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, table) {
+	function createSwitch(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, table, cellValue) {
 	    const style = table._getCellStyle(col, row);
 	    const spaceBetweenTextAndCircle = getProp('spaceBetweenTextAndCircle', style, col, row, table);
 	    const circleRadius = getProp('circleRadius', style, col, row, table);
@@ -94937,7 +95574,7 @@
 	    const disableCheckedFill = getProp('disableCheckedFill', style, col, row, table);
 	    const disableUncheckedFill = getProp('disableUncheckedFill', style, col, row, table);
 	    const circleFill = getProp('circleFill', style, col, row, table);
-	    const value = table.getCellValue(col, row);
+	    const value = cellValue;
 	    const dataValue = table.getCellOriginValue(col, row);
 	    let isChecked;
 	    let isDisabled;
@@ -95039,7 +95676,8 @@
 
 	const xScale = new PointScale();
 	const yScale = new LinearScale();
-	function createSparkLineCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, table, cellTheme, isAsync) {
+	function createSparkLineCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, table, cellTheme, isAsync, cellValue) {
+	    const value = arguments.length >= 13 ? cellValue : table.getCellValue(col, row);
 	    if (!cellGroup) {
 	        const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
 	        if (isAsync) {
@@ -95086,17 +95724,17 @@
 	            cellGroup = columnGroup?.addCellGroup(cellGroup) ?? cellGroup;
 	        }
 	    }
-	    const chartGroup = createSparkLine(col, row, width, height, padding, table);
+	    const chartGroup = createSparkLine(col, row, width, height, padding, table, value);
 	    if (chartGroup) {
 	        cellGroup.appendChild(chartGroup);
 	    }
 	    return cellGroup;
 	}
-	function createSparkLine(col, row, width, height, padding, table) {
+	function createSparkLine(col, row, width, height, padding, table, cellValue) {
 	    let sparklineSpec;
 	    let chartGroup;
 	    const chartSpecRaw = table.internalProps.layoutMap.getBody(col, row).sparklineSpec;
-	    const dataValue = table.getCellValue(col, row);
+	    const dataValue = cellValue;
 	    if (!Array.isArray(dataValue)) {
 	        return undefined;
 	    }
@@ -95111,7 +95749,7 @@
 	            col,
 	            row,
 	            dataValue: table.getCellOriginValue(col, row) || '',
-	            value: table.getCellValue(col, row) || '',
+	            value: dataValue || '',
 	            rect: table.getCellRangeRelativeRect(table.getCellRange(col, row)),
 	            table
 	        };
@@ -95303,18 +95941,146 @@
 	    return numbers;
 	}
 
-	const regedIcons = get$4();
-	function releaseVideoResource(video) {
-	    try {
-	        video.pause();
+	const audioIconSvg = '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="42" height="42" rx="10" fill="#F8FAFF" fill-opacity="0.92"/><rect x="3.75" y="3.75" width="40.5" height="40.5" rx="9.25" stroke="#1D4ED8" stroke-opacity="0.22" stroke-width="1.5"/><path d="M16 30H12C10.8954 30 10 29.1046 10 28V20C10 18.8954 10.8954 18 12 18H16L26 10V38L16 30Z" fill="#EAF1FF" stroke="#0F172A" stroke-opacity="0.24" stroke-width="5.5" stroke-linejoin="round"/><path d="M31.5 18.5C33.3 21.3 33.3 26.7 31.5 29.5" stroke="#0F172A" stroke-opacity="0.24" stroke-width="5.5" stroke-linecap="round"/><path d="M36 15C39.2 20.4 39.2 27.6 36 33" stroke="#0F172A" stroke-opacity="0.24" stroke-width="5.5" stroke-linecap="round"/><path d="M16 30H12C10.8954 30 10 29.1046 10 28V20C10 18.8954 10.8954 18 12 18H16L26 10V38L16 30Z" fill="#EAF1FF" stroke="#2563EB" stroke-width="3.2" stroke-linejoin="round"/><path d="M31.5 18.5C33.3 21.3 33.3 26.7 31.5 29.5" stroke="#2563EB" stroke-width="3.2" stroke-linecap="round"/><path d="M36 15C39.2 20.4 39.2 27.6 36 33" stroke="#2563EB" stroke-width="3.2" stroke-linecap="round"/></svg>';
+	function createAudioCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync, _cellValue) {
+	    const headerStyle = table._getCellStyle(col, row);
+	    const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
+	    if (table.options.customConfig?.imageMargin) {
+	        padding = getQuadProps(table.options.customConfig?.imageMargin);
 	    }
-	    catch (err) {
+	    else if (isValid$1(functionalPadding)) {
+	        padding = functionalPadding;
 	    }
-	    video.removeAttribute('src');
-	    try {
-	        video.load();
+	    if (cellTheme?.text?.textAlign) {
+	        textAlign = cellTheme.text.textAlign;
 	    }
-	    catch (err) {
+	    if (cellTheme?.text?.textBaseline) {
+	        textBaseline = cellTheme.text.textBaseline;
+	    }
+	    const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
+	    let cellGroup;
+	    if (isAsync) {
+	        cellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
+	        if (cellGroup && cellGroup.role === 'cell') {
+	            cellGroup.setAttributes({
+	                x: xOrigin,
+	                y: yOrigin,
+	                width,
+	                height,
+	                lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+	                fill: cellTheme?.group?.fill ?? undefined,
+	                stroke: cellTheme?.group?.stroke ?? undefined,
+	                strokeArrayWidth,
+	                strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
+	                cursor: cellTheme?.group?.cursor ?? undefined,
+	                lineDash: cellTheme?.group?.lineDash ?? undefined,
+	                lineCap: 'butt',
+	                clip: true,
+	                cornerRadius: cellTheme.group.cornerRadius
+	            });
+	        }
+	    }
+	    if (!cellGroup || cellGroup.role !== 'cell') {
+	        cellGroup = new Group$1({
+	            x: xOrigin,
+	            y: yOrigin,
+	            width,
+	            height,
+	            lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+	            fill: cellTheme?.group?.fill ?? undefined,
+	            stroke: cellTheme?.group?.stroke ?? undefined,
+	            strokeArrayWidth,
+	            strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
+	            cursor: cellTheme?.group?.cursor ?? undefined,
+	            lineDash: cellTheme?.group?.lineDash ?? undefined,
+	            lineCap: 'butt',
+	            clip: true,
+	            cornerRadius: cellTheme.group.cornerRadius
+	        });
+	        cellGroup.role = 'cell';
+	        cellGroup.col = col;
+	        cellGroup.row = row;
+	        cellGroup = columnGroup?.addCellGroup(cellGroup) ?? cellGroup;
+	    }
+	    let cellIcons;
+	    if (mayHaveIcon) {
+	        let iconCol = col;
+	        let iconRow = row;
+	        if (range) {
+	            iconCol = range.start.col;
+	            iconRow = range.start.row;
+	        }
+	        cellIcons = table.getCellIcons(iconCol, iconRow);
+	    }
+	    let cellLeftIconWidth = 0;
+	    let cellRightIconWidth = 0;
+	    if (Array.isArray(cellIcons) && cellIcons.length !== 0) {
+	        const { leftIconWidth, rightIconWidth, absoluteRightIconWidth } = dealWithIconLayout(cellIcons, cellGroup, range, table);
+	        cellLeftIconWidth = leftIconWidth;
+	        cellRightIconWidth = rightIconWidth;
+	        cellGroup.forEachChildren((child) => {
+	            if (child.role === 'icon-left') {
+	                child.setAttribute('x', child.attribute.x + padding[3]);
+	            }
+	            else if (child.role === 'icon-right') {
+	                child.setAttribute('x', child.attribute.x + width - rightIconWidth - padding[1]);
+	            }
+	            else if (child.role === 'icon-absolute-right') {
+	                child.setAttribute('x', child.attribute.x + width - absoluteRightIconWidth - padding[1]);
+	            }
+	        });
+	        cellGroup.forEachChildren((child) => {
+	            if (textBaseline === 'middle') {
+	                child.setAttribute('y', (height - child.AABBBounds.height()) / 2);
+	            }
+	            else if (textBaseline === 'bottom') {
+	                child.setAttribute('y', height - child.AABBBounds.height() - padding[2]);
+	            }
+	            else {
+	                child.setAttribute('y', padding[0]);
+	            }
+	        });
+	    }
+	    cellGroup._cellLeftIconWidth = cellLeftIconWidth;
+	    cellGroup._cellRightIconWidth = cellRightIconWidth;
+	    const availableWidth = Math.max(1, width - padding[1] - padding[3] - cellLeftIconWidth - cellRightIconWidth);
+	    const availableHeight = Math.max(1, height - padding[0] - padding[2]);
+	    const iconSize = Math.max(1, Math.min(availableWidth, availableHeight, 32));
+	    const pos = calcStartPosition(cellLeftIconWidth, 0, width - cellLeftIconWidth - cellRightIconWidth, height, iconSize, iconSize, textAlign, textBaseline, padding);
+	    removeCellMediaChildren(cellGroup);
+	    const image = markCellMedia(createImage({
+	        x: pos.x,
+	        y: pos.y,
+	        width: iconSize,
+	        height: iconSize,
+	        image: audioIconSvg,
+	        cursor: 'pointer'
+	    }), 'image');
+	    image.name = 'image';
+	    image.keepAspectRatio = true;
+	    image.isAudioIcon = true;
+	    image.textAlign = textAlign;
+	    image.textBaseline = textBaseline;
+	    cellGroup.appendChild(image);
+	    return cellGroup;
+	}
+
+	const regedIcons = get$4();
+	function updateVideoMediaDxDy(startCol, endCol, startRow, endRow, table) {
+	    for (let col = startCol; col <= endCol; col++) {
+	        for (let row = startRow; row <= endRow; row++) {
+	            const cellGroup = table.scenegraph.getCell(col, row);
+	            if (cellGroup) {
+	                cellGroup.forEachChildren((child) => {
+	                    if (isCellMedia(child)) {
+	                        child.setAttributes({
+	                            dx: -table.getColsWidth(cellGroup.mergeStartCol, col - 1),
+	                            dy: -table.getRowsHeight(cellGroup.mergeStartRow, row - 1)
+	                        });
+	                    }
+	                });
+	            }
+	        }
 	    }
 	}
 	function getVideoFirstFrameTimeout(table) {
@@ -95328,7 +96094,9 @@
 	function snapshotVideoFirstFrame(video, image, table) {
 	    const displayWidth = image.attribute.width;
 	    const displayHeight = image.attribute.height;
-	    if (typeof displayWidth !== 'number' ||
+	    if (video.videoWidth <= 0 ||
+	        video.videoHeight <= 0 ||
+	        typeof displayWidth !== 'number' ||
 	        typeof displayHeight !== 'number' ||
 	        displayWidth <= 0 ||
 	        displayHeight <= 0) {
@@ -95375,7 +96143,7 @@
 	    }
 	    return undefined;
 	}
-	function createVideoCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync) {
+	function createVideoCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync, cellValue) {
 	    const headerStyle = table._getCellStyle(col, row);
 	    const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
 	    if (table.options.customConfig?.imageMargin) {
@@ -95473,10 +96241,32 @@
 	                child.setAttribute('y', padding[0]);
 	            }
 	        });
-	        cellGroup._cellLeftIconWidth = cellLeftIconWidth;
-	        cellGroup._cellRightIconWidth = cellRightIconWidth;
 	    }
-	    const value = table.getCellValue(col, row);
+	    cellGroup._cellLeftIconWidth = cellLeftIconWidth;
+	    cellGroup._cellRightIconWidth = cellRightIconWidth;
+	    const value = arguments.length >= 18 ? cellValue : table.getCellValue(col, row);
+	    removeCellMediaChildren(cellGroup);
+	    if (isAudioUrl(value)) {
+	        const availableWidth = Math.max(1, width - padding[1] - padding[3] - cellLeftIconWidth - cellRightIconWidth);
+	        const availableHeight = Math.max(1, height - padding[0] - padding[2]);
+	        const iconSize = Math.max(1, Math.min(availableWidth, availableHeight, 32));
+	        const pos = calcStartPosition(cellLeftIconWidth, 0, width - cellLeftIconWidth - cellRightIconWidth, height, iconSize, iconSize, textAlign, textBaseline, padding);
+	        const image = markCellMedia(createImage({
+	            x: pos.x,
+	            y: pos.y,
+	            width: iconSize,
+	            height: iconSize,
+	            image: audioIconSvg,
+	            cursor: 'pointer'
+	        }), 'image');
+	        image.name = 'image';
+	        image.keepAspectRatio = true;
+	        image.isAudioIcon = true;
+	        image.textAlign = textAlign;
+	        image.textBaseline = textBaseline;
+	        cellGroup.appendChild(image);
+	        return cellGroup;
+	    }
 	    const video = document.createElement('video');
 	    video.muted = true;
 	    video.playsInline = true;
@@ -95497,7 +96287,7 @@
 	        clearVideoLoadTimer();
 	        releaseVideoResource(video);
 	    };
-	    const isCurrentImage = () => cellGroup.getChildByName('image', true) === image;
+	    const isCurrentImage = () => getCellMediaImage(cellGroup) === image;
 	    const setVideoDamageImage = () => {
 	        const regedIcons = get$4();
 	        const damageIcon = regedIcons.video_damage_pic || regedIcons.damage_pic;
@@ -95522,7 +96312,7 @@
 	                height: imageHeight
 	            });
 	            if (isMerge) {
-	                updateImageDxDy(cellGroup.mergeStartCol, cellGroup.mergeEndCol, cellGroup.mergeStartRow, cellGroup.mergeEndRow, table);
+	                updateVideoMediaDxDy(cellGroup.mergeStartCol, cellGroup.mergeEndCol, cellGroup.mergeStartRow, cellGroup.mergeEndRow, table);
 	            }
 	        }
 	    };
@@ -95551,6 +96341,10 @@
 	        if (!scenegraph) {
 	            return;
 	        }
+	        if (video.videoWidth <= 0 || video.videoHeight <= 0) {
+	            handleVideoLoadFail();
+	            return;
+	        }
 	        if (imageAutoSizing) {
 	            _adjustWidthHeight(col, row, video.videoWidth, video.videoHeight, scenegraph, padding, cellGroup);
 	        }
@@ -95576,7 +96370,7 @@
 	            });
 	        }
 	        if (isMerge) {
-	            updateImageDxDy(cellGroup.mergeStartCol, cellGroup.mergeEndCol, cellGroup.mergeStartRow, cellGroup.mergeEndRow, table);
+	            updateVideoMediaDxDy(cellGroup.mergeStartCol, cellGroup.mergeEndCol, cellGroup.mergeStartRow, cellGroup.mergeEndRow, table);
 	        }
 	        const left = 0;
 	        const top = 0;
@@ -95584,8 +96378,7 @@
 	        const iconSize = Math.floor(Math.min(width - padding[1] - padding[3], height - padding[2] - padding[0]) / 2);
 	        const anchorX = left + (width > image.attribute.width ? image.attribute.x - left + image.attribute.width / 2 : width / 2);
 	        const anchorY = top + (height > image.attribute.height ? image.attribute.y - top + image.attribute.height / 2 : height / 2);
-	        const imageGraphic = cellGroup.getChildByName('image', true);
-	        const { dx, dy } = imageGraphic.attribute;
+	        const { dx, dy } = image.attribute;
 	        const playIcon = new Icon$1({
 	            x: anchorX - iconSize / 2,
 	            y: anchorY - iconSize / 2,
@@ -95596,6 +96389,7 @@
 	            dx,
 	            dy
 	        });
+	        markCellMedia(playIcon, 'play-icon');
 	        playIcon.name = 'play-icon';
 	        cellGroup.appendChild(playIcon);
 	        if (shouldSnapshot && snapshotVideoFirstFrame(video, image, table)) {
@@ -95605,14 +96399,14 @@
 	    });
 	    video.addEventListener('error', handleVideoLoadFail);
 	    video.addEventListener('abort', handleVideoLoadFail);
-	    const image = createImage({
+	    const image = markCellMedia(createImage({
 	        x: padding[3],
 	        y: padding[0],
-	        width: width - padding[1] - padding[3],
-	        height: height - padding[2] - padding[0],
+	        width: Math.max(1, width - padding[1] - padding[3]),
+	        height: Math.max(1, height - padding[2] - padding[0]),
 	        image: video,
 	        cursor: 'pointer'
-	    });
+	    }), 'image');
 	    image.name = 'image';
 	    image.keepAspectRatio = keepAspectRatio;
 	    image.textAlign = textAlign;
@@ -96445,7 +97239,8 @@
 	    scale.niceMax(target.targetTicks.length);
 	}
 
-	function createButtonCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync) {
+	function createButtonCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, cellValue) {
+	    const value = arguments.length >= 19 ? cellValue : table.getCellValue(col, row);
 	    if (!cellGroup) {
 	        const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
 	        if (isAsync) {
@@ -96531,7 +97326,7 @@
 	            }
 	        });
 	    }
-	    const buttonComponent = createButton(col, row, colWidth - iconWidth, width, height, padding, cellTheme, define, table);
+	    const buttonComponent = createButton(col, row, colWidth - iconWidth, width, height, padding, cellTheme, define, table, value);
 	    if (buttonComponent) {
 	        cellGroup.appendChild(buttonComponent);
 	    }
@@ -96557,7 +97352,7 @@
 	    }
 	    return cellGroup;
 	}
-	function createButton(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, table) {
+	function createButton(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, table, cellValue) {
 	    const style = table._getCellStyle(col, row);
 	    const buttonColor = getProp('buttonColor', style, col, row, table);
 	    const buttonBorderColor = getProp('buttonBorderColor', style, col, row, table);
@@ -96570,7 +97365,7 @@
 	    const buttonDisableColor = getProp('buttonDisableColor', style, col, row, table);
 	    const buttonDisableBorderColor = getProp('buttonDisableBorderColor', style, col, row, table);
 	    const buttonTextDisableColor = getProp('buttonTextDisableColor', style, col, row, table);
-	    const value = table.getCellValue(col, row);
+	    const value = cellValue;
 	    const dataValue = table.getCellOriginValue(col, row);
 	    const hierarchyOffset = getHierarchyOffset(col, row, table);
 	    const cellStyle = table._getCellStyle(col, row);
@@ -96685,6 +97480,9 @@
 	const registerVideoCell = () => {
 	    Factory.registerFunction('createVideoCellGroup', createVideoCellGroup);
 	};
+	const registerAudioCell = () => {
+	    Factory.registerFunction('createAudioCellGroup', createAudioCellGroup);
+	};
 
 	registerAxis();
 	registerEmptyTip();
@@ -96695,6 +97493,7 @@
 	registerListTreeStickCellPlugin();
 	registerCustomCellStylePlugin();
 	registerAnimation();
+	registerAudioCell();
 	registerChartCell();
 	registerCheckboxCell();
 	registerImageCell();
@@ -104399,6 +105198,7 @@
 	registerTooltip();
 	registerCustomCellStylePlugin();
 	registerAnimation();
+	registerAudioCell();
 	registerCheckboxCell();
 	registerImageCell();
 	registerProgressBarCell();
@@ -104420,6 +105220,7 @@
 	registerTitle();
 	registerTooltip();
 	registerAnimation();
+	registerAudioCell();
 	registerChartCell();
 	registerCheckboxCell();
 	registerImageCell();
@@ -106221,7 +107022,7 @@
 	}
 
 	registerForVrender();
-	const version = "1.26.6";
+	const version = "1.26.7";
 	function getIcons() {
 	    return get$4();
 	}
@@ -106273,6 +107074,7 @@
 	exports.pluginsDefinition = index$1;
 	exports.register = register$1;
 	exports.registerAnimation = registerAnimation;
+	exports.registerAudioCell = registerAudioCell;
 	exports.registerAxis = registerAxis;
 	exports.registerButtonCell = registerButtonCell;
 	exports.registerChartCell = registerChartCell;