k-vtable 1.0.32 → 1.0.33

package/dist/vtable.js

@@ -24465,7 +24465,7 @@
         let parsedFromProps = null,
           props = params.to,
           from = params.from;
-        props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
+        props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
         let totalDelay = 0;
         oneByOneDelay && (totalDelay = oneByOneDelay * (count - index - 1));
         const delayAfterValue = isFunction$3(delayAfter) ? delayAfter(null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, {}) : delayAfter;
@@ -24528,7 +24528,7 @@
           let parsedFromProps = null,
             props = effect.to,
             from = effect.from;
-          props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from);
+          props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel);
           const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[type],
             customType = effect.custom ? effect.customType : getCustomType(custom);
           this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
@@ -24547,22 +24547,31 @@
         animate.play(customAnimate);
       }
       createPropsFromChannel(channel, graphic) {
+        var _a;
         const props = {};
         let from = null;
-        return channel ? (Array.isArray(channel) ? channel.forEach(key => {
-          var _a, _b;
-          const value = null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs) || void 0 === _b ? void 0 : _b[key];
-          void 0 !== value && (props[key] = value);
-        }) : Object.keys(channel).forEach(key => {
+        if (!channel) return {
+          from: from,
+          props: props,
+          attrOutChannel: null
+        };
+        const attrOutChannel = {};
+        let hasAttrs = !1;
+        const diffAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs;
+        if (Array.isArray(channel) && (channel = channel.reduce((res, key) => (void 0 === diffAttrs[key] || (res[key] = {
+          to: diffAttrs[key]
+        }), res), {})), Object.keys(channel).forEach(key => {
           var _a, _b, _c, _d;
           const config = channel[key];
           void 0 !== config.to && ("function" == typeof config.to ? props[key] = config.to(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : props[key] = config.to), void 0 !== config.from && (from || (from = {}), "function" == typeof config.from ? from[key] = config.from(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : from[key] = config.from);
-        }), {
-          from: from,
-          props: props
-        }) : {
+        }), diffAttrs) for (const key in diffAttrs) {
+          const value = diffAttrs[key];
+          void 0 !== value && (props.hasOwnProperty(key) || (attrOutChannel[key] = value, hasAttrs = !0));
+        }
+        return {
           from: from,
-          props: props
+          props: props,
+          attrOutChannel: hasAttrs ? attrOutChannel : null
         };
       }
       resolveValue(value, graphic, defaultValue) {
@@ -33712,6 +33721,8 @@
         IconFuncTypeEnum["dropDownState"] = "dropDownState";
         IconFuncTypeEnum["play"] = "play";
         IconFuncTypeEnum["damagePic"] = "damagePic";
+        IconFuncTypeEnum["imageDamagePic"] = "imageDamagePic";
+        IconFuncTypeEnum["videoDamagePic"] = "videoDamagePic";
         IconFuncTypeEnum["expand"] = "expand";
         IconFuncTypeEnum["collapse"] = "collapse";
         IconFuncTypeEnum["drillDown"] = "drillDown";
@@ -34911,7 +34922,7 @@
         addEventListener(type, listener, option) {
             this.on(type, listener);
         }
-        removeEventListener(type, listener) {
+        removeEventListener(type, listener, useCapture) {
             if (!this.listenersData) {
                 return;
             }
@@ -36467,6 +36478,7 @@
         AFTER_UPDATE_CELL_CONTENT_WIDTH: 'after_update_cell_content_width',
         AFTER_UPDATE_SELECT_BORDER_HEIGHT: 'after_update_select_border_height',
         CHANGE_CELL_VALUE: 'change_cell_value',
+        CHANGE_CELL_VALUES: 'change_cell_values',
         DRAG_FILL_HANDLE_END: 'drag_fill_handle_end',
         MOUSEDOWN_FILL_HANDLE: 'mousedown_fill_handle',
         DBLCLICK_FILL_HANDLE: 'dblclick_fill_handle',
@@ -36741,7 +36753,7 @@
             }
             delete this.listeners[id];
             if (obj.target.removeEventListener) {
-                obj.target.removeEventListener(obj.type, obj.listener, ...obj.options);
+                obj.target.removeEventListener(obj.type, obj.listener, obj.options?.length > 0 ? !!obj.options[0] : false);
             }
         }
         fire(target, type, ...args) {
@@ -36775,7 +36787,7 @@
             for (const key in this.listeners) {
                 const listener = this.listeners[key];
                 if (listener.target.removeEventListener) {
-                    listener.target.removeEventListener(listener.type, listener.listener, ...listener.options);
+                    listener.target.removeEventListener(listener.type, listener.listener, listener.options?.length > 0 ? !!listener.options[0] : false);
                 }
             }
             for (const key in this.reseizeListeners) {
@@ -37496,6 +37508,42 @@
     };
 
     const themes$2 = {};
+    function isTableTheme(theme) {
+        return !!theme && typeof theme.getExtendTheme === 'function';
+    }
+    function getThemeComparableConfig(theme) {
+        if (isTableTheme(theme)) {
+            const extend = theme.getExtendTheme();
+            const internal = theme
+                .internalTheme;
+            const superTheme = internal?.superTheme;
+            return {
+                name: theme.name,
+                extend,
+                superTheme: superTheme ? getThemeComparableConfig(superTheme) : undefined
+            };
+        }
+        return theme;
+    }
+    function tableThemeIsChanged(prevTableTheme, newTableTheme) {
+        if (!prevTableTheme && !newTableTheme) {
+            return false;
+        }
+        if (!prevTableTheme && newTableTheme) {
+            return true;
+        }
+        if (prevTableTheme && !newTableTheme) {
+            return true;
+        }
+        if (prevTableTheme === newTableTheme) {
+            return false;
+        }
+        const prev = prevTableTheme;
+        const next = newTableTheme;
+        const prevConfig = getThemeComparableConfig(prev);
+        const newConfig = getThemeComparableConfig(next);
+        return !isEqual(prevConfig, newConfig);
+    }
 
     const DEFAULTFONTSIZE = 16;
     const DEFAULTFONTFAMILY = 'Arial,sans-serif';
@@ -38430,6 +38478,7 @@
         default: themes,
         get: get$5,
         of: of$1,
+        tableThemeIsChanged: tableThemeIsChanged,
         theme: theme$1
     });
 
@@ -38564,6 +38613,7 @@
         _sourceLength;
         _source;
         sortedIndexMap;
+        _forceVisibleRecords;
         lastSortStates;
         currentIndexedData = [];
         userPagination;
@@ -38991,6 +39041,48 @@
                 }
             }
         }
+        changeFieldValueByRecordIndex(value, recordIndex, field, table) {
+            if (field === null) {
+                return undefined;
+            }
+            if (recordIndex === undefined || recordIndex === null) {
+                return;
+            }
+            const rawKey = recordIndex.toString();
+            if (!this.beforeChangedRecordsMap.has(rawKey)) {
+                const rawRecords = Array.isArray(this.dataSourceObj?.records)
+                    ? this.dataSourceObj.records
+                    : null;
+                const originRecord = rawRecords
+                    ? Array.isArray(recordIndex)
+                        ? getValueFromDeepArray(rawRecords, recordIndex)
+                        : rawRecords[recordIndex]
+                    : undefined;
+                this.beforeChangedRecordsMap.set(rawKey, cloneDeep(originRecord, undefined, ['vtable_gantt_linkedFrom', 'vtable_gantt_linkedTo']) ?? {});
+            }
+            if (typeof field === 'string' || typeof field === 'number') {
+                const beforeChangedValue = this.beforeChangedRecordsMap.get(rawKey)?.[field];
+                const rawRecords = Array.isArray(this.dataSourceObj?.records)
+                    ? this.dataSourceObj.records
+                    : null;
+                const record = rawRecords
+                    ? Array.isArray(recordIndex)
+                        ? getValueFromDeepArray(rawRecords, recordIndex)
+                        : rawRecords[recordIndex]
+                    : undefined;
+                let formatValue = value;
+                if (typeof beforeChangedValue === 'number' && isAllDigits(value)) {
+                    formatValue = parseFloat(value);
+                }
+                if (record) {
+                    record[field] = formatValue;
+                }
+                else if (rawRecords && typeof recordIndex === 'number') {
+                    rawRecords[recordIndex] = this.addRecordRule === 'Array' ? [] : {};
+                    rawRecords[recordIndex][field] = formatValue;
+                }
+            }
+        }
         cacheBeforeChangedRecord(dataIndex, table) {
             if (!this.beforeChangedRecordsMap.has(dataIndex.toString())) {
                 const originRecord = this.getOriginalRecord(dataIndex);
@@ -39016,70 +39108,166 @@
                 }
             }
         }
-        addRecord(record, index) {
-            if (Array.isArray(this.records)) {
-                this.records.splice(index, 0, record);
-                this.adjustBeforeChangedRecordsMap(index, 1);
-                this.currentIndexedData.push(this.currentIndexedData.length);
-                this._sourceLength += 1;
-                for (let i = 0; i < this.fieldAggregators.length; i++) {
-                    this.fieldAggregators[i].push(record);
-                }
-                if (this.rowHierarchyType === 'tree') {
-                    this.initTreeHierarchyState();
-                }
-                if (this.userPagination) {
-                    this.pagination.totalCount = this._sourceLength;
-                    const { perPageCount, currentPage } = this.pagination;
-                    const startIndex = perPageCount * (currentPage || 0);
-                    const endIndex = startIndex + perPageCount;
-                    if (index < endIndex) {
+        _getRawRecordsArray() {
+            const rawRecords = this.dataSourceObj?.records;
+            return Array.isArray(rawRecords) ? rawRecords : null;
+        }
+        _hasFilterInEffect() {
+            return (this.dataConfig?.filterRules?.length ?? 0) >= 1 || (this.lastFilterRules?.length ?? 0) >= 1;
+        }
+        _normalizeInsertIndex(index, length) {
+            if (index === undefined || index === null) {
+                return length;
+            }
+            if (index > length) {
+                return length;
+            }
+            if (index < 0) {
+                return 0;
+            }
+            return index;
+        }
+        _mapViewInsertIndexToRawInsertIndex(rawRecords, viewIndex) {
+            if (this.records.length === 0) {
+                return rawRecords.length;
+            }
+            if (viewIndex <= 0) {
+                const firstVisibleRecord = this.records[0];
+                const rawIndex = rawRecords.indexOf(firstVisibleRecord);
+                return rawIndex >= 0 ? rawIndex : 0;
+            }
+            if (viewIndex >= this.records.length) {
+                const lastVisibleRecord = this.records[this.records.length - 1];
+                const rawIndex = rawRecords.indexOf(lastVisibleRecord);
+                return rawIndex >= 0 ? rawIndex + 1 : rawRecords.length;
+            }
+            const prevRecord = this.records[viewIndex - 1];
+            const rawIndex = rawRecords.indexOf(prevRecord);
+            return rawIndex >= 0 ? rawIndex + 1 : rawRecords.length;
+        }
+        _resetIndexingFromViewRecords() {
+            this._sourceLength = this.records.length;
+            this.currentIndexedData = Array.from({ length: this._sourceLength }, (_, i) => i);
+            if (this.rowHierarchyType === 'tree') {
+                this.initTreeHierarchyState();
+            }
+            if (this.userPagination) {
+                this.pagination.totalCount = this._sourceLength;
+                this.updatePagerData();
+                return;
+            }
+            this.pagination.perPageCount = this._sourceLength;
+            this.pagination.totalCount = this._sourceLength;
+            this.updatePagerData();
+        }
+        addRecord(record, index, syncToOriginalRecords = false) {
+            if (!syncToOriginalRecords) {
+                if (Array.isArray(this.records)) {
+                    this.records.splice(index, 0, record);
+                    this.adjustBeforeChangedRecordsMap(index, 1);
+                    this.currentIndexedData.push(this.currentIndexedData.length);
+                    this._sourceLength += 1;
+                    for (let i = 0; i < this.fieldAggregators.length; i++) {
+                        this.fieldAggregators[i].push(record);
+                    }
+                    if (this.rowHierarchyType === 'tree') {
+                        this.initTreeHierarchyState();
+                    }
+                    if (this.userPagination) {
+                        this.pagination.totalCount = this._sourceLength;
+                        const { perPageCount, currentPage } = this.pagination;
+                        const startIndex = perPageCount * (currentPage || 0);
+                        const endIndex = startIndex + perPageCount;
+                        if (index < endIndex) {
+                            this.updatePagerData();
+                        }
+                    }
+                    else {
+                        this.pagination.perPageCount = this._sourceLength;
+                        this.pagination.totalCount = this._sourceLength;
                         this.updatePagerData();
                     }
+                    if (this.dataSourceObj?.added) {
+                        this.dataSourceObj.added(index, 1);
+                    }
                 }
-                else {
-                    this.pagination.perPageCount = this._sourceLength;
-                    this.pagination.totalCount = this._sourceLength;
-                    this.updatePagerData();
-                }
-                if (this.dataSourceObj?.added) {
-                    this.dataSourceObj.added(index, 1);
-                }
+                return;
+            }
+            const rawRecords = this._getRawRecordsArray();
+            if (!rawRecords) {
+                return;
+            }
+            const viewInsertIndex = this._normalizeInsertIndex(index, this.records.length);
+            const rawInsertIndex = this._hasFilterInEffect()
+                ? this._mapViewInsertIndexToRawInsertIndex(rawRecords, viewInsertIndex)
+                : this._normalizeInsertIndex(viewInsertIndex, rawRecords.length);
+            rawRecords.splice(rawInsertIndex, 0, record);
+            if (syncToOriginalRecords && this._hasFilterInEffect()) {
+                this.markForceVisibleRecord(record);
+            }
+            this.beforeChangedRecordsMap.clear();
+            this.sortedIndexMap.clear();
+            this.updateFilterRules(this.dataConfig?.filterRules);
+            if (this.dataSourceObj?.added) {
+                this.dataSourceObj.added(rawInsertIndex, 1);
             }
         }
-        addRecords(recordArr, index) {
-            if (Array.isArray(this.records)) {
-                if (Array.isArray(recordArr)) {
-                    this.records.splice(index, 0, ...recordArr);
-                    this.adjustBeforeChangedRecordsMap(index, recordArr.length);
-                    for (let i = 0; i < recordArr.length; i++) {
-                        this.currentIndexedData.push(this.currentIndexedData.length);
+        addRecords(recordArr, index, syncToOriginalRecords = false) {
+            if (!syncToOriginalRecords) {
+                if (Array.isArray(this.records)) {
+                    if (Array.isArray(recordArr)) {
+                        this.records.splice(index, 0, ...recordArr);
+                        this.adjustBeforeChangedRecordsMap(index, recordArr.length);
+                        for (let i = 0; i < recordArr.length; i++) {
+                            this.currentIndexedData.push(this.currentIndexedData.length);
+                        }
+                        this._sourceLength += recordArr.length;
+                        for (let i = 0; i < this.fieldAggregators.length; i++) {
+                            for (let j = 0; j < recordArr.length; j++) {
+                                this.fieldAggregators[i].push(recordArr[j]);
+                            }
+                        }
                     }
-                    this._sourceLength += recordArr.length;
-                    for (let i = 0; i < this.fieldAggregators.length; i++) {
-                        for (let j = 0; j < recordArr.length; j++) {
-                            this.fieldAggregators[i].push(recordArr[j]);
+                    if (this.userPagination) {
+                        this.pagination.totalCount = this._sourceLength;
+                        const { perPageCount, currentPage } = this.pagination;
+                        const startIndex = perPageCount * (currentPage || 0);
+                        const endIndex = startIndex + perPageCount;
+                        if (index < endIndex) {
+                            this.updatePagerData();
                         }
                     }
-                }
-                if (this.userPagination) {
-                    this.pagination.totalCount = this._sourceLength;
-                    const { perPageCount, currentPage } = this.pagination;
-                    const startIndex = perPageCount * (currentPage || 0);
-                    const endIndex = startIndex + perPageCount;
-                    if (index < endIndex) {
+                    else {
+                        this.pagination.perPageCount = this._sourceLength;
+                        this.pagination.totalCount = this._sourceLength;
                         this.updatePagerData();
                     }
+                    if (this.dataSourceObj?.added) {
+                        this.dataSourceObj.added(index, recordArr.length);
+                    }
                 }
-                else {
-                    this.pagination.perPageCount = this._sourceLength;
-                    this.pagination.totalCount = this._sourceLength;
-                    this.updatePagerData();
-                }
-                if (this.dataSourceObj?.added) {
-                    this.dataSourceObj.added(index, recordArr.length);
+                return;
+            }
+            const rawRecords = this._getRawRecordsArray();
+            if (!rawRecords || !Array.isArray(recordArr) || recordArr.length === 0) {
+                return;
+            }
+            const viewInsertIndex = this._normalizeInsertIndex(index, this.records.length);
+            const rawInsertIndex = this._hasFilterInEffect()
+                ? this._mapViewInsertIndexToRawInsertIndex(rawRecords, viewInsertIndex)
+                : this._normalizeInsertIndex(viewInsertIndex, rawRecords.length);
+            rawRecords.splice(rawInsertIndex, 0, ...recordArr);
+            if (syncToOriginalRecords && this._hasFilterInEffect()) {
+                for (let i = 0; i < recordArr.length; i++) {
+                    this.markForceVisibleRecord(recordArr[i]);
                 }
             }
+            this.beforeChangedRecordsMap.clear();
+            this.sortedIndexMap.clear();
+            this.updateFilterRules(this.dataConfig?.filterRules);
+            if (this.dataSourceObj?.added) {
+                this.dataSourceObj.added(rawInsertIndex, recordArr.length);
+            }
         }
         addRecordForSorted(record) {
             if (Array.isArray(this.records)) {
@@ -39112,46 +39300,84 @@
             }
         }
         adjustBeforeChangedRecordsMap(insertIndex, insertCount, type = 'add') {
-            const length = this.beforeChangedRecordsMap.size;
-            for (let key = length - 1; key >= insertIndex; key--) {
+            const delta = type === 'add' ? insertCount : -insertCount;
+            const numericKeys = [];
+            this.beforeChangedRecordsMap.forEach((_, key) => {
+                const numKey = Number(key);
+                if (Number.isInteger(numKey) && numKey.toString() === key && numKey >= insertIndex) {
+                    numericKeys.push(numKey);
+                }
+            });
+            numericKeys.sort((a, b) => (type === 'add' ? b - a : a - b));
+            for (let i = 0; i < numericKeys.length; i++) {
+                const key = numericKeys[i];
                 const record = this.beforeChangedRecordsMap.get(key.toString());
                 this.beforeChangedRecordsMap.delete(key.toString());
-                this.beforeChangedRecordsMap.set((key + (type === 'add' ? insertCount : -insertCount)).toString(), record);
+                this.beforeChangedRecordsMap.set((key + delta).toString(), record);
             }
         }
-        deleteRecords(recordIndexs) {
-            if (Array.isArray(this.records)) {
-                const realDeletedRecordIndexs = [];
-                const recordIndexsMaxToMin = recordIndexs.sort((a, b) => b - a);
-                for (let index = 0; index < recordIndexsMaxToMin.length; index++) {
-                    const recordIndex = recordIndexsMaxToMin[index];
-                    if (recordIndex >= this._sourceLength || recordIndex < 0) {
-                        continue;
+        deleteRecords(recordIndexs, syncToOriginalRecords = false) {
+            if (!syncToOriginalRecords) {
+                if (Array.isArray(this.records)) {
+                    const realDeletedRecordIndexs = [];
+                    const recordIndexsMaxToMin = recordIndexs.sort((a, b) => b - a);
+                    for (let index = 0; index < recordIndexsMaxToMin.length; index++) {
+                        const recordIndex = recordIndexsMaxToMin[index];
+                        if (recordIndex >= this._sourceLength || recordIndex < 0) {
+                            continue;
+                        }
+                        this.adjustBeforeChangedRecordsMap(recordIndex, 1, 'delete');
+                        realDeletedRecordIndexs.push(recordIndex);
+                        const deletedRecord = this.records[recordIndex];
+                        for (let i = 0; i < this.fieldAggregators.length; i++) {
+                            this.fieldAggregators[i].deleteRecord(deletedRecord);
+                        }
+                        this.records.splice(recordIndex, 1);
+                        this.currentIndexedData.pop();
+                        this._sourceLength -= 1;
                     }
-                    this.adjustBeforeChangedRecordsMap(recordIndex, 1, 'delete');
-                    realDeletedRecordIndexs.push(recordIndex);
-                    const deletedRecord = this.records[recordIndex];
-                    for (let i = 0; i < this.fieldAggregators.length; i++) {
-                        this.fieldAggregators[i].deleteRecord(deletedRecord);
+                    if (this.userPagination) {
+                        this.updatePagerData();
                     }
-                    this.records.splice(recordIndex, 1);
-                    this.currentIndexedData.pop();
-                    this._sourceLength -= 1;
-                }
-                if (this.userPagination) {
-                    this.updatePagerData();
+                    else {
+                        this.pagination.perPageCount = this._sourceLength;
+                        this.pagination.totalCount = this._sourceLength;
+                        this.updatePagerData();
+                    }
+                    if (this.dataSourceObj?.deleted) {
+                        this.dataSourceObj.deleted(realDeletedRecordIndexs);
+                    }
+                    return realDeletedRecordIndexs;
                 }
-                else {
-                    this.pagination.perPageCount = this._sourceLength;
-                    this.pagination.totalCount = this._sourceLength;
-                    this.updatePagerData();
+                return [];
+            }
+            const rawRecords = this._getRawRecordsArray();
+            if (!rawRecords || !Array.isArray(this.records)) {
+                return [];
+            }
+            const realDeletedRecordIndexs = [];
+            const recordIndexsMaxToMin = recordIndexs.slice().sort((a, b) => b - a);
+            const rawDeletedIndexs = [];
+            for (let index = 0; index < recordIndexsMaxToMin.length; index++) {
+                const viewIndex = recordIndexsMaxToMin[index];
+                if (viewIndex >= this.records.length || viewIndex < 0) {
+                    continue;
                 }
-                if (this.dataSourceObj?.deleted) {
-                    this.dataSourceObj.deleted(realDeletedRecordIndexs);
+                const deletedRecord = this.records[viewIndex];
+                const rawIndex = rawRecords.indexOf(deletedRecord);
+                if (rawIndex >= 0) {
+                    rawRecords.splice(rawIndex, 1);
+                    rawDeletedIndexs.push(rawIndex);
                 }
-                return realDeletedRecordIndexs;
+                realDeletedRecordIndexs.push(viewIndex);
             }
-            return [];
+            this.beforeChangedRecordsMap.clear();
+            this.sortedIndexMap.clear();
+            this.updateFilterRules(this.dataConfig?.filterRules);
+            if (this.dataSourceObj?.deleted) {
+                this.dataSourceObj.deleted(rawDeletedIndexs);
+            }
+            return realDeletedRecordIndexs;
         }
         deleteRecordsForSorted(recordIndexs) {
             if (Array.isArray(this.records)) {
@@ -39173,36 +39399,71 @@
                 this.beforeChangedRecordsMap.clear();
             }
         }
-        updateRecords(records, recordIndexs) {
-            const realDeletedRecordIndexs = [];
+        updateRecords(records, recordIndexs, syncToOriginalRecords = false) {
+            if (!syncToOriginalRecords) {
+                const realDeletedRecordIndexs = [];
+                for (let index = 0; index < recordIndexs.length; index++) {
+                    const recordIndex = recordIndexs[index];
+                    if (Array.isArray(recordIndex)) {
+                        this.beforeChangedRecordsMap.delete(recordIndex.toString());
+                        realDeletedRecordIndexs.push(recordIndex);
+                        recordIndex.slice(0, -1).reduce((acc, key) => {
+                            if (acc[key] === undefined) {
+                                acc[key] = {};
+                            }
+                            return acc[key].children;
+                        }, this.records)[recordIndex[recordIndex.length - 1]] = records[index];
+                    }
+                    else {
+                        if (recordIndex >= this._sourceLength || recordIndex < 0) {
+                            continue;
+                        }
+                        this.beforeChangedRecordsMap.delete(recordIndex.toString());
+                        realDeletedRecordIndexs.push(recordIndex);
+                        for (let i = 0; i < this.fieldAggregators.length; i++) {
+                            this.fieldAggregators[i].updateRecord(this.records[recordIndex], records[index]);
+                        }
+                        this.records[recordIndex] = records[index];
+                    }
+                }
+                if (this.userPagination) {
+                    this.updatePagerData();
+                }
+                return realDeletedRecordIndexs;
+            }
+            const rawRecords = this._getRawRecordsArray();
+            if (!rawRecords || !Array.isArray(this.records)) {
+                return [];
+            }
+            const realUpdatedIndexs = [];
             for (let index = 0; index < recordIndexs.length; index++) {
                 const recordIndex = recordIndexs[index];
                 if (Array.isArray(recordIndex)) {
                     this.beforeChangedRecordsMap.delete(recordIndex.toString());
-                    realDeletedRecordIndexs.push(recordIndex);
+                    realUpdatedIndexs.push(recordIndex);
                     recordIndex.slice(0, -1).reduce((acc, key) => {
                         if (acc[key] === undefined) {
                             acc[key] = {};
                         }
                         return acc[key].children;
-                    }, this.records)[recordIndex[recordIndex.length - 1]] = records[index];
+                    }, rawRecords)[recordIndex[recordIndex.length - 1]] = records[index];
                 }
                 else {
-                    if (recordIndex >= this._sourceLength || recordIndex < 0) {
+                    if (recordIndex >= this.records.length || recordIndex < 0) {
                         continue;
                     }
-                    this.beforeChangedRecordsMap.delete(recordIndex.toString());
-                    realDeletedRecordIndexs.push(recordIndex);
-                    for (let i = 0; i < this.fieldAggregators.length; i++) {
-                        this.fieldAggregators[i].updateRecord(this.records[recordIndex], records[index]);
+                    const oldRecord = this.records[recordIndex];
+                    const rawIndex = rawRecords.indexOf(oldRecord);
+                    if (rawIndex >= 0) {
+                        rawRecords[rawIndex] = records[index];
                     }
-                    this.records[recordIndex] = records[index];
+                    realUpdatedIndexs.push(recordIndex);
                 }
             }
-            if (this.userPagination) {
-                this.updatePagerData();
-            }
-            return realDeletedRecordIndexs;
+            this.beforeChangedRecordsMap.clear();
+            this.sortedIndexMap.clear();
+            this.updateFilterRules(this.dataConfig?.filterRules);
+            return realUpdatedIndexs;
         }
         updateRecordsForSorted(records, recordIndexs) {
             for (let index = 0; index < recordIndexs.length; index++) {
@@ -39283,7 +39544,11 @@
                 }
             }
             if (!filedMapArray.length) {
-                filedMapArray = states.map(() => ({ asc: [], desc: [], normal: [] }));
+                filedMapArray = states.map(() => ({
+                    asc: [],
+                    desc: [],
+                    normal: []
+                }));
                 for (let index = 0; index < states.length; index++) {
                     this.sortedIndexMap.set(states[index].field, filedMapArray[index]);
                 }
@@ -39298,6 +39563,16 @@
         setSortedIndexMap(field, filedMap) {
             this.sortedIndexMap.set(field, filedMap);
         }
+        markForceVisibleRecord(record) {
+            if (!record || (typeof record !== 'object' && typeof record !== 'function')) {
+                return;
+            }
+            this._forceVisibleRecords ||= new WeakSet();
+            this._forceVisibleRecords.add(record);
+        }
+        clearForceVisibleRecords() {
+            this._forceVisibleRecords = undefined;
+        }
         clearFilteredChildren(record) {
             record.filteredChildren = undefined;
             for (let i = 0; i < (record.children?.length ?? 0); i++) {
@@ -39305,6 +39580,9 @@
             }
         }
         filterRecord(record) {
+            if (this._forceVisibleRecords?.has(record)) {
+                return true;
+            }
             let isReserved = true;
             for (let i = 0; i < this.dataConfig.filterRules?.length; i++) {
                 const filterRule = this.dataConfig?.filterRules[i];
@@ -44930,8 +45208,18 @@
         }
         image.failCallback = () => {
             const regedIcons = get$2();
-            image.image = regedIcons.damage_pic.svg;
+            image.image = regedIcons.image_damage_pic
+                ? regedIcons.image_damage_pic.svg
+                : regedIcons.damage_pic.svg;
         };
+        if (typeof value === 'string') {
+            if (!(value.startsWith('<svg') || isValidUrl$1(value) || value.includes('/') || isBase64$1(value))) {
+                const regedIcons = get$2();
+                image.image = regedIcons.image_damage_pic
+                    ? regedIcons.image_damage_pic.svg
+                    : regedIcons.damage_pic.svg;
+            }
+        }
         cellGroup.appendChild(image);
         return cellGroup;
     }
@@ -45141,7 +45429,9 @@
     }
     function isDamagePic(image) {
         const regedIcons = get$2();
-        return image.attribute.image === regedIcons.damage_pic.svg;
+        return (image.attribute.image === regedIcons.damage_pic.svg ||
+            (regedIcons.image_damage_pic && image.attribute.image === regedIcons.image_damage_pic.svg) ||
+            (regedIcons.video_damage_pic && image.attribute.image === regedIcons.video_damage_pic.svg));
     }
 
     function dealPromiseData(dataPromise, tabel, callback) {
@@ -45485,11 +45775,7 @@
         if (!addNew && oldCellGroup.role === 'empty') {
             return undefined;
         }
-        const type = isVtableMerge || isCustomMerge
-            ? 'text'
-            : table.isHeader(col, row)
-                ? table._getHeaderLayoutMap(col, row).headerType ?? 'text'
-                : table.getBodyColumnType(col, row) ?? 'text';
+        const type = isVtableMerge || isCustomMerge ? 'text' : table.getCellType(col, row);
         const padding = cellTheme._vtable.padding;
         const textAlign = cellTheme.text.textAlign;
         const textBaseline = cellTheme.text.textBaseline;
@@ -46381,9 +46667,7 @@
                     (table.isRightFrozenColumn(col) && table.isBottomFrozenRow(row)))) {
                 continue;
             }
-            const cellType = table.isHeader(col, row)
-                ? table._getHeaderLayoutMap(col, row)?.headerType
-                : table.getBodyColumnType(col, row);
+            const cellType = table.getCellType(col, row);
             const textHeight = computeTextHeight(col, row, cellType, table);
             maxHeight = isValid$1(maxHeight) ? Math.max(textHeight, maxHeight) : textHeight;
         }
@@ -46812,11 +47096,7 @@
         cell.setAttribute('height', distHeight);
         const isVtableMerge = scene.table.getCellRawRecord(col, row)?.vtableMerge;
         const isCustomMerge = !!scene.table.getCustomMerge(col, row);
-        const type = isVtableMerge || isCustomMerge
-            ? 'text'
-            : scene.table.isHeader(col, row)
-                ? scene.table._getHeaderLayoutMap(col, row).headerType ?? 'text'
-                : scene.table.getBodyColumnType(col, row) ?? 'text';
+        const type = isVtableMerge || isCustomMerge ? 'text' : scene.table.getCellType(col, row);
         if (type === 'progressbar') {
             const columnDefine = scene.table.getBodyColumnDefine(col, row);
             const style = scene.table._getCellStyle(col, row);
@@ -47155,11 +47435,7 @@
         const autoRowHeight = scene.table.isAutoRowHeight(row);
         const isVtableMerge = scene.table.getCellRawRecord(col, row)?.vtableMerge;
         const isCustomMerge = !!scene.table.getCustomMerge(col, row);
-        const type = isVtableMerge || isCustomMerge
-            ? 'text'
-            : scene.table.isHeader(col, row)
-                ? scene.table._getHeaderLayoutMap(col, row).headerType ?? 'text'
-                : scene.table.getBodyColumnType(col, row) ?? 'text';
+        const type = isVtableMerge || isCustomMerge ? 'text' : scene.table.getCellType(col, row);
         let isHeightChange = false;
         if (type === 'progressbar') {
             const columnDefine = scene.table.getBodyColumnDefine(col, row);
@@ -49150,7 +49426,9 @@
             if (isHeader) {
                 const define = table.getHeaderDefine(col, row);
                 cellDisable = define?.disableHeaderHover;
-                if (cellGroup.firstChild && cellGroup.firstChild.name === 'axis' && table.options.hover?.disableAxisHover) {
+                if (cellGroup.firstChild &&
+                    cellGroup.firstChild.name === 'axis' &&
+                    table.options.hover?.disableAxisHover) {
                     cellDisable = true;
                 }
             }
@@ -52937,9 +53215,7 @@
                 maxWidth = Math.max(indicatorWidth, maxWidth);
                 continue;
             }
-            const cellType = table.isHeader(col, row)
-                ? table._getHeaderLayoutMap(col, row)?.headerType
-                : table.getBodyColumnType(col, row);
+            const cellType = table.getCellType(col, row);
             if (isValid$1(cellType) &&
                 cellType !== 'text' &&
                 cellType !== 'link' &&
@@ -53381,6 +53657,13 @@
                     table.internalProps._widthResizedColMap.add(cell.col);
                 }
             }
+            else if ((!dimensions || dimensions.length === 0) &&
+                (table.internalProps.layoutMap.columnTree?.length ?? 0) === 0) {
+                if (!table.internalProps._widthResizedColMap.has(table.rowHeaderLevelCount)) {
+                    table._setColWidth(table.rowHeaderLevelCount, width);
+                    table.internalProps._widthResizedColMap.add(table.rowHeaderLevelCount);
+                }
+            }
         }
     }
     function _parseColumnWidthConfigForPivotRowHeader(table, columnWidthConfig) {
@@ -53502,11 +53785,7 @@
                     }
                 }
             }
-            const type = isVtableMerge || isCustomMerge
-                ? 'text'
-                : (table.isHeader(col, row)
-                    ? table._getHeaderLayoutMap(col, row).headerType ?? 'text'
-                    : table.getBodyColumnType(col, row)) ?? 'text';
+            const type = isVtableMerge || isCustomMerge ? 'text' : table.getCellType(col, row);
             if (isPromise(value)) {
                 createEmptyCellGroup(col, row, 0, y, cellWidth, cellHeight, columnGroup);
                 dealPromiseData(value, table, callCreateCellForPromiseValue.bind(null, {
@@ -59772,11 +60051,7 @@
         }
         updateCellContentWhileResize(col, row) {
             const isVtableMerge = this.table.getCellRawRecord(col, row)?.vtableMerge;
-            const type = isVtableMerge
-                ? 'text'
-                : this.table.isHeader(col, row)
-                    ? this.table._getHeaderLayoutMap(col, row).headerType
-                    : this.table.getBodyColumnType(col, row);
+            const type = isVtableMerge ? 'text' : this.table.getCellType(col, row);
             const cellGroup = this.getCell(col, row);
             if (type === 'image' || type === 'video') {
                 updateImageCellContentWhileResize(cellGroup, col, row, 0, 0, this.table);
@@ -63683,15 +63958,7 @@
                 if (e.target.type === 'image' && e.target.role && e.target.role.startsWith('icon')) {
                     return;
                 }
-                let cellType;
-                if (table.internalProps.layoutMap.isHeader(col, row)) {
-                    cellType = table.isPivotTable()
-                        ? table._getHeaderLayoutMap(col, row).headerType
-                        : table.getHeaderDefine(col, row).headerType;
-                }
-                else {
-                    cellType = table.getBodyColumnType(col, row);
-                }
+                const cellType = table.getCellType(col, row);
                 const columnDefine = table.isHeader(col, row)
                     ? table.getHeaderDefine(col, row)
                     : table.getBodyColumnDefine(col, row);
@@ -63728,7 +63995,9 @@
                         }
                         const data = Object.assign({
                             __value: cellValue,
-                            __dataValue: cellOriginValue
+                            __dataValue: cellOriginValue,
+                            value: cellValue,
+                            dataValue: cellOriginValue
                         }, rowData);
                         if (isFunction$3(templateLink)) {
                             url = templateLink(data, col, row, table);
@@ -63782,6 +64051,7 @@
                     image.src = cellValue;
                     image.style.maxWidth = '80%';
                     image.style.maxHeight = '80%';
+                    image.style.backgroundColor = '#FFF';
                     overlay.appendChild(image);
                     document.body.appendChild(overlay);
                 }
@@ -64533,7 +64803,7 @@
                         }
                     }
                     const disableSelectOnContextMenu = table.options.select?.disableSelectOnContextMenu;
-                    if (!cellInRange && !disableSelectOnContextMenu) {
+                    if (!cellInRange && !disableSelectOnContextMenu && eventArgsSet?.eventArgs?.target.type !== 'chart') {
                         table.selectCell(col, row);
                     }
                     if (table.hasListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CELL)) {
@@ -65107,6 +65377,7 @@
                     selectedRanges[0].start.col === selectedRanges[0].end.col &&
                     selectedRanges[0].start.row === selectedRanges[0].end.row;
                 const editor = justOneCellSelected &&
+                    table.getEditor &&
                     table.getEditor(table.stateManager.select.cellPos.col, table.stateManager.select.cellPos.row);
                 const editorInput = editor?.getInputElement?.();
                 if (editorInput === relatedTarget) {
@@ -66234,6 +66505,7 @@
         cutOperationTime = 0;
         lastClipboardContent = '';
         cutCellRange = null;
+        cutRanges = null;
         copySourceRange = null;
         constructor(table) {
             this.table = table;
@@ -66753,6 +67025,10 @@
             this.handleCopy(e, true);
             this.cutWaitPaste = true;
             this.cutCellRange = this.table.getSelectedCellInfos();
+            this.cutRanges = this.table.stateManager.select.ranges?.map(r => ({
+                start: { col: r.start.col, row: r.start.row },
+                end: { col: r.end.col, row: r.end.row }
+            }));
             if (this.clipboardCheckTimer) {
                 clearTimeout(this.clipboardCheckTimer);
             }
@@ -66760,6 +67036,7 @@
                 if (this.cutWaitPaste) {
                     this.cutWaitPaste = false;
                     this.cutCellRange = null;
+                    this.cutRanges = null;
                     this.clipboardCheckTimer = null;
                 }
             }, 30000);
@@ -66779,6 +67056,7 @@
                 if (this.cutWaitPaste) {
                     this.cutWaitPaste = false;
                     this.cutCellRange = null;
+                    this.cutRanges = null;
                     if (this.clipboardCheckTimer) {
                         clearTimeout(this.clipboardCheckTimer);
                         this.clipboardCheckTimer = null;
@@ -66894,17 +67172,11 @@
         }
         clearCutArea(table) {
             try {
-                const selectCells = this.cutCellRange;
-                if (!selectCells || selectCells.length === 0) {
+                const ranges = this.cutRanges;
+                if (!ranges || ranges.length === 0) {
                     return;
                 }
-                for (let i = 0; i < selectCells.length; i++) {
-                    for (let j = 0; j < selectCells[i].length; j++) {
-                        if (selectCells[i][j]) {
-                            table.changeCellValue(selectCells[i][j].col, selectCells[i][j].row, undefined);
-                        }
-                    }
-                }
+                table.changeCellValuesByRanges(ranges, '');
             }
             catch (error) {
             }
@@ -70472,6 +70744,15 @@
             this.customCellStyleArrangement.push(...compacted);
             this._rebuildCustomCellStyleArrangementIndex();
         }
+        clearCustomCellStyleArrangement() {
+            this.customCellStyleArrangement = [];
+        }
+        addCustomCellStyleArrangement(cellPosition, customStyleId) {
+            this.customCellStyleArrangement.push({
+                cellPosition,
+                customStyleId
+            });
+        }
         getCustomCellStyle(col, row) {
             const customStyleIds = this.getCustomCellStyleIds(col, row);
             if (customStyleIds.length) {
@@ -70737,7 +71018,7 @@
                     layoutMap.isRightTopCorner(col, row))) {
                 return EMPTY_STYLE;
             }
-            const styleClass = table.internalProps.headerHelper.getStyleClass(hd?.headerType || 'text');
+            const styleClass = table.internalProps.headerHelper.getStyleClass(table.getCellType(col, row));
             if (layoutMap.isBottomFrozenRow(col, row) && table.theme.bottomFrozenStyle) {
                 cacheStyle = of(paddingForAxis ? { padding: paddingForAxis } : {}, table.theme.bottomFrozenStyle, {
                     col,
@@ -71022,6 +71303,10 @@
         tableNoFrameHeight;
         tableX;
         tableY;
+        _tableBorderWidth_left = 0;
+        _tableBorderWidth_right = 0;
+        _tableBorderWidth_top = 0;
+        _tableBorderWidth_bottom = 0;
         _widthMode;
         _heightMode;
         _autoFillWidth;
@@ -71046,7 +71331,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.0.32";
+        version = "1.0.33";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -71381,12 +71666,37 @@
         }
         resize() {
             this._updateSize();
-            this.internalProps.legends?.forEach(legend => {
-                legend?.resize();
+            const layoutOrder = this.options.componentLayoutOrder ?? ['legend', 'title'];
+            layoutOrder.forEach(component => {
+                if (component === 'legend') {
+                    this.internalProps.legends?.forEach(legend => {
+                        if (legend.orient === 'bottom' || legend.orient === 'right') {
+                            legend?.resize();
+                        }
+                    });
+                }
+                else if (component === 'title') {
+                    if (this.internalProps.title?._titleOption.orient === 'bottom' ||
+                        this.internalProps.title?._titleOption.orient === 'right') {
+                        this.internalProps.title?.resize();
+                    }
+                }
+            });
+            layoutOrder.forEach(component => {
+                if (component === 'legend') {
+                    this.internalProps.legends?.forEach(legend => {
+                        if (legend.orient === 'top' || legend.orient === 'left') {
+                            legend?.resize();
+                        }
+                    });
+                }
+                else if (component === 'title') {
+                    if (this.internalProps.title?._titleOption.orient === 'top' ||
+                        this.internalProps.title?._titleOption.orient === 'left') {
+                        this.internalProps.title?.resize();
+                    }
+                }
             });
-            if (this.internalProps.title) {
-                this.internalProps.title.resize();
-            }
             if (this.internalProps.emptyTip) {
                 this.internalProps.emptyTip.resize();
             }
@@ -71772,6 +72082,10 @@
             if (this.internalProps.theme?.frameStyle) {
                 const lineWidths = toBoxArray(this.internalProps.theme.frameStyle?.borderLineWidth ?? [null]);
                 const shadowWidths = toBoxArray(this.internalProps.theme.frameStyle?.shadowBlur ?? [0]);
+                this._tableBorderWidth_left = (lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0);
+                this._tableBorderWidth_right = (lineWidths[1] ?? 0) + (shadowWidths[1] ?? 0);
+                this._tableBorderWidth_top = (lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0);
+                this._tableBorderWidth_bottom = (lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0);
                 if (this.theme.frameStyle?.innerBorder) {
                     this.tableX += this.contentOffsetX;
                     this.tableY += this.contentOffsetY;
@@ -71779,19 +72093,19 @@
                     this.tableNoFrameHeight = height - (shadowWidths[2] ?? 0) - this.contentOffsetY;
                 }
                 else {
-                    this.tableX += (lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0);
-                    this.tableY += (lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0);
-                    const rightBorder = (lineWidths[1] ?? 0) + (shadowWidths[1] ?? 0);
+                    this.tableX += this._tableBorderWidth_left;
+                    this.tableY += this._tableBorderWidth_top;
+                    const rightBorder = this._tableBorderWidth_right;
                     this.tableNoFrameWidth =
                         width -
                             (rightBorder > vScrollBarWidth ? rightBorder - vScrollBarWidth : 0) -
-                            ((lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0)) -
+                            this._tableBorderWidth_left -
                             this.contentOffsetX;
-                    const bottomBorder = (lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0);
+                    const bottomBorder = this._tableBorderWidth_bottom;
                     this.tableNoFrameHeight =
                         height -
                             (bottomBorder > hScrollBarWidth ? bottomBorder - hScrollBarWidth : 0) -
-                            ((lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0)) -
+                            this._tableBorderWidth_top -
                             this.contentOffsetY;
                 }
             }
@@ -77108,9 +77422,10 @@
         return { addRecordRule, customDealGroupData };
     }
 
-    function listTableChangeCellValue(col, row, value, workOnEditableCell, triggerEvent, table) {
+    function listTableChangeCellValue(col, row, value, workOnEditableCell, triggerEvent, table, noTriggerChangeCellValuesEvent) {
         if ((workOnEditableCell && table.isHasEditorDefine(col, row)) || workOnEditableCell === false) {
-            const recordIndex = table.getRecordShowIndexByCell(col, row);
+            const recordShowIndex = table.getRecordShowIndexByCell(col, row);
+            const recordIndex = recordShowIndex >= 0 ? table.dataSource.getIndexKey(recordShowIndex) : undefined;
             const { field } = table.internalProps.layoutMap.getBody(col, row);
             const beforeChangeValue = table.getCellRawValue(col, row);
             const oldValue = table.getCellOriginValue(col, row);
@@ -77118,7 +77433,7 @@
                 table.internalProps.layoutMap.updateColumnTitle(col, row, value);
             }
             else {
-                table.dataSource.changeFieldValue(value, recordIndex, field, col, row, table);
+                table.dataSource.changeFieldValue(value, recordShowIndex, field, col, row, table);
             }
             const range = table.getCellRange(col, row);
             const aggregators = table.internalProps.layoutMap.getAggregatorsByCell(col, row);
@@ -77171,18 +77486,24 @@
             }
             const changedValue = table.getCellOriginValue(col, row);
             if (oldValue !== changedValue && triggerEvent) {
-                table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
+                const changeValue = {
                     col,
                     row,
+                    recordIndex,
+                    field,
                     rawValue: beforeChangeValue,
                     currentValue: oldValue,
                     changedValue
-                });
+                };
+                table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, changeValue);
+                if (!noTriggerChangeCellValuesEvent) {
+                    table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUES, { values: [changeValue] });
+                }
             }
             table.scenegraph.updateNextFrame();
         }
     }
-    async function listTableChangeCellValues(startCol, startRow, values, workOnEditableCell, triggerEvent, table) {
+    async function listTableChangeCellValues(startCol, startRow, values, workOnEditableCell, triggerEvent, table, noTriggerChangeCellValuesEvent) {
         const changedCellResults = [];
         let pasteColEnd = startCol;
         let pasteRowEnd = startRow;
@@ -77209,6 +77530,7 @@
                 oldRowValues.push(oldValue);
             }
         }
+        const resultChangeValues = [];
         for (let i = 0; i < values.length; i++) {
             if (startRow + i > table.rowCount - 1) {
                 break;
@@ -77248,7 +77570,8 @@
                 if (isCanChange) {
                     changedCellResults[i][j] = true;
                     const value = rowValues[j];
-                    const recordIndex = table.getRecordShowIndexByCell(startCol + j, startRow + i);
+                    const recordShowIndex = table.getRecordShowIndexByCell(startCol + j, startRow + i);
+                    const recordIndex = recordShowIndex >= 0 ? table.dataSource.getIndexKey(recordShowIndex) : undefined;
                     const { field } = table.internalProps.layoutMap.getBody(startCol + j, startRow + i);
                     const beforeChangeValue = beforeChangeValues[i][j];
                     const oldValue = oldValues[i][j];
@@ -77256,17 +77579,21 @@
                         table.internalProps.layoutMap.updateColumnTitle(startCol + j, startRow + i, value);
                     }
                     else {
-                        table.dataSource.changeFieldValue(value, recordIndex, field, startCol + j, startRow + i, table);
+                        table.dataSource.changeFieldValue(value, recordShowIndex, field, startCol + j, startRow + i, table);
                     }
                     const changedValue = table.getCellOriginValue(startCol + j, startRow + i);
                     if (oldValue !== changedValue && triggerEvent) {
-                        table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
+                        const changeValue = {
                             col: startCol + j,
                             row: startRow + i,
+                            recordIndex,
+                            field,
                             rawValue: beforeChangeValue,
                             currentValue: oldValue,
                             changedValue
-                        });
+                        };
+                        table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, changeValue);
+                        resultChangeValues.push(changeValue);
                     }
                 }
                 else {
@@ -77275,6 +77602,9 @@
             }
             pasteColEnd = Math.max(pasteColEnd, thisRowPasteColEnd);
         }
+        if (!noTriggerChangeCellValuesEvent) {
+            table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUES, { values: resultChangeValues });
+        }
         const startRange = table.getCellRange(startCol, startRow);
         const range = table.getCellRange(pasteColEnd, pasteRowEnd);
         const aggregators = table.internalProps.layoutMap.getAggregatorsByCellRange(startRange.start.col, startRange.start.row, range.end.col, range.end.row);
@@ -77347,6 +77677,68 @@
         table.scenegraph.updateNextFrame();
         return changedCellResults;
     }
+    async function listTableChangeCellValuesByRanges(ranges, value, workOnEditableCell, triggerEvent, table, noTriggerChangeCellValuesEvent) {
+        const resultChangeValues = [];
+        const processed = new Set();
+        const nextValue = (value ?? '');
+        for (let i = 0; i < (ranges?.length ?? 0); i++) {
+            const range = ranges[i];
+            const startCol = Math.min(range.start.col, range.end.col);
+            const endCol = Math.max(range.start.col, range.end.col);
+            const startRow = Math.min(range.start.row, range.end.row);
+            const endRow = Math.max(range.start.row, range.end.row);
+            if (startCol > endCol || startRow > endRow) {
+                continue;
+            }
+            const values = [];
+            const oldValues = [];
+            for (let row = startRow; row <= endRow; row++) {
+                const rowValues = [];
+                const rowOldValues = [];
+                for (let col = startCol; col <= endCol; col++) {
+                    rowValues.push(nextValue);
+                    rowOldValues.push(table.getCellOriginValue(col, row));
+                }
+                values.push(rowValues);
+                oldValues.push(rowOldValues);
+            }
+            const changedCellResults = await listTableChangeCellValues(startCol, startRow, values, workOnEditableCell, triggerEvent, table, true);
+            for (let r = 0; r < values.length; r++) {
+                for (let c = 0; c < values[r].length; c++) {
+                    const col = startCol + c;
+                    const row = startRow + r;
+                    const key = `${col},${row}`;
+                    if (processed.has(key)) {
+                        continue;
+                    }
+                    processed.add(key);
+                    if (!triggerEvent || !changedCellResults?.[r]?.[c]) {
+                        continue;
+                    }
+                    const oldValue = oldValues[r][c];
+                    const changedValue = table.getCellOriginValue(col, row);
+                    if (oldValue === changedValue) {
+                        continue;
+                    }
+                    const recordShowIndex = table.getRecordShowIndexByCell(col, row);
+                    const recordIndex = recordShowIndex >= 0 ? table.dataSource.getIndexKey(recordShowIndex) : undefined;
+                    const { field } = table.internalProps.layoutMap.getBody(col, row);
+                    resultChangeValues.push({
+                        col,
+                        row,
+                        recordIndex,
+                        field,
+                        rawValue: oldValue,
+                        currentValue: oldValue,
+                        changedValue
+                    });
+                }
+            }
+        }
+        if (!noTriggerChangeCellValuesEvent && triggerEvent) {
+            table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUES, { values: resultChangeValues });
+        }
+    }
     function getCellUpdateType(col, row, table, oldCellUpdateType) {
         if (oldCellUpdateType === 'group') {
             return oldCellUpdateType;
@@ -77400,7 +77792,13 @@
                 table.scenegraph.createSceneGraph();
             }
             else if (table.sortState) {
-                table.dataSource.addRecordForSorted(record);
+                const syncToOriginalRecords = !!table.options?.syncRecordOperationsToSourceRecords;
+                if (syncToOriginalRecords) {
+                    table.dataSource.addRecord(record, table.dataSource.records.length, true);
+                }
+                else {
+                    table.dataSource.addRecordForSorted(record);
+                }
                 table.stateManager.checkedState.clear();
                 sortRecords(table);
                 table.refreshRowColCount();
@@ -77413,8 +77811,16 @@
                     recordIndex = table.dataSource.sourceLength;
                 }
                 const headerCount = table.transpose ? table.rowHeaderLevelCount : table.columnHeaderLevelCount;
-                table.dataSource.addRecord(record, recordIndex);
+                const syncToOriginalRecords = !!table.options?.syncRecordOperationsToSourceRecords;
+                table.dataSource.addRecord(record, recordIndex, syncToOriginalRecords);
                 adjustCheckBoxStateMapWithAddRecordIndex(table, recordIndex, 1);
+                if (syncToOriginalRecords) {
+                    table.refreshRowColCount();
+                    table.internalProps.layoutMap.clearCellRangeMap();
+                    table.scenegraph.clearCells();
+                    table.scenegraph.createSceneGraph();
+                    return true;
+                }
                 const oldRowCount = table.rowCount;
                 table.refreshRowColCount();
                 if (table.scenegraph.proxy.totalActualBodyRowCount === 0) {
@@ -77526,7 +77932,13 @@
                 table.scenegraph.createSceneGraph();
             }
             else if (table.sortState) {
-                table.dataSource.addRecordsForSorted(records);
+                const syncToOriginalRecords = !!table.options?.syncRecordOperationsToSourceRecords;
+                if (syncToOriginalRecords) {
+                    table.dataSource.addRecords(records, table.dataSource.records.length, true);
+                }
+                else {
+                    table.dataSource.addRecordsForSorted(records);
+                }
                 sortRecords(table);
                 table.refreshRowColCount();
                 table.scenegraph.clearCells();
@@ -77541,8 +77953,16 @@
                     recordIndex = 0;
                 }
                 const headerCount = table.transpose ? table.rowHeaderLevelCount : table.columnHeaderLevelCount;
-                table.dataSource.addRecords(records, recordIndex);
+                const syncToOriginalRecords = !!table.options?.syncRecordOperationsToSourceRecords;
+                table.dataSource.addRecords(records, recordIndex, syncToOriginalRecords);
                 adjustCheckBoxStateMapWithAddRecordIndex(table, recordIndex, records.length);
+                if (syncToOriginalRecords) {
+                    table.refreshRowColCount();
+                    table.internalProps.layoutMap.clearCellRangeMap();
+                    table.scenegraph.clearCells();
+                    table.scenegraph.createSceneGraph();
+                    return true;
+                }
                 const oldRowCount = table.transpose ? table.colCount : table.rowCount;
                 table.refreshRowColCount();
                 if (table.scenegraph.proxy.totalActualBodyRowCount === 0) {
@@ -77658,20 +78078,34 @@
                 table.scenegraph.createSceneGraph();
             }
             else if (table.sortState) {
-                table.dataSource.deleteRecordsForSorted(recordIndexs);
+                const syncToOriginalRecords = !!table.options?.syncRecordOperationsToSourceRecords;
+                if (syncToOriginalRecords) {
+                    table.dataSource.deleteRecords(recordIndexs, true);
+                }
+                else {
+                    table.dataSource.deleteRecordsForSorted(recordIndexs);
+                }
                 sortRecords(table);
                 table.refreshRowColCount();
                 table.scenegraph.clearCells();
                 table.scenegraph.createSceneGraph();
             }
             else {
-                const deletedRecordIndexs = table.dataSource.deleteRecords(recordIndexs);
+                const syncToOriginalRecords = !!table.options?.syncRecordOperationsToSourceRecords;
+                const deletedRecordIndexs = table.dataSource.deleteRecords(recordIndexs, syncToOriginalRecords);
                 if (deletedRecordIndexs.length === 0) {
                     return;
                 }
                 for (let index = 0; index < deletedRecordIndexs.length; index++) {
                     adjustCheckBoxStateMapWithDeleteRecordIndex(table, deletedRecordIndexs[index], 1);
                 }
+                if (syncToOriginalRecords) {
+                    table.refreshRowColCount();
+                    table.internalProps.layoutMap.clearCellRangeMap();
+                    table.scenegraph.clearCells();
+                    table.scenegraph.createSceneGraph();
+                    return;
+                }
                 const oldRowCount = table.transpose ? table.colCount : table.rowCount;
                 table.refreshRowColCount();
                 const newRowCount = table.transpose ? table.colCount : table.rowCount;
@@ -77789,18 +78223,32 @@
                 table.scenegraph.createSceneGraph();
             }
             else if (table.sortState) {
-                table.dataSource.updateRecordsForSorted(records, recordIndexs);
+                const syncToOriginalRecords = !!table.options?.syncRecordOperationsToSourceRecords;
+                if (syncToOriginalRecords) {
+                    table.dataSource.updateRecords(records, recordIndexs, true);
+                }
+                else {
+                    table.dataSource.updateRecordsForSorted(records, recordIndexs);
+                }
                 sortRecords(table);
                 table.refreshRowColCount();
                 table.scenegraph.clearCells();
                 table.scenegraph.createSceneGraph();
             }
             else {
-                const updateRecordIndexs = table.dataSource.updateRecords(records, recordIndexs);
+                const syncToOriginalRecords = !!table.options?.syncRecordOperationsToSourceRecords;
+                const updateRecordIndexs = table.dataSource.updateRecords(records, recordIndexs, syncToOriginalRecords);
                 if (updateRecordIndexs.length === 0) {
                     return;
                 }
-                const bodyRowIndex = updateRecordIndexs.map(index => table.getBodyRowIndexByRecordIndex(index));
+                if (syncToOriginalRecords) {
+                    table.refreshRowColCount();
+                    table.internalProps.layoutMap.clearCellRangeMap();
+                    table.scenegraph.clearCells();
+                    table.scenegraph.createSceneGraph();
+                    return;
+                }
+                const bodyRowIndex = updateRecordIndexs.map((index) => table.getBodyRowIndexByRecordIndex(index));
                 const recordIndexsMinToMax = bodyRowIndex.sort((a, b) => a - b);
                 if (table.pagination) {
                     const { perPageCount, currentPage } = table.pagination;
@@ -78175,11 +78623,11 @@
                 const ListTreeStickCellPlugin = Factory.getComponent('listTreeStickCellPlugin');
                 this.listTreeStickCellPlugin = new ListTreeStickCellPlugin(this);
             }
+            this.resize();
             setTimeout(() => {
                 if (this.isReleased) {
                     return;
                 }
-                this.resize();
                 this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
             }, 0);
         }
@@ -78575,7 +79023,6 @@
             if (options.title) {
                 const Title = Factory.getComponent('title');
                 internalProps.title = new Title(options.title, this);
-                this.scenegraph.resize();
             }
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -78588,6 +79035,7 @@
                 }
             }
             this.pluginManager.updatePlugins(options.plugins);
+            this.resize();
             setTimeout(() => {
                 this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
             }, 0);
@@ -78977,6 +79425,7 @@
         }
         updateFilterRules(filterRules, options = { clearRowHeightCache: true }) {
             this.scenegraph.clearCells();
+            this.dataSource.clearForceVisibleRecords?.();
             if (this.sortState) {
                 this.dataSource.updateFilterRulesForSorted(filterRules);
                 sortRecords(this);
@@ -79107,9 +79556,17 @@
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             this._updateSize();
-            if (this.internalProps.title && !this.internalProps.title.isReleased) {
-                this.internalProps.title.resize();
-            }
+            const layoutOrder = this.options.componentLayoutOrder ?? ['legend', 'title'];
+            layoutOrder.forEach(component => {
+                if (component === 'legend') {
+                    this.internalProps.legends?.forEach(legend => {
+                        legend?.resize();
+                    });
+                }
+                else if (component === 'title') {
+                    this.internalProps.title?.resize();
+                }
+            });
             this.scenegraph.resize();
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -79200,17 +79657,182 @@
             }
             return isValid$1(editorDefine);
         }
-        changeCellValue(col, row, value, workOnEditableCell = false, triggerEvent = true) {
-            return listTableChangeCellValue(col, row, value, workOnEditableCell, triggerEvent, this);
+        changeCellValue(col, row, value, workOnEditableCell = false, triggerEvent = true, noTriggerChangeCellValuesEvent) {
+            return listTableChangeCellValue(col, row, value, workOnEditableCell, triggerEvent, this, noTriggerChangeCellValuesEvent);
         }
-        changeCellValues(startCol, startRow, values, workOnEditableCell = false, triggerEvent = true) {
-            return listTableChangeCellValues(startCol, startRow, values, workOnEditableCell, triggerEvent, this);
+        changeCellValues(startCol, startRow, values, workOnEditableCell = false, triggerEvent = true, noTriggerChangeCellValuesEvent) {
+            return listTableChangeCellValues(startCol, startRow, values, workOnEditableCell, triggerEvent, this, noTriggerChangeCellValuesEvent);
         }
-        addRecord(record, recordIndex) {
+        changeCellValuesByRanges(ranges, value, workOnEditableCell = false, triggerEvent = true, noTriggerChangeCellValuesEvent) {
+            return listTableChangeCellValuesByRanges(ranges, value, workOnEditableCell, triggerEvent, this, noTriggerChangeCellValuesEvent);
+        }
+        changeSourceCellValue(recordIndex, field, value) {
+            const tableIndex = this.getTableIndexByRecordIndex(recordIndex);
+            const cellAddr = this.getCellAddrByFieldRecord(field, recordIndex);
+            if (tableIndex < 0 || cellAddr.col < 0 || cellAddr.row < 0) {
+                return;
+            }
+            this.dataSource.changeFieldValue(value, tableIndex, field, cellAddr.col, cellAddr.row, this);
+            const beforeChangeValue = this.getCellRawValue(cellAddr.col, cellAddr.row);
+            const oldValue = this.getCellOriginValue(cellAddr.col, cellAddr.row);
+            const changedValue = this.getCellOriginValue(cellAddr.col, cellAddr.row);
+            if (oldValue !== changedValue) {
+                const changeValue = {
+                    col: cellAddr.col,
+                    row: cellAddr.row,
+                    recordIndex,
+                    field,
+                    rawValue: beforeChangeValue,
+                    currentValue: oldValue,
+                    changedValue
+                };
+                this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, changeValue);
+                this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUES, { values: [changeValue] });
+            }
+        }
+        changeCellValueByRecord(recordIndex, field, value, options) {
+            const triggerEvent = options?.triggerEvent ?? true;
+            const noTriggerChangeCellValuesEvent = options?.noTriggerChangeCellValuesEvent;
+            const autoRefresh = options?.autoRefresh ?? true;
+            const records = this.dataSource.dataSourceObj?.records;
+            let record;
+            let oldValue;
+            if (Array.isArray(records) && (typeof field === 'string' || typeof field === 'number')) {
+                record = Array.isArray(recordIndex) ? getValueFromDeepArray(records, recordIndex) : records[recordIndex];
+                oldValue = record?.[field];
+            }
+            this.dataSource.changeFieldValueByRecordIndex(value, recordIndex, field, this);
+            if (!triggerEvent) {
+                return;
+            }
+            const changedValue = record && (typeof field === 'string' || typeof field === 'number') ? record?.[field] : value;
+            if (oldValue !== changedValue) {
+                const cellAddr = this.getCellAddrByFieldRecord(field, recordIndex);
+                const changeValue = {
+                    col: cellAddr?.col ?? -1,
+                    row: cellAddr?.row ?? -1,
+                    recordIndex,
+                    field,
+                    rawValue: oldValue,
+                    currentValue: oldValue,
+                    changedValue
+                };
+                this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, changeValue);
+                if (!noTriggerChangeCellValuesEvent) {
+                    this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUES, { values: [changeValue] });
+                }
+            }
+            if (autoRefresh) {
+                this.refreshAfterSourceChange();
+            }
+        }
+        changeCellValueBySource(recordIndex, field, value, triggerEvent = true, noTriggerChangeCellValuesEvent) {
+            return this.changeCellValueByRecord(recordIndex, field, value, {
+                triggerEvent,
+                noTriggerChangeCellValuesEvent,
+                autoRefresh: true
+            });
+        }
+        changeCellValuesByRecords(changeValues, options) {
+            const triggerEvent = options?.triggerEvent ?? true;
+            const noTriggerChangeCellValuesEvent = options?.noTriggerChangeCellValuesEvent;
+            const autoRefresh = options?.autoRefresh ?? true;
+            const resultChangeValues = [];
+            for (let i = 0; i < changeValues.length; i++) {
+                const { recordIndex, field, value } = changeValues[i];
+                const records = this.dataSource.dataSourceObj?.records;
+                let record;
+                let oldValue;
+                if (Array.isArray(records) && (typeof field === 'string' || typeof field === 'number')) {
+                    record = Array.isArray(recordIndex) ? getValueFromDeepArray(records, recordIndex) : records[recordIndex];
+                    oldValue = record?.[field];
+                }
+                this.dataSource.changeFieldValueByRecordIndex(value, recordIndex, field, this);
+                if (triggerEvent) {
+                    const changedValue = record && (typeof field === 'string' || typeof field === 'number') ? record?.[field] : value;
+                    if (oldValue !== changedValue) {
+                        const changeValue = {
+                            col: (this.getCellAddrByFieldRecord(field, recordIndex)?.col ?? -1),
+                            row: (this.getCellAddrByFieldRecord(field, recordIndex)?.row ?? -1),
+                            recordIndex,
+                            field,
+                            rawValue: oldValue,
+                            currentValue: oldValue,
+                            changedValue
+                        };
+                        this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, changeValue);
+                        resultChangeValues.push(changeValue);
+                    }
+                }
+            }
+            if (!noTriggerChangeCellValuesEvent && resultChangeValues.length && triggerEvent) {
+                this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUES, { values: resultChangeValues });
+            }
+            if (autoRefresh) {
+                this.refreshAfterSourceChange();
+            }
+        }
+        changeCellValuesBySource(changeValues, triggerEvent = true, noTriggerChangeCellValuesEvent) {
+            return this.changeCellValuesByRecords(changeValues, {
+                triggerEvent,
+                noTriggerChangeCellValuesEvent,
+                autoRefresh: true
+            });
+        }
+        refreshAfterSourceChange(options) {
+            const reapplyFilter = options?.reapplyFilter ?? true;
+            const reapplySort = options?.reapplySort ?? true;
+            const clearRowHeightCache = options?.clearRowHeightCache ?? true;
+            this.scenegraph.clearCells();
+            if (this.sortState && reapplySort) {
+                this.dataSource.clearSortedIndexMap?.();
+                this.dataSource.sortedIndexMap?.clear?.();
+            }
+            if (reapplyFilter) {
+                if (this.sortState && reapplySort) {
+                    this.dataSource.updateFilterRulesForSorted(this.dataSource.dataConfig?.filterRules);
+                    sortRecords(this);
+                }
+                else {
+                    this.dataSource.updateFilterRules(this.dataSource.dataConfig?.filterRules);
+                }
+            }
+            else if (this.sortState && reapplySort) {
+                sortRecords(this);
+            }
+            const traverseColumns = (columns) => {
+                for (let i = 0; i < (columns?.length ?? 0); i++) {
+                    const column = columns[i];
+                    const aggregators = column?.vtable_aggregator;
+                    if (aggregators) {
+                        if (Array.isArray(aggregators)) {
+                            for (let j = 0; j < aggregators.length; j++) {
+                                aggregators[j]?.recalculate?.();
+                            }
+                        }
+                        else {
+                            aggregators?.recalculate?.();
+                        }
+                    }
+                    if (column?.columns) {
+                        traverseColumns(column.columns);
+                    }
+                }
+            };
+            traverseColumns(this.internalProps.columns);
+            this.refreshRowColCount();
+            this.internalProps.layoutMap.clearCellRangeMap();
+            this.internalProps.useOneRowHeightFillAll = false;
+            this.stateManager.initCheckedState(this.records);
+            this.scenegraph.createSceneGraph(!clearRowHeightCache);
+            this.internalProps.emptyTip?.resetVisible();
+            this.resize();
+        }
+        addRecord(record, recordIndex, triggerEvent = true) {
             const success = listTableAddRecord(record, recordIndex, this);
             adjustHeightResizedRowMapWithAddRecordIndex(this, recordIndex, [record]);
             this.internalProps.emptyTip?.resetVisible();
-            if (success) {
+            if (triggerEvent && success) {
                 this.fireListeners(TABLE_EVENT_TYPE.ADD_RECORD, {
                     records: [record],
                     recordIndex,
@@ -79218,13 +79840,13 @@
                 });
             }
         }
-        addRecords(records, recordIndex) {
+        addRecords(records, recordIndex, triggerEvent = true) {
             const success = listTableAddRecords(records, recordIndex, this);
             if (typeof recordIndex === 'number') {
                 adjustHeightResizedRowMapWithAddRecordIndex(this, recordIndex, records);
             }
             this.internalProps.emptyTip?.resetVisible();
-            if (success) {
+            if (triggerEvent && success) {
                 this.fireListeners(TABLE_EVENT_TYPE.ADD_RECORD, {
                     records,
                     recordIndex,
@@ -79232,7 +79854,20 @@
                 });
             }
         }
-        deleteRecords(recordIndexs) {
+        deleteRecords(recordIndexs, triggerEvent = true) {
+            const deletedRecords = [];
+            if (recordIndexs?.length > 0) {
+                recordIndexs.forEach(index => {
+                    let record = null;
+                    if (typeof index === 'number') {
+                        record = this.dataSource.get(index);
+                    }
+                    else {
+                        record = [];
+                    }
+                    deletedRecords.push(record);
+                });
+            }
             listTableDeleteRecords(recordIndexs, this);
             adjustHeightResizedRowMapWithDeleteRecordIndex(this, recordIndexs);
             this.internalProps.emptyTip?.resetVisible();
@@ -79240,21 +79875,26 @@
             for (let i = 0; i < recordIndexs.length; i++) {
                 rowIndexs.push(this.getBodyRowIndexByRecordIndex(recordIndexs[i]) + this.columnHeaderLevelCount);
             }
-            this.fireListeners(TABLE_EVENT_TYPE.DELETE_RECORD, {
-                recordIndexs,
-                rowIndexs,
-                deletedCount: Array.isArray(recordIndexs[0])
-                    ? recordIndexs.length
-                    : recordIndexs.length
-            });
+            if (triggerEvent) {
+                this.fireListeners(TABLE_EVENT_TYPE.DELETE_RECORD, {
+                    recordIndexs,
+                    records: deletedRecords,
+                    rowIndexs,
+                    deletedCount: Array.isArray(recordIndexs[0])
+                        ? recordIndexs.length
+                        : recordIndexs.length
+                });
+            }
         }
-        updateRecords(records, recordIndexs) {
+        updateRecords(records, recordIndexs, triggerEvent = true) {
             listTableUpdateRecords(records, recordIndexs, this);
-            this.fireListeners(TABLE_EVENT_TYPE.UPDATE_RECORD, {
-                records,
-                recordIndexs,
-                updateCount: records.length
-            });
+            if (triggerEvent) {
+                this.fireListeners(TABLE_EVENT_TYPE.UPDATE_RECORD, {
+                    records,
+                    recordIndexs,
+                    updateCount: records.length
+                });
+            }
         }
         _hasCustomRenderOrLayout() {
             const { headerObjects } = this.internalProps.layoutMap;
@@ -80663,22 +81303,22 @@
             let x = 0;
             let y = 0;
             if (this.orient === 'left') {
-                x = padding[3];
-                y = 0;
+                x = padding[3] + this.table.tableX - this.table._tableBorderWidth_left;
+                y = 0 + this.table.tableY - this.table._tableBorderWidth_top;
                 width += padding[1] + padding[3];
             }
             else if (this.orient === 'top') {
-                x = 0;
-                y = padding[0];
+                x = 0 + this.table.tableX - this.table._tableBorderWidth_left;
+                y = padding[0] + this.table.tableY - this.table._tableBorderWidth_top;
                 height += padding[0] + padding[2];
             }
             else if (this.orient === 'right') {
                 x = rectWidth - width - padding[1];
-                y = 0;
+                y = 0 + this.table.tableY - this.table._tableBorderWidth_top;
                 width += padding[1] + padding[3];
             }
             else if (this.orient === 'bottom') {
-                x = 0;
+                x = 0 + this.table.tableX - this.table._tableBorderWidth_left;
                 y = rectHeight - height - padding[2];
                 height += padding[0] + padding[2];
             }
@@ -80985,22 +81625,22 @@
             let x = 0;
             let y = 0;
             if (this.orient === 'left') {
-                x = padding[3];
-                y = 0;
+                x = padding[3] + this.table.tableX - this.table._tableBorderWidth_left;
+                y = 0 + this.table.tableY - this.table._tableBorderWidth_top;
                 width += padding[1] + padding[3];
             }
             else if (this.orient === 'top') {
-                x = 0;
-                y = padding[0];
+                x = 0 + this.table.tableX - this.table._tableBorderWidth_left;
+                y = padding[0] + this.table.tableY - this.table._tableBorderWidth_top;
                 height += padding[0] + padding[2];
             }
             else if (this.orient === 'right') {
                 x = rectWidth - width - padding[1];
-                y = 0;
+                y = 0 + this.table.tableY - this.table._tableBorderWidth_top;
                 width += padding[1] + padding[3];
             }
             else if (this.orient === 'bottom') {
-                x = 0;
+                x = 0 + this.table.tableX - this.table._tableBorderWidth_left;
                 y = rectHeight - height - padding[2];
                 height += padding[0] + padding[2];
             }
@@ -81583,11 +82223,13 @@
                     padding[2];
             this._titleComponent.setAttributes({
                 x: this._titleOption.x ?? this._titleOption.orient === 'right'
-                    ? this.table.tableX + Math.min(this.table.tableNoFrameWidth, this.table.getDrawRange().width)
-                    : this.table.tableX,
+                    ? this.table.tableX +
+                        Math.min(this.table.tableNoFrameWidth, this.table.getDrawRange().width) -
+                        this.table._tableBorderWidth_left
+                    : this.table.tableX - this.table._tableBorderWidth_left,
                 y: this._titleOption.y ?? this._titleOption.orient === 'bottom'
-                    ? this.table.tableY + this.table.tableNoFrameHeight
-                    : this.table.tableY,
+                    ? this.table.tableY + this.table.tableNoFrameHeight - this.table._tableBorderWidth_top
+                    : this.table.tableY - this.table._tableBorderWidth_top,
                 width: this._titleOption.orient === 'top' || this._titleOption.orient === 'bottom'
                     ? realWidth
                     : this._titleOption.width,
@@ -81650,11 +82292,13 @@
                 text: this._titleOption.text ?? '',
                 subtext: this._titleOption.subtext ?? '',
                 x: this._titleOption.x ?? this._titleOption.orient === 'right'
-                    ? this.table.tableX + Math.min(this.table.tableNoFrameWidth, this.table.getDrawRange().width)
-                    : this.table.tableX,
+                    ? this.table.tableX +
+                        Math.min(this.table.tableNoFrameWidth, this.table.getDrawRange().width) -
+                        this.table._tableBorderWidth_left
+                    : this.table.tableX - this.table._tableBorderWidth_left,
                 y: this._titleOption.y ?? this._titleOption.orient === 'bottom'
-                    ? this.table.tableY + this.table.tableNoFrameHeight
-                    : this.table.tableY,
+                    ? this.table.tableY + this.table.tableNoFrameHeight - this.table._tableBorderWidth_top
+                    : this.table.tableY - this.table._tableBorderWidth_top,
                 width: this._titleOption.orient === 'top' || this._titleOption.orient === 'bottom'
                     ? realWidth
                     : this._titleOption.width,
@@ -83980,7 +84624,10 @@
             table.scenegraph.updateNextFrame();
         });
         video.onerror = () => {
-            image.image = regedIcons.damage_pic.svg;
+            const regedIcons = get$2();
+            image.image = regedIcons.video_damage_pic
+                ? regedIcons.video_damage_pic.svg
+                : regedIcons.damage_pic.svg;
         };
         video.src = value;
         video.setAttribute('preload', 'auto');
@@ -83997,6 +84644,12 @@
         image.textAlign = textAlign;
         image.textBaseline = textBaseline;
         cellGroup.appendChild(image);
+        image.successCallback = () => {
+            if (isDamagePic(image)) {
+                updateAutoSizingAndKeepAspectRatio(imageAutoSizing, keepAspectRatio, padding, textAlign, textBaseline, image, cellGroup, table);
+                table.scenegraph.updateNextFrame();
+            }
+        };
         return cellGroup;
     }
 
@@ -87709,8 +88362,8 @@
                     (this.rowDimensionKeys.indexOf(this.indicatorDimensionKey) >= 0 && path.indicatorKey));
             }
             else {
-                colHeaderPaths = dimensionPaths.colHeaderPaths;
-                rowHeaderPaths = dimensionPaths.rowHeaderPaths;
+                colHeaderPaths = dimensionPaths?.colHeaderPaths;
+                rowHeaderPaths = dimensionPaths?.rowHeaderPaths;
                 if (dimensionPaths?.cellLocation === 'body' && this._table.isPivotTable()) {
                     forceBody = true;
                 }
@@ -89068,6 +89721,9 @@
     }
 
     function join(strArr, joinChar) {
+        if (strArr.length === 0) {
+            return undefined;
+        }
         let str = '';
         for (let i = 0; i < strArr.length; i++) {
             str += strArr[i];
@@ -90511,21 +91167,71 @@
                 }
             }
         }
-        changeTreeNodeValue(rowKey = [], colKey = [], indicator, newValue) {
+        changeTreeNodeValue(rowKey = [], colKey = [], indicator, newValue, indicatorPosition) {
             const indicatorIndex = this.indicatorKeys.indexOf(indicator);
+            let rowDimensionKey;
+            if (indicatorPosition?.position === 'row') {
+                rowDimensionKey = rowKey.length >= 2 ? this.rows[rowKey.length - 2] : undefined;
+            }
+            else {
+                const rowIndex = rowKey.length - 1;
+                rowDimensionKey = rowIndex >= 0 && rowIndex < this.rows.length ? this.rows[rowIndex] : undefined;
+            }
+            let colDimensionKey;
+            if (indicatorPosition?.position === 'col') {
+                colDimensionKey = colKey.length >= 2 ? this.columns[colKey.length - 2] : undefined;
+            }
+            else {
+                const colIndex = colKey.length - 1;
+                colDimensionKey = colIndex >= 0 && colIndex < this.columns.length ? this.columns[colIndex] : undefined;
+            }
             let flatRowKey;
             let flatColKey;
             if (typeof rowKey === 'string') {
                 flatRowKey = rowKey;
             }
             else {
-                flatRowKey = rowKey.join(this.stringJoinChar);
+                if (!indicatorPosition || indicatorPosition.position === 'row') {
+                    rowKey.map((key, i) => {
+                        if (key === indicator && (!isValid$1(indicatorPosition?.index) || i === indicatorPosition.index)) {
+                            rowKey.splice(i, 1);
+                        }
+                    });
+                }
+                if (rowKey.length < this.rows.length && this.rowHierarchyType === 'grid-tree') {
+                    if (rowKey[0] === this.rowGrandTotalLabel) ;
+                    else if (((this.totals?.row?.subTotalsDimensions &&
+                        this.totals?.row?.subTotalsDimensions?.length >= 1 &&
+                        this.totals.row.subTotalsDimensions.find((dimension) => dimension === rowDimensionKey)) ||
+                        this.totals?.row?.showSubTotalsOnTreeNode) &&
+                        rowKey[rowKey.length - 1] !== this.rowSubTotalLabel) {
+                        rowKey.push(this.rowSubTotalLabel);
+                    }
+                }
+                flatRowKey = join(rowKey, this.stringJoinChar);
             }
             if (typeof colKey === 'string') {
                 flatColKey = colKey;
             }
             else {
-                flatColKey = colKey.join(this.stringJoinChar);
+                if (!indicatorPosition || indicatorPosition.position === 'col') {
+                    colKey.map((key, i) => {
+                        if (key === indicator && (!isValid$1(indicatorPosition?.index) || i === indicatorPosition.index)) {
+                            colKey.splice(i, 1);
+                        }
+                    });
+                }
+                if (colKey.length < this.columns.length && this.columnHierarchyType === 'grid-tree') {
+                    if (colKey[0] === this.colGrandTotalLabel) ;
+                    else if (((this.totals?.column?.subTotalsDimensions &&
+                        this.totals?.column?.subTotalsDimensions?.length >= 1 &&
+                        this.totals.column.subTotalsDimensions.find((dimension) => dimension === colDimensionKey)) ||
+                        this.totals?.column?.showSubTotalsOnTreeNode) &&
+                        colKey[colKey.length - 1] !== this.colSubTotalLabel) {
+                        colKey.push(this.colSubTotalLabel);
+                    }
+                }
+                flatColKey = join(colKey, this.stringJoinChar);
             }
             if (typeof newValue === 'string') {
                 if (!isNaN(parseFloat(newValue))) {
@@ -90703,10 +91409,47 @@
                         }
                     }
                 }
+                const newChangedTree = {};
+                for (const flatRowKey in this.changedTree) {
+                    const rowKeyParts = flatRowKey.split(this.stringJoinChar);
+                    let rowKeyUpdated = false;
+                    const newRowKeyParts = rowKeyParts.map(part => {
+                        if (part === String(oldValue)) {
+                            rowKeyUpdated = true;
+                            return String(value);
+                        }
+                        return part;
+                    });
+                    const newFlatRowKey = rowKeyUpdated ? join(newRowKeyParts, this.stringJoinChar) : flatRowKey;
+                    const colKeysMap = this.changedTree[flatRowKey];
+                    if (!newChangedTree[newFlatRowKey]) {
+                        newChangedTree[newFlatRowKey] = {};
+                    }
+                    for (const flatColKey in colKeysMap) {
+                        const colKeyParts = flatColKey.split(this.stringJoinChar);
+                        let colKeyUpdated = false;
+                        const newColKeyParts = colKeyParts.map(part => {
+                            if (part === String(oldValue)) {
+                                colKeyUpdated = true;
+                                return String(value);
+                            }
+                            return part;
+                        });
+                        const newFlatColKey = colKeyUpdated ? join(newColKeyParts, this.stringJoinChar) : flatColKey;
+                        newChangedTree[newFlatRowKey][newFlatColKey] = colKeysMap[flatColKey];
+                    }
+                }
+                this.changedTree = newChangedTree;
                 this.rowFlatKeys = {};
                 this.colFlatKeys = {};
                 this.tree = {};
                 this.processRecords();
+                this.processCollectedValuesWithSumBy();
+                this.processCollectedValuesWithSortBy();
+                this.totalStatistics();
+                if (this.dataConfig?.isPivotChart) {
+                    this.cacheDeminsionCollectedValues();
+                }
             }
         }
         _rowTreeHasChanged() {
@@ -90948,11 +91691,11 @@
                         this.internalProps.emptyTip?.resetVisible();
                     }
                 }
+                this.resize();
                 setTimeout(() => {
                     if (this.isReleased) {
                         return;
                     }
-                    this.resize();
                     this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
                 }, 0);
             }
@@ -91114,7 +91857,6 @@
             if (options.title) {
                 const Title = Factory.getComponent('title');
                 this.internalProps.title = new Title(options.title, this);
-                this.scenegraph.resize();
             }
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -91126,6 +91868,7 @@
                     this.internalProps.emptyTip?.resetVisible();
                 }
             }
+            this.resize();
             setTimeout(() => {
                 this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
             }, 0);
@@ -92000,9 +92743,23 @@
             this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
-            if (this.internalProps.title && !this.internalProps.title.isReleased) {
+            let isHasComponent = false;
+            if (this.internalProps.title || this.internalProps.legends) {
                 this._updateSize();
-                this.internalProps.title.resize();
+                isHasComponent = true;
+            }
+            const layoutOrder = this.options.componentLayoutOrder ?? ['legend', 'title'];
+            layoutOrder.forEach(component => {
+                if (component === 'legend') {
+                    this.internalProps.legends?.forEach(legend => {
+                        legend?.resize();
+                    });
+                }
+                else if (component === 'title') {
+                    this.internalProps.title?.resize();
+                }
+            });
+            if (isHasComponent) {
                 this.scenegraph.resize();
             }
             this.eventManager.updateEventBinder();
@@ -92279,21 +93036,34 @@
                                 cellDimensionPath.rowHeaderPaths[cellDimensionPath.rowHeaderPaths.length - 1].dimensionKey, oldValue, newValue);
                 }
                 else {
+                    let indicatorPosition;
                     const colKeys = cellDimensionPath.colHeaderPaths
                         ?.filter((path) => {
                         return !path.virtual;
                     })
-                        .map((colPath) => {
+                        .map((colPath, index) => {
+                        if (colPath.indicatorKey) {
+                            indicatorPosition = {
+                                position: 'col',
+                                index
+                            };
+                        }
                         return colPath.indicatorKey ?? colPath.value;
                     });
                     const rowKeys = cellDimensionPath.rowHeaderPaths
                         ?.filter((path) => {
                         return !path.virtual;
                     })
-                        .map((rowPath) => {
+                        .map((rowPath, index) => {
+                        if (rowPath.indicatorKey) {
+                            indicatorPosition = {
+                                position: 'row',
+                                index
+                            };
+                        }
                         return rowPath.indicatorKey ?? rowPath.value;
                     });
-                    this.dataset.changeTreeNodeValue(!this.internalProps.layoutMap.indicatorsAsCol ? rowKeys.slice(0, -1) : rowKeys, this.internalProps.layoutMap.indicatorsAsCol ? colKeys.slice(0, -1) : colKeys, this.internalProps.layoutMap.getIndicatorKey(col, row), newValue);
+                    this.dataset.changeTreeNodeValue(rowKeys, colKeys, this.internalProps.layoutMap.getIndicatorKey(col, row), newValue, indicatorPosition);
                 }
             }
             else if (this.flatDataToObjects) {
@@ -92669,11 +93439,11 @@
                     this.internalProps.emptyTip?.resetVisible();
                 }
             }
+            this.resize();
             setTimeout(() => {
                 if (this.isReleased) {
                     return;
                 }
-                this.resize();
                 this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
             }, 0);
         }
@@ -92833,7 +93603,6 @@
             if (options.title) {
                 const Title = Factory.getComponent('title');
                 this.internalProps.title = new Title(options.title, this);
-                this.scenegraph.resize();
             }
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -92845,6 +93614,7 @@
                     this.internalProps.emptyTip?.resetVisible();
                 }
             }
+            this.resize();
             setTimeout(() => {
                 this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
             }, 0);
@@ -93672,9 +94442,23 @@
             this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
-            if (this.internalProps.title && !this.internalProps.title.isReleased) {
+            let isHasComponent = false;
+            if (this.internalProps.title || this.internalProps.legends) {
                 this._updateSize();
-                this.internalProps.title.resize();
+                isHasComponent = true;
+            }
+            const layoutOrder = this.options.componentLayoutOrder ?? ['legend', 'title'];
+            layoutOrder.forEach(component => {
+                if (component === 'legend') {
+                    this.internalProps.legends?.forEach(legend => {
+                        legend?.resize();
+                    });
+                }
+                else if (component === 'title') {
+                    this.internalProps.title?.resize();
+                }
+            });
+            if (isHasComponent) {
                 this.scenegraph.resize();
             }
             this.eventManager.updateEventBinder();
@@ -94310,7 +95094,7 @@
     }
 
     registerForVrender();
-    const version = "1.0.32";
+    const version = "1.0.33";
     function getIcons() {
         return get$2();
     }