@visactor/vtable 0.22.4-alpha.0 → 0.23.0

package/dist/vtable.js

@@ -22795,22 +22795,6 @@
         }
         return res;
     }
-    function getValueFromDeepArray(array, index) {
-        let result = array;
-        for (let i = 0; i < index.length; i++) {
-            const currentIdx = index[i];
-            if (result[currentIdx]) {
-                result = result[currentIdx];
-            }
-            else {
-                return undefined;
-            }
-            if (result && result.children && i + 1 < index.length) {
-                result = result.children;
-            }
-        }
-        return result;
-    }
     function isAllDigits(str) {
         const pattern = /^-?\d+(\.\d+)?$/;
         return pattern.test(str);
@@ -23047,6 +23031,8 @@
         SORT_CLICK: 'sort_click',
         FREEZE_CLICK: 'freeze_click',
         SCROLL: 'scroll',
+        SCROLL_HORIZONTAL_END: 'scroll_horizontal_end',
+        SCROLL_VERTICAL_END: 'scroll_vertical_end',
         DROPDOWN_MENU_CLICK: 'dropdown_menu_click',
         MOUSEOVER_CHART_SYMBOL: 'mouseover_chart_symbol',
         DRAG_SELECT_END: 'drag_select_end',
@@ -23066,7 +23052,10 @@
         CHECKBOX_STATE_CHANGE: 'checkbox_state_change',
         AFTER_RENDER: 'after_render',
         INITIALIZED: 'initialized',
-        CHANGE_CELL_VALUE: 'change_cell_value'
+        CHANGE_CELL_VALUE: 'change_cell_value',
+        DRAG_FILL_HANDLE_END: 'drag_fill_handle_end',
+        MOUSEDOWN_FILL_HANDLE: 'mousedown_fill_handle',
+        DBLCLICK_FILL_HANDLE: 'dblclick_fill_handle'
     };
 
     const judgeType = (value) => {
@@ -24432,6 +24421,9 @@
                     },
                     get hoverOn() {
                         return scroll.hoverOn ?? true;
+                    },
+                    get barToSide() {
+                        return scroll.barToSide ?? false;
                     }
                 };
             }
@@ -33576,16 +33568,18 @@
         hasHierarchyStateExpand = false;
         beforeChangedRecordsMap = [];
         registedAggregators = {};
+        rowHierarchyType;
         fieldAggregators = [];
         layoutColumnObjects = [];
+        lastFilterRules;
         constructor(dataSourceObj, dataConfig, pagination, columnObjs, rowHierarchyType, hierarchyExpandLevel) {
             super();
             this.registerAggregators();
             this.dataSourceObj = dataSourceObj;
             this.dataConfig = dataConfig;
-            this._get = dataSourceObj?.get.bind(dataSourceObj) || undefined;
+            this._get = dataSourceObj?.get;
             this.layoutColumnObjects = columnObjs;
-            this._source = this.processRecords(dataSourceObj?.source ?? dataSourceObj);
+            this._source = dataSourceObj?.records ? this.processRecords(dataSourceObj?.records) : dataSourceObj;
             this._sourceLength = this._source?.length || 0;
             this.sortedIndexMap = new Map();
             this._currentPagerIndexedData = [];
@@ -33602,6 +33596,7 @@
             if (rowHierarchyType === 'tree') {
                 this.initTreeHierarchyState();
             }
+            this.rowHierarchyType = rowHierarchyType;
             this.updatePagerData();
         }
         initTreeHierarchyState() {
@@ -33610,7 +33605,8 @@
             for (let i = 0; i < nodeLength; i++) {
                 const indexKey = this.currentIndexedData[i];
                 const nodeData = this.getOriginalRecord(indexKey);
-                if (nodeData.children?.length > 0) {
+                const children = nodeData.filteredChildren ?? nodeData.children;
+                if (children?.length > 0) {
                     if (this.hierarchyExpandLevel > 1) {
                         !nodeData.hierarchyState && (nodeData.hierarchyState = HierarchyState.expand);
                     }
@@ -33674,26 +33670,46 @@
             this._generateFieldAggragations();
             const filteredRecords = [];
             const isHasAggregation = this.fieldAggregators.length >= 1;
-            const isHasFilterRule = this.dataConfig?.filterRules?.length >= 1;
+            const isHasFilterRule = this.dataConfig?.filterRules?.length >= 1 || this.lastFilterRules?.length >= 1;
             if (isHasFilterRule || isHasAggregation) {
                 for (let i = 0, len = records.length; i < len; i++) {
                     const record = records[i];
-                    if (isHasFilterRule) {
+                    if (this.dataConfig?.filterRules?.length >= 1) {
                         if (this.filterRecord(record)) {
                             filteredRecords.push(record);
+                            if (this.rowHierarchyType === 'tree' && record.children) {
+                                record.filteredChildren = this.filteredChildren(record.children);
+                            }
                             isHasAggregation && this.processRecord(record);
                         }
                     }
+                    else if (this.lastFilterRules?.length >= 1) {
+                        this.clearFilteredChildren(record);
+                        isHasAggregation && this.processRecord(record);
+                    }
                     else if (isHasAggregation) {
                         this.processRecord(record);
                     }
                 }
-                if (isHasFilterRule) {
+                if (this.dataConfig?.filterRules?.length >= 1) {
                     return filteredRecords;
                 }
             }
             return records;
         }
+        filteredChildren(records) {
+            const filteredRecords = [];
+            for (let i = 0, len = records.length; i < len; i++) {
+                const record = records[i];
+                if (this.filterRecord(record)) {
+                    filteredRecords.push(record);
+                    if (record.children) {
+                        record.filteredChildren = this.filteredChildren(record.children);
+                    }
+                }
+            }
+            return filteredRecords;
+        }
         processRecord(record) {
             for (let i = 0; i < this.fieldAggregators.length; i++) {
                 const aggregator = this.fieldAggregators[i];
@@ -33702,17 +33718,17 @@
         }
         initChildrenNodeHierarchy(indexKey, hierarchyExpandLevel, currentLevel, nodeData) {
             let childTotalLength = 0;
-            const nodeLength = nodeData.children?.length ?? 0;
+            const nodeLength = nodeData.filteredChildren ? nodeData.filteredChildren.length : nodeData.children?.length ?? 0;
             for (let j = 0; j < nodeLength; j++) {
                 if (currentLevel <= hierarchyExpandLevel || nodeData.hierarchyState === HierarchyState.expand) {
                     childTotalLength += 1;
                 }
-                const childNodeData = nodeData.children[j];
+                const childNodeData = nodeData.filteredChildren ? nodeData.filteredChildren[j] : nodeData.children[j];
                 const childIndexKey = Array.isArray(indexKey) ? indexKey.concat(j) : [indexKey, j];
                 if (currentLevel <= hierarchyExpandLevel || nodeData.hierarchyState === HierarchyState.expand) {
                     this.currentIndexedData.splice(this.currentIndexedData.indexOf(indexKey) + childTotalLength, 0, childIndexKey);
                 }
-                if (childNodeData.children?.length > 0) {
+                if (childNodeData.filteredChildren ? childNodeData.filteredChildren.length > 0 : childNodeData.children?.length > 0) {
                     if (currentLevel < hierarchyExpandLevel || childNodeData.hierarchyState === HierarchyState.expand) {
                         !childNodeData.hierarchyState && (childNodeData.hierarchyState = HierarchyState.expand);
                         this.hasHierarchyStateExpand = true;
@@ -33760,6 +33776,9 @@
                 throw new Error(`currentIndexedData should has values!`);
             }
         }
+        get records() {
+            return Array.isArray(this._source) ? this._source : [];
+        }
         get source() {
             return this._source;
         }
@@ -33808,11 +33827,12 @@
                     if (!hierarchyState || hierarchyState === HierarchyState.collapse || hierarchyState === HierarchyState.none) {
                         return;
                     }
-                    if (nodeData.children) {
-                        for (let i = 0; i < nodeData.children.length; i++) {
+                    const children = nodeData.filteredChildren ? nodeData.filteredChildren : nodeData.children;
+                    if (children) {
+                        for (let i = 0; i < children.length; i++) {
                             childrenLength += 1;
                             const childIndex = Array.isArray(indexKey) ? indexKey.concat([i]) : [indexKey, i];
-                            computeChildrenNodeLength(childIndex, nodeData.children[i].hierarchyState, nodeData.children[i]);
+                            computeChildrenNodeLength(childIndex, children[i].hierarchyState, children[i]);
                         }
                     }
                 };
@@ -33829,8 +33849,9 @@
                 return 0;
             }
             let childrenLength = 0;
-            if (nodeData.children) {
-                const subNodeSortedIndexArray = Array.from({ length: nodeData.children.length }, (_, i) => i);
+            const children = nodeData.filteredChildren ? nodeData.filteredChildren : nodeData.children;
+            if (children) {
+                const subNodeSortedIndexArray = Array.from({ length: children.length }, (_, i) => i);
                 this.lastOrder &&
                     this.lastOrder !== 'normal' &&
                     this.lastOrderField &&
@@ -33838,7 +33859,7 @@
                         ? subNodeSortedIndexArray[index]
                         : (subNodeSortedIndexArray[index] = index), (index, rel) => {
                         subNodeSortedIndexArray[index] = rel;
-                    }, nodeData.children.length, this.lastOrderFn, this.lastOrder, index => this.getOriginalField(Array.isArray(indexKey) ? indexKey.concat([index]) : [indexKey, index], this.lastOrderField));
+                    }, children.length, this.lastOrderFn, this.lastOrder, index => this.getOriginalField(Array.isArray(indexKey) ? indexKey.concat([index]) : [indexKey, index], this.lastOrderField));
                 for (let i = 0; i < subNodeSortedIndexArray.length; i++) {
                     childrenLength += 1;
                     const childIndex = Array.isArray(indexKey)
@@ -33846,10 +33867,10 @@
                         : [indexKey, subNodeSortedIndexArray[i]];
                     this.currentIndexedData.splice(this.currentIndexedData.indexOf(indexKey) + childrenLength, 0, childIndex);
                     const childData = this.getOriginalRecord(childIndex);
-                    if (!nodeData.children[i].hierarchyState && childData.children) {
-                        nodeData.children[i].hierarchyState = HierarchyState.collapse;
+                    if (!childData.hierarchyState && (childData.filteredChildren ?? childData.children)) {
+                        childData.hierarchyState = HierarchyState.collapse;
                     }
-                    childrenLength += this.pushChildrenNode(childIndex, nodeData.children[i].hierarchyState, nodeData.children[subNodeSortedIndexArray[i]]);
+                    childrenLength += this.pushChildrenNode(childIndex, childData.hierarchyState, children[subNodeSortedIndexArray[i]]);
                 }
             }
             return childrenLength;
@@ -33886,121 +33907,153 @@
             }
         }
         setRecord(record, index) {
-            const indexed = this.getIndexKey(index);
-            if (!Array.isArray(indexed)) {
-                this.source.splice(indexed, 1, record);
+            let isAdd = true;
+            if (this.dataConfig?.filterRules?.length >= 1) {
+                if (this.filterRecord(record)) {
+                    if (this.rowHierarchyType === 'tree' && record.children) {
+                        record.filteredChildren = this.filteredChildren(record.children);
+                    }
+                }
+                else {
+                    isAdd = false;
+                }
             }
-            else {
-                const c_node_index = indexed[indexed.length - 1];
-                const p_node = this.getOriginalRecord(indexed.slice(0, indexed.length - 1));
-                p_node.children.splice(c_node_index, 1, record);
+            if (isAdd && Array.isArray(this.records)) {
+                const indexed = this.getIndexKey(index);
+                if (!Array.isArray(indexed)) {
+                    this.records.splice(indexed, 1, record);
+                }
             }
         }
         addRecord(record, index) {
-            this.source.splice(index, 0, record);
-            this.currentIndexedData.push(this.currentIndexedData.length);
-            this._sourceLength += 1;
-            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) {
+            if (Array.isArray(this.records)) {
+                this.records.splice(index, 0, record);
+                this.currentIndexedData.push(this.currentIndexedData.length);
+                this._sourceLength += 1;
+                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();
                 }
-            }
-            else {
-                this.pagination.perPageCount = this._sourceLength;
-                this.pagination.totalCount = this._sourceLength;
-                this.updatePagerData();
+                if (this.dataSourceObj?.added) {
+                    this.dataSourceObj.added(index, 1);
+                }
             }
         }
         addRecords(recordArr, index) {
-            if (Array.isArray(recordArr)) {
-                this.source.splice(index, 0, ...recordArr);
-                for (let i = 0; i < recordArr.length; i++) {
-                    this.currentIndexedData.push(this.currentIndexedData.length);
+            if (Array.isArray(this.records)) {
+                if (Array.isArray(recordArr)) {
+                    this.records.splice(index, 0, ...recordArr);
+                    for (let i = 0; i < recordArr.length; i++) {
+                        this.currentIndexedData.push(this.currentIndexedData.length);
+                    }
+                    this._sourceLength += recordArr.length;
                 }
-                this._sourceLength += recordArr.length;
-            }
-            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) {
+                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();
                 }
-            }
-            else {
-                this.pagination.perPageCount = this._sourceLength;
-                this.pagination.totalCount = this._sourceLength;
-                this.updatePagerData();
+                if (this.dataSourceObj?.added) {
+                    this.dataSourceObj.added(index, recordArr.length);
+                }
             }
         }
         addRecordForSorted(record) {
-            this.source.push(record);
-            this.currentIndexedData.push(this.currentIndexedData.length);
-            this._sourceLength += 1;
-            this.sortedIndexMap.clear();
-            if (!this.userPagination) {
-                this.pagination.perPageCount = this._sourceLength;
-                this.pagination.totalCount = this._sourceLength;
+            if (Array.isArray(this.records)) {
+                this.records.push(record);
+                this.currentIndexedData.push(this.currentIndexedData.length);
+                this._sourceLength += 1;
+                this.sortedIndexMap.clear();
+                if (!this.userPagination) {
+                    this.pagination.perPageCount = this._sourceLength;
+                    this.pagination.totalCount = this._sourceLength;
+                }
             }
         }
         addRecordsForSorted(recordArr) {
-            if (Array.isArray(recordArr)) {
-                this.source.push(...recordArr);
-                for (let i = 0; i < recordArr.length; i++) {
-                    this.currentIndexedData.push(this.currentIndexedData.length);
+            if (Array.isArray(this.records)) {
+                if (Array.isArray(recordArr)) {
+                    this.records.push(...recordArr);
+                    for (let i = 0; i < recordArr.length; i++) {
+                        this.currentIndexedData.push(this.currentIndexedData.length);
+                    }
+                    this._sourceLength += recordArr.length;
+                    this.sortedIndexMap.clear();
+                }
+                if (!this.userPagination) {
+                    this.pagination.perPageCount = this._sourceLength;
+                    this.pagination.totalCount = this._sourceLength;
                 }
-                this._sourceLength += recordArr.length;
-                this.sortedIndexMap.clear();
-            }
-            if (!this.userPagination) {
-                this.pagination.perPageCount = this._sourceLength;
-                this.pagination.totalCount = this._sourceLength;
             }
         }
         deleteRecords(recordIndexs) {
-            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;
+            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;
+                    }
+                    realDeletedRecordIndexs.push(recordIndex);
+                    this.records.splice(recordIndex, 1);
+                    this.currentIndexedData.pop();
+                    this._sourceLength -= 1;
                 }
-                realDeletedRecordIndexs.push(recordIndex);
-                this.source.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.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;
             }
-            return realDeletedRecordIndexs;
+            return [];
         }
         deleteRecordsForSorted(recordIndexs) {
-            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;
+            if (Array.isArray(this.records)) {
+                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;
+                    }
+                    const rawIndex = this.currentIndexedData[recordIndex];
+                    this.records.splice(rawIndex, 1);
+                    this._sourceLength -= 1;
+                }
+                this.sortedIndexMap.clear();
+                if (!this.userPagination) {
+                    this.pagination.perPageCount = this._sourceLength;
+                    this.pagination.totalCount = this._sourceLength;
                 }
-                const rawIndex = this.currentIndexedData[recordIndex];
-                this.source.splice(rawIndex, 1);
-                this._sourceLength -= 1;
-            }
-            this.sortedIndexMap.clear();
-            if (!this.userPagination) {
-                this.pagination.perPageCount = this._sourceLength;
-                this.pagination.totalCount = this._sourceLength;
             }
         }
         updateRecords(records, recordIndexs) {
@@ -34011,7 +34064,7 @@
                     continue;
                 }
                 realDeletedRecordIndexs.push(recordIndex);
-                this.source[recordIndex] = records[index];
+                this.records[recordIndex] = records[index];
             }
             if (this.userPagination) {
                 this.updatePagerData();
@@ -34028,7 +34081,7 @@
                 if (typeof rawIndex !== 'number') {
                     return;
                 }
-                this.source[rawIndex] = records[index];
+                this.records[rawIndex] = records[index];
             }
             this.sortedIndexMap.clear();
         }
@@ -34079,9 +34132,15 @@
             this.updatePagerData();
             this.fireListeners(EVENT_TYPE.CHANGE_ORDER, null);
         }
+        clearFilteredChildren(record) {
+            record.filteredChildren = undefined;
+            for (let i = 0; i < record.children?.length ?? 0; i++) {
+                this.clearFilteredChildren(record.children[i]);
+            }
+        }
         filterRecord(record) {
             let isReserved = true;
-            for (let i = 0; i < this.dataConfig.filterRules.length; i++) {
+            for (let i = 0; i < this.dataConfig.filterRules?.length; i++) {
                 const filterRule = this.dataConfig?.filterRules[i];
                 if (filterRule.filterKey) {
                     const filterValue = record[filterRule.filterKey];
@@ -34098,8 +34157,9 @@
             return isReserved;
         }
         updateFilterRulesForSorted(filterRules) {
+            this.lastFilterRules = this.dataConfig.filterRules;
             this.dataConfig.filterRules = filterRules;
-            this._source = this.processRecords(this.dataSourceObj?.source ?? this.dataSourceObj);
+            this._source = this.processRecords(this.dataSourceObj?.records ?? this.dataSourceObj);
             this._sourceLength = this._source?.length || 0;
             this.sortedIndexMap.clear();
             this.currentIndexedData = Array.from({ length: this._sourceLength }, (_, i) => i);
@@ -34109,8 +34169,9 @@
             }
         }
         updateFilterRules(filterRules) {
+            this.lastFilterRules = this.dataConfig.filterRules;
             this.dataConfig.filterRules = filterRules;
-            this._source = this.processRecords(this.dataSourceObj?.source ?? this.dataSourceObj);
+            this._source = this.processRecords(this.dataSourceObj?.records ?? this.dataSourceObj);
             this._sourceLength = this._source?.length || 0;
             this.currentIndexedData = Array.from({ length: this._sourceLength }, (_, i) => i);
             if (this.userPagination) {
@@ -34119,6 +34180,9 @@
             else {
                 this.pagination.perPageCount = this._sourceLength;
                 this.pagination.totalCount = this._sourceLength;
+                if (this.rowHierarchyType === 'tree') {
+                    this.initTreeHierarchyState();
+                }
                 this.updatePagerData();
             }
         }
@@ -34167,6 +34231,7 @@
         }
         release() {
             super.release?.();
+            this.lastFilterRules = null;
         }
         clearSortedMap() {
             this.currentIndexedData && (this.currentIndexedData.length = 0);
@@ -34182,10 +34247,19 @@
             this.currentPagerIndexedData.length = 0;
         }
         getOriginalRecord(dataIndex) {
-            if (this.dataConfig?.filterRules) {
-                return this.source[dataIndex];
+            let data;
+            if (!this.dataSourceObj.records) {
+                data = this._get(dataIndex);
             }
-            return getValue(this._get(dataIndex), (val) => {
+            else {
+                if (Array.isArray(dataIndex)) {
+                    data = getValueFromDeepArray(this.records, dataIndex);
+                }
+                else {
+                    data = this.records[dataIndex];
+                }
+            }
+            return getValue(data, (val) => {
                 this.recordPromiseCallBack(dataIndex, val);
             });
         }
@@ -34193,7 +34267,19 @@
             if (this.beforeChangedRecordsMap?.[dataIndex]) {
                 return this.beforeChangedRecordsMap[dataIndex];
             }
-            return getValue(this._get(dataIndex), (val) => {
+            let data;
+            if (!this.dataSourceObj.records) {
+                data = this._get(dataIndex);
+            }
+            else {
+                if (Array.isArray(dataIndex)) {
+                    data = getValueFromDeepArray(this.records, dataIndex);
+                }
+                else {
+                    data = this.records[dataIndex];
+                }
+            }
+            return getValue(data, (val) => {
                 this.recordPromiseCallBack(dataIndex, val);
             });
         }
@@ -34317,30 +34403,32 @@
                         targetI = targetIndexs.splice(targetIndexs.length - 1, 1)[0];
                         if (sourceIndexs.length >= 1) {
                             const parent = this.getOriginalRecord(sourceIndexs);
-                            const sourceIds = parent.children.splice(sourceI, 1);
+                            const sourceIds = parent.filteredChildren
+                                ? parent.filteredChildren.splice(sourceI, 1)
+                                : parent.children.splice(sourceI, 1);
                             sourceIds.unshift(targetI, 0);
-                            Array.prototype.splice.apply(parent.children, sourceIds);
+                            Array.prototype.splice.apply(parent.filteredChildren ?? parent.children, sourceIds);
                         }
                         else {
-                            const sourceIds = this.source.splice(sourceI, 1);
+                            const sourceIds = this.records.splice(sourceI, 1);
                             sourceIds.unshift(targetI, 0);
-                            Array.prototype.splice.apply(this.source, sourceIds);
+                            Array.prototype.splice.apply(this.records, sourceIds);
                         }
                     }
                     else {
                         sourceI = this.currentPagerIndexedData[sourceIndex];
                         targetI = this.currentPagerIndexedData[targetIndex];
-                        const records = this.source.splice(sourceI, 1);
+                        const records = this.records.splice(sourceI, 1);
                         records.unshift(targetI, 0);
-                        Array.prototype.splice.apply(this.source, records);
+                        Array.prototype.splice.apply(this.records, records);
                     }
                     this.restoreTreeHierarchyState();
                     this.updatePagerData();
                 }
                 else {
-                    const records = this.source.splice(sourceIndex, 1);
+                    const records = this.records.splice(sourceIndex, 1);
                     records.unshift(targetIndex, 0);
-                    Array.prototype.splice.apply(this.source, records);
+                    Array.prototype.splice.apply(this.records, records);
                 }
             }
         }
@@ -34348,14 +34436,16 @@
             if (this.hierarchyExpandLevel) {
                 for (let i = 0; i < this._sourceLength; i++) {
                     const nodeData = this.getOriginalRecord(i);
-                    nodeData.children && !nodeData.hierarchyState && (nodeData.hierarchyState = HierarchyState.collapse);
+                    const children = nodeData.filteredChildren ?? nodeData.children;
+                    children && !nodeData.hierarchyState && (nodeData.hierarchyState = HierarchyState.collapse);
                 }
                 this.currentIndexedData = Array.from({ length: this._sourceLength }, (_, i) => i);
                 let nodeLength = this._sourceLength;
                 for (let i = 0; i < nodeLength; i++) {
                     const indexKey = this.currentIndexedData[i];
                     const nodeData = this.getOriginalRecord(indexKey);
-                    if (nodeData.children?.length > 0 && nodeData.hierarchyState === HierarchyState.expand) {
+                    const children = nodeData.filteredChildren ?? nodeData.children;
+                    if (children?.length > 0 && nodeData.hierarchyState === HierarchyState.expand) {
                         this.hasHierarchyStateExpand = true;
                         const childrenLength = this.restoreChildrenNodeHierarchy(indexKey, nodeData);
                         i += childrenLength;
@@ -34369,12 +34459,13 @@
         }
         restoreChildrenNodeHierarchy(indexKey, nodeData) {
             let childTotalLength = 0;
-            const nodeLength = nodeData.children?.length ?? 0;
+            const children = nodeData.filteredChildren ?? nodeData.children;
+            const nodeLength = children?.length ?? 0;
             for (let j = 0; j < nodeLength; j++) {
                 if (nodeData.hierarchyState === HierarchyState.expand) {
                     childTotalLength += 1;
                 }
-                const childNodeData = nodeData.children[j];
+                const childNodeData = children[j];
                 const childIndexKey = Array.isArray(indexKey) ? indexKey.concat(j) : [indexKey, j];
                 if (nodeData.hierarchyState === HierarchyState.expand) {
                     this.currentIndexedData.splice(this.currentIndexedData.indexOf(indexKey) + childTotalLength, 0, childIndexKey);
@@ -34384,6 +34475,23 @@
             return childTotalLength;
         }
     }
+    function getValueFromDeepArray(array, index) {
+        let result = array;
+        for (let i = 0; i < index.length; i++) {
+            const currentIdx = index[i];
+            if (result[currentIdx]) {
+                result = result[currentIdx];
+            }
+            else {
+                return undefined;
+            }
+            const children = result.filteredChildren ?? result?.children;
+            if (children && i + 1 < index.length) {
+                result = children;
+            }
+        }
+        return result;
+    }
 
     function _setFieldCache(fCache, index, field, value) {
         const recCache = fCache[index] || (fCache[index] = new Map());
@@ -34398,18 +34506,15 @@
         static ofArray(array, dataConfig, pagination, columnObjs, rowHierarchyType, hierarchyExpandLevel) {
             return new CachedDataSource({
                 get: (index) => {
-                    if (Array.isArray(index)) {
-                        return getValueFromDeepArray(array, index);
-                    }
                     return array[index];
                 },
                 length: array.length,
-                source: array
+                records: array
             }, dataConfig, pagination, columnObjs, rowHierarchyType, hierarchyExpandLevel);
         }
         constructor(opt, dataConfig, pagination, columnObjs, rowHierarchyType, hierarchyExpandLevel) {
             super(opt, dataConfig, pagination, columnObjs, rowHierarchyType, hierarchyExpandLevel);
-            this._recordCache = {};
+            this._recordCache = [];
             this._fieldCache = {};
         }
         getOriginalRecord(index) {
@@ -34430,7 +34535,7 @@
         }
         clearCache() {
             if (this._recordCache) {
-                this._recordCache = {};
+                this._recordCache = [];
             }
             if (this._fieldCache) {
                 this._fieldCache = {};
@@ -34442,8 +34547,13 @@
         recordPromiseCallBack(index, record) {
             this._recordCache[index] = record;
         }
+        get records() {
+            return Array.isArray(this._recordCache) && this._recordCache.length > 0 ? this._recordCache : super.records;
+        }
         release() {
             super.release?.();
+            this._recordCache = null;
+            this._fieldCache = null;
         }
     }
 
@@ -34926,9 +35036,8 @@
     }
     function _setRecords(table, records = []) {
         _dealWithUpdateDataSource(table, () => {
-            const data = records;
             table.internalProps.records = records;
-            const newDataSource = (table.internalProps.dataSource = CachedDataSource.ofArray(data, table.internalProps.dataConfig, table.pagination, table.internalProps.layoutMap.columnObjects, table.internalProps.layoutMap.rowHierarchyType, table.options.hierarchyExpandLevel ?? (table._hasHierarchyTreeHeader?.() ? 1 : undefined)));
+            const newDataSource = (table.internalProps.dataSource = CachedDataSource.ofArray(records, table.internalProps.dataConfig, table.pagination, table.internalProps.layoutMap.columnObjects, table.internalProps.layoutMap.rowHierarchyType, table.options.hierarchyExpandLevel ?? (table._hasHierarchyTreeHeader?.() ? 1 : undefined)));
             table.addReleaseObj(newDataSource);
         });
     }
@@ -41460,7 +41569,8 @@
             componentGroup.addChild(this.columnResizeBgLine);
             componentGroup.addChild(this.columnResizeLine);
             componentGroup.addChild(this.columnResizeLabel);
-            if (this.table.theme.scrollStyle.hoverOn) {
+            const hoverOn = this.table.theme.scrollStyle.hoverOn;
+            if (hoverOn && !this.table.theme.scrollStyle.barToSide) {
                 componentGroup.addChild(this.hScrollBar);
                 componentGroup.addChild(this.vScrollBar);
             }
@@ -41531,9 +41641,17 @@
             if (totalWidth > tableWidth) {
                 const y = Math.min(tableHeight, totalHeight);
                 const rangeEnd = Math.max(0.05, (tableWidth - frozenColsWidth) / (totalWidth - frozenColsWidth));
+                const hoverOn = this.table.theme.scrollStyle.hoverOn;
+                let attrY = 0;
+                if (this.table.theme.scrollStyle.barToSide) {
+                    attrY = this.table.tableNoFrameHeight - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.y);
+                }
+                else {
+                    attrY = y - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.y);
+                }
                 this.hScrollBar.setAttributes({
-                    x: frozenColsWidth + (!this.table.theme.scrollStyle.hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0),
-                    y: y - (this.table.theme.scrollStyle.hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.y),
+                    x: frozenColsWidth + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0),
+                    y: attrY,
                     width: tableWidth - frozenColsWidth - rightFrozenColsWidth,
                     range: [0, rangeEnd],
                     visible: visible === 'always'
@@ -41558,9 +41676,17 @@
             if (totalHeight > tableHeight) {
                 const x = Math.min(tableWidth, totalWidth);
                 const rangeEnd = Math.max(0.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));
+                let attrX = 0;
+                const hoverOn = this.table.theme.scrollStyle.hoverOn;
+                if (this.table.theme.scrollStyle.barToSide) {
+                    attrX = this.table.tableNoFrameWidth - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.x);
+                }
+                else {
+                    attrX = x - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.x);
+                }
                 this.vScrollBar.setAttributes({
-                    x: x - (this.table.theme.scrollStyle.hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.x),
-                    y: frozenRowsHeight + (!this.table.theme.scrollStyle.hoverOn ? this.table.scenegraph.tableGroup.attribute.y : 0),
+                    x: attrX,
+                    y: frozenRowsHeight + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.y : 0),
                     height: tableHeight - frozenRowsHeight - bottomFrozenRowsHeight,
                     range: [0, rangeEnd],
                     visible: visible === 'always'
@@ -45371,6 +45497,7 @@
         const colsWidth = scene.table.getColsWidth(computeRectCellRangeStartCol, computeRectCellRangeEndCol);
         const rowsHeight = scene.table.getRowsHeight(computeRectCellRangeStartRow, computeRectCellRangeEndRow);
         const firstCellBound = scene.highPerformanceGetCell(computeRectCellRangeStartCol, computeRectCellRangeStartRow).globalAABBBounds;
+        const lastCellBound = scene.highPerformanceGetCell(computeRectCellRangeEndCol, computeRectCellRangeEndRow).globalAABBBounds;
         selectComp.rect.setAttributes({
             x: firstCellBound.x1 - scene.tableGroup.attribute.x,
             y: firstCellBound.y1 - scene.tableGroup.attribute.y,
@@ -45378,6 +45505,15 @@
             height: rowsHeight,
             visible: true
         });
+        if (selectComp.fillhandle) {
+            selectComp.fillhandle.setAttributes({
+                x: lastCellBound.x2 - scene.tableGroup.attribute.x - 3,
+                y: lastCellBound.y2 - scene.tableGroup.attribute.y - 3,
+                width: 6,
+                height: 6,
+                visible: true
+            });
+        }
         const isNearRowHeader = scene.table.frozenColCount ? startCol === scene.table.frozenColCount : false;
         const isNearRightRowHeader = scene.table.rightFrozenColCount
             ? scene.table.rightFrozenColCount > 0 && endCol === scene.table.colCount - scene.table.rightFrozenColCount - 1
@@ -45581,6 +45717,7 @@
         ifExtendSelectRange && extendSelectRange();
         scene.selectingRangeComponents.forEach((selectComp, key) => {
             selectComp.rect.delete();
+            selectComp.fillhandle?.delete();
         });
         scene.selectingRangeComponents = new Map();
         let needRowHeader = false;
@@ -45710,11 +45847,27 @@
     }
 
     function createCellSelectBorder(scene, start_Col, start_Row, end_Col, end_Row, selectRangeType, selectId, strokes) {
+        let isHasFillHandleRect = !!scene.table.options.excelOptions?.fillHandle;
+        if (scene.table.stateManager.select.ranges?.length > 1) {
+            isHasFillHandleRect = false;
+            scene.removeFillHandleFromSelectComponents();
+        }
+        else if (scene.table.stateManager.select.ranges?.length === 1) {
+            const maxRow = Math.max(scene.table.stateManager.select.ranges[0].start.row, scene.table.stateManager.select.ranges[0].end.row);
+            const maxCol = Math.max(scene.table.stateManager.select.ranges[0].start.col, scene.table.stateManager.select.ranges[0].end.col);
+            if (scene.table.isHeader(maxCol, maxRow)) {
+                isHasFillHandleRect = false;
+            }
+        }
+        if (Array.isArray(strokes) && (strokes[1] === false || strokes[2] === false)) {
+            isHasFillHandleRect = false;
+        }
         const startCol = Math.min(start_Col, end_Col);
         const startRow = Math.min(start_Row, end_Row);
         const endCol = Math.max(start_Col, end_Col);
         const endRow = Math.max(start_Row, end_Row);
         const firstCellBound = scene.highPerformanceGetCell(startCol, startRow).globalAABBBounds;
+        const lastCellBound = scene.highPerformanceGetCell(endCol, endRow).globalAABBBounds;
         const theme = scene.table.theme;
         const bodyClickBorderColor = theme.selectionStyle?.cellBorderColor;
         const bodyClickLineWidth = theme.selectionStyle?.cellBorderLineWidth;
@@ -45734,9 +45887,23 @@
             height: 0,
             visible: true
         });
+        let fillhandle;
+        if (isHasFillHandleRect) {
+            fillhandle = createRect({
+                pickable: false,
+                fill: bodyClickBorderColor,
+                stroke: bodyClickBorderColor,
+                x: lastCellBound.x2 - 3,
+                y: lastCellBound.y2 - 3,
+                width: 6,
+                height: 6,
+                visible: true
+            });
+        }
         scene.lastSelectId = selectId;
         scene.selectingRangeComponents.set(`${startCol}-${startRow}-${endCol}-${endRow}-${selectId}`, {
             rect,
+            fillhandle,
             role: selectRangeType
         });
         scene.tableGroup.insertAfter(rect, selectRangeType === 'body'
@@ -45756,12 +45923,31 @@
                                     : selectRangeType === 'bottomFrozen'
                                         ? scene.bottomFrozenGroup
                                         : scene.rightBottomCornerGroup);
+        isHasFillHandleRect &&
+            scene.tableGroup.insertAfter(fillhandle, selectRangeType === 'body'
+                ? scene.bodyGroup
+                : selectRangeType === 'columnHeader'
+                    ? scene.colHeaderGroup
+                    : selectRangeType === 'rowHeader'
+                        ? scene.rowHeaderGroup
+                        : selectRangeType === 'cornerHeader'
+                            ? scene.cornerHeaderGroup
+                            : selectRangeType === 'rightTopCorner'
+                                ? scene.rightTopCornerGroup
+                                : selectRangeType === 'rightFrozen'
+                                    ? scene.rightFrozenGroup
+                                    : selectRangeType === 'leftBottomCorner'
+                                        ? scene.leftBottomCornerGroup
+                                        : selectRangeType === 'bottomFrozen'
+                                            ? scene.bottomFrozenGroup
+                                            : scene.rightBottomCornerGroup);
     }
 
     function moveSelectingRangeComponentsToSelectedRangeComponents(scene) {
         scene.selectingRangeComponents.forEach((rangeComponent, key) => {
             if (scene.selectedRangeComponents.get(key)) {
-                scene.selectedRangeComponents.get(key).rect.delete();
+                scene.selectingRangeComponents.get(key).rect.delete();
+                scene.selectingRangeComponents.get(key).fillhandle?.delete();
             }
             scene.selectedRangeComponents.set(key, rangeComponent);
         });
@@ -45774,6 +45960,7 @@
             const lastSelectId = key.split('-')[4];
             if (lastSelectId === scene.lastSelectId) {
                 selectComp.rect.delete();
+                selectComp.fillhandle?.delete();
                 scene.selectedRangeComponents.delete(key);
             }
         });
@@ -45781,9 +45968,16 @@
     function deleteAllSelectBorder(scene) {
         scene.selectedRangeComponents.forEach((selectComp, key) => {
             selectComp.rect.delete();
+            selectComp.fillhandle?.delete();
         });
         scene.selectedRangeComponents = new Map();
     }
+    function removeFillHandleFromSelectComponents(scene) {
+        scene.selectedRangeComponents.forEach((selectComp, key) => {
+            selectComp.fillhandle?.delete();
+            selectComp.fillhandle = undefined;
+        });
+    }
 
     function updateRow(removeCells, addCells, updateCells, table) {
         const scene = table.scenegraph;
@@ -46429,6 +46623,9 @@
         if (!scene.isPivot && !scene.table.transpose) {
             scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
         }
+        else if (scene.table.options.frozenColCount) {
+            scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
+        }
         scene.hasFrozen = true;
         scene.frozenColCount = scene.table.frozenColCount;
         scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0;
@@ -46465,6 +46662,9 @@
         if (!scene.isPivot && !scene.table.transpose) {
             scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
         }
+        else if (scene.table.options.frozenColCount) {
+            scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
+        }
         scene.hasFrozen = true;
     }
     function moveColumnFromBodyToRowHeader(scene) {
@@ -47956,6 +48156,9 @@
         updateCellSelectBorder(newStartCol, newStartRow, newEndCol, newEndRow, extendSelectRange = true) {
             updateCellSelectBorder(this, newStartCol, newStartRow, newEndCol, newEndRow, extendSelectRange);
         }
+        removeFillHandleFromSelectComponents() {
+            removeFillHandleFromSelectComponents(this);
+        }
         recreateAllSelectRangeComponents() {
             deleteAllSelectBorder(this);
             this.table.stateManager.select.ranges.forEach((cellRange) => {
@@ -48314,6 +48517,9 @@
             if (!this.isPivot && !this.table.transpose) {
                 this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
             }
+            else if (this.table.options.frozenColCount) {
+                this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
+            }
             this.table.stateManager.checkFrozen();
             this.updateContainer();
             this.createFrameBorder();
@@ -48730,6 +48936,9 @@
             if (!this.isPivot && !this.table.transpose) {
                 this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
             }
+            else if (this.table.options.frozenColCount) {
+                this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
+            }
             this.component.updateScrollBar();
             this.updateNextFrame();
         }
@@ -48741,6 +48950,9 @@
             if (!this.isPivot && !this.table.transpose) {
                 this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
             }
+            else if (this.table.options.frozenColCount) {
+                this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
+            }
             this.component.updateScrollBar();
             this.updateNextFrame();
         }
@@ -49175,10 +49387,76 @@
                     };
                 }
                 else {
-                    currentRange.end = {
-                        col,
-                        row
-                    };
+                    if (state.fillHandle.isFilling) {
+                        if (state.fillHandle.direction === 'top') {
+                            if (row === state.fillHandle.beforeFillMinRow && row === state.fillHandle.beforeFillMaxRow) {
+                                currentRange.start.row = currentRange.end.row = row;
+                            }
+                            else if (row <= state.fillHandle.beforeFillMinRow) {
+                                if (currentRange.start.row < currentRange.end.row) {
+                                    const temp = currentRange.start.row;
+                                    currentRange.start.row = currentRange.end.row;
+                                    currentRange.end.row = temp;
+                                }
+                                currentRange.end.row = row;
+                            }
+                            else if (row === state.fillHandle.beforeFillMaxRow) {
+                                if (currentRange.start.row > currentRange.end.row) {
+                                    currentRange.start.row = row;
+                                }
+                                else {
+                                    currentRange.end.row = row;
+                                }
+                            }
+                        }
+                        else if (state.fillHandle.direction === 'bottom') {
+                            if (row >= state.fillHandle.beforeFillMaxRow) {
+                                if (currentRange.start.row > currentRange.end.row) {
+                                    const temp = currentRange.start.row;
+                                    currentRange.start.row = currentRange.end.row;
+                                    currentRange.end.row = temp;
+                                }
+                                currentRange.end.row = row;
+                            }
+                        }
+                        else if (state.fillHandle.direction === 'left') {
+                            if (col === state.fillHandle.beforeFillMinCol && col === state.fillHandle.beforeFillMaxCol) {
+                                currentRange.start.col = currentRange.end.col = col;
+                            }
+                            else if (col <= state.fillHandle.beforeFillMinCol) {
+                                if (currentRange.start.col < currentRange.end.col) {
+                                    const temp = currentRange.start.col;
+                                    currentRange.start.col = currentRange.end.col;
+                                    currentRange.end.col = temp;
+                                }
+                                currentRange.end.col = col;
+                            }
+                            else if (col === state.fillHandle.beforeFillMaxCol) {
+                                if (currentRange.start.col > currentRange.end.col) {
+                                    currentRange.start.col = col;
+                                }
+                                else {
+                                    currentRange.end.col = col;
+                                }
+                            }
+                        }
+                        else if (state.fillHandle.direction === 'right') {
+                            if (col >= state.fillHandle.beforeFillMaxCol) {
+                                if (currentRange.start.col > currentRange.end.col) {
+                                    const temp = currentRange.start.col;
+                                    currentRange.start.col = currentRange.end.col;
+                                    currentRange.end.col = temp;
+                                }
+                                currentRange.end.col = col;
+                            }
+                        }
+                    }
+                    else {
+                        currentRange.end = {
+                            col,
+                            row
+                        };
+                    }
                 }
                 scenegraph.updateCellSelectBorder(currentRange.start.col, currentRange.start.row, currentRange.end.col, currentRange.end.row, extendSelectRange);
             }
@@ -49544,6 +49822,9 @@
             !state.table.transpose) {
             state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen);
         }
+        else if (state.table.options.frozenColCount) {
+            state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1);
+        }
         state.table.scenegraph.updateNextFrame();
     }
     function clearWidthsAndHeightsCache(colMin, colMax, rowMin, rowMax, table) {
@@ -49668,6 +49949,9 @@
             !state.table.transpose) {
             state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen);
         }
+        else if (state.table.options.frozenColCount) {
+            state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1);
+        }
         state.table.scenegraph.updateNextFrame();
     }
     function updateResizeColForColumn(detaX, state) {
@@ -49750,6 +50034,7 @@
         table;
         interactionState;
         select;
+        fillHandle;
         hover;
         hoverIcon;
         residentHoverIcon;
@@ -49852,6 +50137,11 @@
                 },
                 selecting: false
             };
+            this.fillHandle = {
+                isFilling: false,
+                startX: undefined,
+                startY: undefined
+            };
             this.hover = {
                 highlightScope: HighlightScope.single,
                 cellPos: {
@@ -50055,6 +50345,9 @@
         isResizeCol() {
             return this.columnResize.resizing;
         }
+        isFillHandle() {
+            return this.fillHandle.isFilling;
+        }
         isSelecting() {
             return this.select.selecting;
         }
@@ -50088,9 +50381,41 @@
             this.columnResize.x = x;
             this.columnResize.isRightFrozen = isRightFrozen;
             this.table.scenegraph.component.showResizeCol(col, y, isRightFrozen);
-            this.table.stateManager.updateSelectPos(-1, -1);
+            this.updateSelectPos(-1, -1);
             this.table.scenegraph.updateNextFrame();
         }
+        startFillSelect(x, y) {
+            this.fillHandle.isFilling = true;
+            this.fillHandle.startX = x;
+            this.fillHandle.startY = y;
+            const currentRange = this.select.ranges[this.select.ranges.length - 1];
+            this.fillHandle.beforeFillMinCol = Math.min(currentRange.start.col, currentRange.end.col);
+            this.fillHandle.beforeFillMinRow = Math.min(currentRange.start.row, currentRange.end.row);
+            this.fillHandle.beforeFillMaxCol = Math.max(currentRange.start.col, currentRange.end.col);
+            this.fillHandle.beforeFillMaxRow = Math.max(currentRange.start.row, currentRange.end.row);
+            this.table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_FILL_HANDLE, {});
+        }
+        endFillSelect() {
+            this.fillHandle.isFilling = false;
+            this.fillHandle.startX = undefined;
+            this.fillHandle.startY = undefined;
+            this.fillHandle.directionRow = undefined;
+            const currentMinCol = Math.min(this.select.ranges[0].start.col, this.select.ranges[0].end.col);
+            const currentMinRow = Math.min(this.select.ranges[0].start.row, this.select.ranges[0].end.row);
+            const currentMaxCol = Math.max(this.select.ranges[0].start.col, this.select.ranges[0].end.col);
+            const currentMaxRow = Math.max(this.select.ranges[0].start.row, this.select.ranges[0].end.row);
+            if (this.fillHandle.beforeFillMinCol !== currentMinCol ||
+                this.fillHandle.beforeFillMinRow !== currentMinRow ||
+                this.fillHandle.beforeFillMaxCol !== currentMaxCol ||
+                this.fillHandle.beforeFillMaxRow !== currentMaxRow) {
+                this.table.eventManager.isDraging &&
+                    this.table.fireListeners(TABLE_EVENT_TYPE.DRAG_FILL_HANDLE_END, { direction: this.fillHandle.direction });
+            }
+            this.fillHandle.beforeFillMaxCol = undefined;
+            this.fillHandle.beforeFillMaxRow = undefined;
+            this.fillHandle.beforeFillMinCol = undefined;
+            this.fillHandle.beforeFillMinRow = undefined;
+        }
         updateResizeCol(xInTable, yInTable) {
             updateResizeColumn(xInTable, yInTable, this);
         }
@@ -50136,13 +50461,44 @@
                 this.table.scenegraph.updateFrozenIcon(0, this.table.colCount - 1);
             }
         }
+        checkVerticalScrollBarEnd() {
+            const totalHeight = this.table.getAllRowsHeight();
+            const scrollTop = this.scroll.verticalBarPos;
+            const viewHeight = this.table.tableNoFrameHeight;
+            if (scrollTop + viewHeight >= totalHeight) {
+                this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL_VERTICAL_END, {
+                    scrollTop,
+                    scrollLeft: this.scroll.horizontalBarPos,
+                    scrollHeight: this.table.theme.scrollStyle?.width,
+                    scrollWidth: this.table.theme.scrollStyle?.width,
+                    viewHeight,
+                    viewWidth: this.table.tableNoFrameWidth
+                });
+            }
+        }
+        checkHorizontalScrollBarEnd() {
+            const totalWidth = this.table.getAllColsWidth();
+            const scrollLeft = this.scroll.horizontalBarPos;
+            const viewWidth = this.table.tableNoFrameWidth;
+            if (scrollLeft + viewWidth >= totalWidth) {
+                this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL_HORIZONTAL_END, {
+                    scrollTop: this.scroll.verticalBarPos,
+                    scrollLeft,
+                    scrollHeight: this.table.theme.scrollStyle?.width,
+                    scrollWidth: this.table.theme.scrollStyle?.width,
+                    viewHeight: this.table.tableNoFrameHeight,
+                    viewWidth
+                });
+            }
+        }
         updateVerticalScrollBar(yRatio) {
             const totalHeight = this.table.getAllRowsHeight();
+            const oldVerticalBarPos = this.scroll.verticalBarPos;
             this.scroll.verticalBarPos = Math.ceil(yRatio * (totalHeight - this.table.scenegraph.height));
             this.table.scenegraph.setY(-this.scroll.verticalBarPos, yRatio === 1);
             this.scroll.verticalBarPos -= this.table.scenegraph.proxy.deltaY;
             this.table.scenegraph.proxy.deltaY = 0;
-            this.table.stateManager.updateHoverPos(-1, -1);
+            this.updateHoverPos(-1, -1);
             this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
                 scrollTop: this.scroll.verticalBarPos,
                 scrollLeft: this.scroll.horizontalBarPos,
@@ -50153,14 +50509,18 @@
                 scrollDirection: 'vertical',
                 scrollRatioY: yRatio
             });
+            if (oldVerticalBarPos !== this.scroll.verticalBarPos) {
+                this.checkVerticalScrollBarEnd();
+            }
         }
         updateHorizontalScrollBar(xRatio) {
             const totalWidth = this.table.getAllColsWidth();
+            const oldHorizontalBarPos = this.scroll.horizontalBarPos;
             this.scroll.horizontalBarPos = Math.ceil(xRatio * (totalWidth - this.table.scenegraph.width));
             this.table.scenegraph.setX(-this.scroll.horizontalBarPos, xRatio === 1);
             this.scroll.horizontalBarPos -= this.table.scenegraph.proxy.deltaX;
             this.table.scenegraph.proxy.deltaX = 0;
-            this.table.stateManager.updateHoverPos(-1, -1);
+            this.updateHoverPos(-1, -1);
             this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
                 scrollTop: this.scroll.verticalBarPos,
                 scrollLeft: this.scroll.horizontalBarPos,
@@ -50171,14 +50531,18 @@
                 scrollDirection: 'horizontal',
                 scrollRatioX: xRatio
             });
+            if (oldHorizontalBarPos !== this.scroll.horizontalBarPos) {
+                this.checkHorizontalScrollBarEnd();
+            }
         }
         setScrollTop(top) {
             const totalHeight = this.table.getAllRowsHeight();
             top = Math.max(0, Math.min(top, totalHeight - this.table.scenegraph.height));
             top = Math.ceil(top);
             if (top !== this.scroll.verticalBarPos || this.table.isPivotChart()) {
-                this.table.stateManager.updateHoverPos(-1, -1);
+                this.updateHoverPos(-1, -1);
             }
+            const oldVerticalBarPos = this.scroll.verticalBarPos;
             this.scroll.verticalBarPos = top;
             this.table.scenegraph.setY(-top);
             const yRatio = top / (totalHeight - this.table.scenegraph.height);
@@ -50193,6 +50557,9 @@
                 scrollDirection: 'vertical',
                 scrollRatioY: yRatio
             });
+            if (oldVerticalBarPos !== top) {
+                this.checkVerticalScrollBarEnd();
+            }
         }
         setScrollLeft(left) {
             const totalWidth = this.table.getAllColsWidth();
@@ -50200,8 +50567,9 @@
             left = Math.max(0, Math.min(left, totalWidth - this.table.scenegraph.width));
             left = Math.ceil(left);
             if (left !== this.scroll.horizontalBarPos) {
-                this.table.stateManager.updateHoverPos(-1, -1);
+                this.updateHoverPos(-1, -1);
             }
+            const oldHorizontalBarPos = this.scroll.horizontalBarPos;
             this.scroll.horizontalBarPos = left;
             this.table.scenegraph.setX(-left);
             const xRatio = left / (totalWidth - this.table.scenegraph.width);
@@ -50216,6 +50584,9 @@
                 scrollDirection: 'horizontal',
                 scrollRatioX: xRatio
             });
+            if (oldHorizontalBarPos !== left) {
+                this.checkHorizontalScrollBarEnd();
+            }
         }
         hideVerticalScrollBar() {
             this.table.scenegraph.component.hideVerticalScrollBar();
@@ -50834,6 +51205,9 @@
                     else if (stateManager.isMoveCol()) {
                         eventManager.dealColumnMover(eventArgsSet);
                     }
+                    else if (stateManager.isFillHandle()) {
+                        eventManager.dealFillSelect(eventArgsSet, true);
+                    }
                     else {
                         eventManager.dealTableSelect(eventArgsSet, true);
                     }
@@ -50841,7 +51215,12 @@
                 return;
             }
             if (stateManager.isResizeCol() || eventManager.checkColumnResize(eventArgsSet)) {
-                stateManager.updateCursor('col-resize');
+                if (table.stateManager.select && eventManager.checkCellFillhandle(eventArgsSet)) {
+                    stateManager.updateCursor('crosshair');
+                }
+                else {
+                    stateManager.updateCursor('col-resize');
+                }
             }
             else {
                 stateManager.updateCursor();
@@ -51076,7 +51455,7 @@
                     eventManager.dealTableHover(eventArgsSet);
                 }
                 else {
-                    if (eventManager.checkColumnResize(eventArgsSet, true)) {
+                    if (!eventManager.checkCellFillhandle(eventArgsSet) && eventManager.checkColumnResize(eventArgsSet, true)) {
                         table.scenegraph.updateChartState(null);
                         stateManager.updateInteractionState(InteractionState.grabing);
                         return;
@@ -51085,6 +51464,10 @@
                         stateManager.updateInteractionState(InteractionState.grabing);
                         return;
                     }
+                    if (eventManager.checkCellFillhandle(eventArgsSet, true) && eventManager.dealFillSelect(eventArgsSet)) {
+                        stateManager.updateInteractionState(InteractionState.grabing);
+                        return;
+                    }
                     if (eventManager.dealTableSelect(eventArgsSet)) {
                         stateManager.updateInteractionState(InteractionState.grabing);
                     }
@@ -51130,8 +51513,13 @@
                 }
                 else if (stateManager.isSelecting()) {
                     table.stateManager.endSelectCells();
+                    if (table.stateManager.isFillHandle()) {
+                        table.stateManager.endFillSelect();
+                    }
                     const eventArgsSet = getCellEventArgsSet(e);
-                    if (eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
+                    if (table.eventManager.isDraging &&
+                        eventArgsSet.eventArgs &&
+                        table.hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
                         const cellsEvent = {
                             event: e.nativeEvent,
                             cells: [],
@@ -51727,84 +52115,13 @@
                     return;
                 }
                 if (table.stateManager.select.ranges?.length > 0) {
-                    const ranges = table.stateManager.select.ranges;
-                    const col = Math.min(ranges[0].start.col, ranges[0].end.col);
-                    const row = Math.min(ranges[0].start.row, ranges[0].end.row);
-                    const values = [];
                     navigator.clipboard.read().then(clipboardItems => {
                         for (const item of clipboardItems) {
                             if (item.types.includes('text/html')) {
-                                item.getType('text/html').then(blob => {
-                                    blob.text().then(pastedData => {
-                                        if (pastedData && /(<table)|(<TABLE)/g.test(pastedData)) {
-                                            const regex = /<tr[^>]*>(.*?)<\/tr>/gs;
-                                            const matches = Array.from(pastedData.matchAll(regex));
-                                            for (const match of matches) {
-                                                const rowContent = match[1];
-                                                const cellRegex = /<td[^>]*>(.*?)<\/td>/gs;
-                                                const cellMatches = Array.from(rowContent.matchAll(cellRegex));
-                                                const rowValues = cellMatches.map(cellMatch => {
-                                                    return (cellMatch[1]
-                                                        .replace(/(<(?!br)([^>]+)>)/gi, '')
-                                                        .replace(/<br(\s*|\/)>[\r\n]?/gim, '\n')
-                                                        .replace(/&amp;/g, '&')
-                                                        .replace(/&lt;/g, '<')
-                                                        .replace(/&gt;/g, '>')
-                                                        .replace(/&#9;/gi, '\t')
-                                                        .replace(/&nbsp;/g, ' '));
-                                                });
-                                                values.push(rowValues);
-                                            }
-                                            table.changeCellValues(col, row, values, true);
-                                        }
-                                        else {
-                                            navigator.clipboard.read().then(clipboardItems => {
-                                                for (const item of clipboardItems) {
-                                                    if (item.types.includes('text/plain')) {
-                                                        item.getType('text/plain').then(blob => {
-                                                            blob.text().then(pastedData => {
-                                                                const rows = pastedData.split('\n');
-                                                                rows.forEach(function (rowCells, rowIndex) {
-                                                                    const cells = rowCells.split('\t');
-                                                                    const rowValues = [];
-                                                                    values.push(rowValues);
-                                                                    cells.forEach(function (cell, cellIndex) {
-                                                                        if (cellIndex === cells.length - 1) {
-                                                                            cell = cell.trim();
-                                                                        }
-                                                                        rowValues.push(cell);
-                                                                    });
-                                                                });
-                                                                table.changeCellValues(col, row, values, true);
-                                                            });
-                                                        });
-                                                    }
-                                                }
-                                            });
-                                        }
-                                    });
-                                });
+                                pasteHtmlToTable(item);
                             }
                             else if (item.types.length === 1 && item.types[0] === 'text/plain') {
-                                item.getType('text/plain').then(blob => {
-                                    blob.text().then(pastedData => {
-                                        const rows = pastedData.replace(/\r(?!\n)/g, '\r\n').split('\r\n');
-                                        if (rows.length > 1 && rows[rows.length - 1] === '') {
-                                            rows.pop();
-                                        }
-                                        rows.forEach(function (rowCells, rowIndex) {
-                                            const cells = rowCells.split('\t');
-                                            cells.forEach(function (cell, cellIndex) {
-                                                if (cell.includes('\n')) {
-                                                    cell = cell
-                                                        .replace(/^"(.*)"$/, '$1')
-                                                        .replace(/["]*/g, match => new Array(Math.floor(match.length / 2)).fill('"').join(''));
-                                                }
-                                            });
-                                        });
-                                    });
-                                });
-                                table.changeCellValues(col, row, values, true);
+                                pasteTextToTable(item);
                             }
                             else ;
                         }
@@ -51823,6 +52140,138 @@
             }
             table.resize();
         });
+        function pasteHtmlToTable(item) {
+            const ranges = table.stateManager.select.ranges;
+            const selectRangeLength = ranges.length;
+            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            let pasteValuesColCount = 0;
+            let pasteValuesRowCount = 0;
+            let values = [];
+            item.getType('text/html').then((blob) => {
+                blob.text().then((pastedData) => {
+                    if (pastedData && /(<table)|(<TABLE)/g.test(pastedData)) {
+                        const regex = /<tr[^>]*>(.*?)<\/tr>/gs;
+                        const matches = Array.from(pastedData.matchAll(regex));
+                        for (const match of matches) {
+                            const rowContent = match[1];
+                            const cellRegex = /<td[^>]*>(.*?)<\/td>/gs;
+                            const cellMatches = Array.from(rowContent.matchAll(cellRegex));
+                            const rowValues = cellMatches.map(cellMatch => {
+                                return (cellMatch[1]
+                                    .replace(/(<(?!br)([^>]+)>)/gi, '')
+                                    .replace(/<br(\s*|\/)>[\r\n]?/gim, '\n')
+                                    .replace(/&amp;/g, '&')
+                                    .replace(/&lt;/g, '<')
+                                    .replace(/&gt;/g, '>')
+                                    .replace(/&#9;/gi, '\t')
+                                    .replace(/&nbsp;/g, ' '));
+                            });
+                            values.push(rowValues);
+                            pasteValuesColCount = Math.max(pasteValuesColCount, rowValues?.length ?? 0);
+                        }
+                        pasteValuesRowCount = values.length ?? 0;
+                        values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+                        table.changeCellValues(col, row, values, true);
+                    }
+                    else {
+                        navigator.clipboard.read().then(clipboardItems => {
+                            for (const item of clipboardItems) {
+                                if (item.types.includes('text/plain')) {
+                                    item.getType('text/plain').then((blob) => {
+                                        blob.text().then(_pasteValue);
+                                    });
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+        }
+        function _pasteValue(pastedData) {
+            const ranges = table.stateManager.select.ranges;
+            const selectRangeLength = ranges.length;
+            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            let pasteValuesColCount = 0;
+            let pasteValuesRowCount = 0;
+            let values = [];
+            const rows = pastedData.split('\n');
+            rows.forEach(function (rowCells, rowIndex) {
+                const cells = rowCells.split('\t');
+                const rowValues = [];
+                values.push(rowValues);
+                cells.forEach(function (cell, cellIndex) {
+                    if (cellIndex === cells.length - 1) {
+                        cell = cell.trim();
+                    }
+                    rowValues.push(cell);
+                });
+                pasteValuesColCount = Math.max(pasteValuesColCount, rowValues?.length ?? 0);
+            });
+            pasteValuesRowCount = values.length ?? 0;
+            values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+            table.changeCellValues(col, row, values, true);
+        }
+        function pasteTextToTable(item) {
+            const ranges = table.stateManager.select.ranges;
+            const selectRangeLength = ranges.length;
+            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            let pasteValuesColCount = 0;
+            let pasteValuesRowCount = 0;
+            item.getType('text/plain').then((blob) => {
+                blob.text().then((pastedData) => {
+                    const rows = pastedData.replace(/\r(?!\n)/g, '\r\n').split('\r\n');
+                    let values = [];
+                    if (rows.length > 1 && rows[rows.length - 1] === '') {
+                        rows.pop();
+                    }
+                    rows.forEach(function (rowCells, rowIndex) {
+                        const cells = rowCells.split('\t');
+                        const rowValues = [];
+                        values.push(rowValues);
+                        cells.forEach(function (cell, cellIndex) {
+                            if (cell.includes('\n')) {
+                                cell = cell
+                                    .replace(/^"(.*)"$/, '$1')
+                                    .replace(/["]*/g, match => new Array(Math.floor(match.length / 2)).fill('"').join(''));
+                            }
+                            rowValues.push(cell);
+                        });
+                        pasteValuesColCount = Math.max(pasteValuesColCount, rowValues?.length ?? 0);
+                    });
+                    pasteValuesRowCount = values.length ?? 0;
+                    values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+                    table.changeCellValues(col, row, values, true);
+                });
+            });
+        }
+        function handlePasteValues(values, rowCount, colCount, selectedRowCount, selectedColCount) {
+            if (selectedColCount > colCount || selectedRowCount > rowCount) {
+                if (selectedColCount % colCount === 0 && selectedRowCount % rowCount === 0) {
+                    const toPasteValues = [];
+                    for (let i = 0; i < selectedRowCount; i++) {
+                        const rowPasteValue = [];
+                        toPasteValues.push(rowPasteValue);
+                        for (let j = 0; j < selectedColCount; j++) {
+                            const copiedRow = i % rowCount;
+                            const copiedCol = j % colCount;
+                            rowPasteValue.push(values[copiedRow][copiedCol]);
+                        }
+                    }
+                    return toPasteValues;
+                }
+                return values;
+            }
+            return values;
+        }
         const globalPointerdownCallback = (e) => {
             table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
             table.eventManager.isDown = true;
@@ -52212,7 +52661,10 @@
                 if (e.federatedEvent) {
                     const eventArgsSet = getCellEventArgsSet(e.federatedEvent);
                     const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
-                    if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
+                    if (this.table.eventManager.checkCellFillhandle(eventArgsSet)) {
+                        this.table.fireListeners(TABLE_EVENT_TYPE.DBLCLICK_FILL_HANDLE, {});
+                    }
+                    else if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
                         this.table.scenegraph.updateAutoColWidth(resizeCol.col);
                         this.table.internalProps._widthResizedColMap.add(resizeCol.col);
                         this.table.scenegraph.updateChartSize(resizeCol.col);
@@ -52298,6 +52750,58 @@
             }
             return false;
         }
+        dealFillSelect(eventArgsSet, isSelectMoving) {
+            const { eventArgs } = eventArgsSet;
+            if (eventArgs) {
+                if (this.table.stateManager.select?.ranges?.length && this.table.stateManager.isFillHandle()) {
+                    let updateRow;
+                    let updateCol;
+                    const currentRange = this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1];
+                    if (isSelectMoving) {
+                        if (!isValid$3(this.table.stateManager.fillHandle.directionRow)) {
+                            if (Math.abs(this.table.stateManager.fillHandle.startY - eventArgsSet.abstractPos.y) >=
+                                Math.abs(this.table.stateManager.fillHandle.startX - eventArgsSet.abstractPos.x)) {
+                                this.table.stateManager.fillHandle.directionRow = true;
+                            }
+                            else {
+                                this.table.stateManager.fillHandle.directionRow = false;
+                            }
+                        }
+                        if (Math.abs(this.table.stateManager.fillHandle.startY - eventArgsSet.abstractPos.y) >=
+                            Math.abs(this.table.stateManager.fillHandle.startX - eventArgsSet.abstractPos.x)) {
+                            if (this.table.stateManager.fillHandle.startY - eventArgsSet.abstractPos.y > 0) {
+                                this.table.stateManager.fillHandle.direction = 'top';
+                            }
+                            else {
+                                this.table.stateManager.fillHandle.direction = 'bottom';
+                            }
+                        }
+                        else {
+                            if (this.table.stateManager.fillHandle.startX - eventArgsSet.abstractPos.x > 0) {
+                                this.table.stateManager.fillHandle.direction = 'left';
+                            }
+                            else {
+                                this.table.stateManager.fillHandle.direction = 'right';
+                            }
+                        }
+                        if (this.table.stateManager.fillHandle.directionRow) {
+                            updateRow = eventArgs.row;
+                            updateCol = currentRange.end.col;
+                        }
+                        else {
+                            updateRow = currentRange.end.row;
+                            updateCol = eventArgs.col;
+                        }
+                    }
+                    this.table.stateManager.updateSelectPos(isSelectMoving ? updateCol : currentRange.end.col, isSelectMoving ? updateRow : currentRange.end.row, true, eventArgs.event.ctrlKey || eventArgs.event.metaKey);
+                }
+                else {
+                    this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey);
+                }
+                return true;
+            }
+            return false;
+        }
         deelTableSelectAll() {
             this.table.stateManager.updateSelectPos(-1, -1, false, false, true);
         }
@@ -52316,6 +52820,29 @@
             }
             return false;
         }
+        checkCellFillhandle(eventArgsSet, update) {
+            if (this.table.options.excelOptions?.fillHandle) {
+                const { eventArgs } = eventArgsSet;
+                if (eventArgs) {
+                    if (this.table.stateManager.select?.ranges?.length) {
+                        const lastCol = Math.max(this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].start.col, this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.col);
+                        const lastRow = Math.max(this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].start.row, this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.row);
+                        const lastCellBound = this.table.scenegraph.highPerformanceGetCell(lastCol, lastRow).globalAABBBounds;
+                        const distanceX = Math.abs(eventArgsSet.abstractPos.x - lastCellBound.x2);
+                        const distanceY = Math.abs(eventArgsSet.abstractPos.y - lastCellBound.y2);
+                        const squareSize = 6 * 3;
+                        if (this.table.stateManager.fillHandle?.isFilling ||
+                            (distanceX <= squareSize / 2 && distanceY <= squareSize / 2)) {
+                            if (update) {
+                                this.table.stateManager.startFillSelect(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+                            }
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
+        }
         dealColumnResize(xInTable, yInTable) {
             this.table.stateManager.updateResizeCol(xInTable, yInTable);
         }
@@ -55606,7 +56133,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.22.4-alpha.0";
+        version = "0.23.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -57843,6 +58370,13 @@
             }
             return cellInfoArray;
         }
+        getSelectedCellRanges() {
+            const ranges = this.stateManager.select.ranges;
+            if (!ranges.length) {
+                return [];
+            }
+            return cloneDeep(ranges);
+        }
         measureText(text, font) {
             return textMeasure.measureText(text, font);
         }
@@ -59245,11 +59779,32 @@
         get hasAggregationOnBottomCount() {
             return this._hasAggregationOnBottomCount;
         }
-        getAggregators(col, row) {
+        getAggregatorsByCell(col, row) {
             const column = this.getBody(col, row);
             const aggregators = column.aggregator;
             return aggregators;
         }
+        getAggregatorsByCellRange(startCol, startRow, endCol, endRow) {
+            let aggregators = [];
+            if (this.transpose) {
+                for (let i = startRow; i <= endRow; i++) {
+                    const column = this.getBody(startCol, i);
+                    if (column.aggregator) {
+                        aggregators = aggregators.concat(Array.isArray(column.aggregator) ? column.aggregator : [column.aggregator]);
+                    }
+                }
+            }
+            else {
+                for (let i = startCol; i <= endCol; i++) {
+                    const column = this.getBody(i, startRow);
+                    if (column.aggregator) {
+                        aggregators = aggregators.concat(Array.isArray(column.aggregator) ? column.aggregator : [column.aggregator]);
+                    }
+                }
+                return aggregators;
+            }
+            return [];
+        }
         getAggregatorOnTop(col, row) {
             const column = this.getBody(col, row);
             const aggregators = column.aggregator;
@@ -59300,26 +59855,34 @@
             }
             return null;
         }
-        getCellAddressHasAggregator(col, row) {
+        getAggregatorCellAddress(startCol, startRow, endCol, endRow) {
             const cellAddrs = [];
+            const topCount = this.hasAggregationOnTopCount;
+            const bottomCount = this.hasAggregationOnBottomCount;
             if (this.transpose) {
-                const topCount = this.hasAggregationOnTopCount;
-                for (let i = 0; i < topCount; i++) {
-                    cellAddrs.push({ col: this.headerLevelCount + i, row });
-                }
-                const bottomCount = this.hasAggregationOnBottomCount;
-                for (let i = 0; i < bottomCount; i++) {
-                    cellAddrs.push({ col: this.rowCount - bottomCount + i, row });
+                for (let row = startRow; row <= endRow; row++) {
+                    const column = this.getBody(startCol, row);
+                    if (column.aggregator) {
+                        for (let i = 0; i < topCount; i++) {
+                            cellAddrs.push({ col: this.headerLevelCount + i, row });
+                        }
+                        for (let i = 0; i < bottomCount; i++) {
+                            cellAddrs.push({ col: this.rowCount - bottomCount + i, row });
+                        }
+                    }
                 }
             }
             else {
-                const topCount = this.hasAggregationOnTopCount;
-                for (let i = 0; i < topCount; i++) {
-                    cellAddrs.push({ col, row: this.headerLevelCount + i });
-                }
-                const bottomCount = this.hasAggregationOnBottomCount;
-                for (let i = 0; i < bottomCount; i++) {
-                    cellAddrs.push({ col, row: this.rowCount - bottomCount + i });
+                for (let col = startCol; col <= endCol; col++) {
+                    const column = this.getBody(col, startRow);
+                    if (column.aggregator) {
+                        for (let i = 0; i < topCount; i++) {
+                            cellAddrs.push({ col, row: this.headerLevelCount + i });
+                        }
+                        for (let i = 0; i < bottomCount; i++) {
+                            cellAddrs.push({ col, row: this.rowCount - bottomCount + i });
+                        }
+                    }
                 }
             }
             return cellAddrs;
@@ -60124,12 +60687,8 @@
             const addCellPositions = diffDataIndices.add.map(index => {
                 return { col: 0, row: this._table.frozenRowCount + index };
             });
-            const removeCellPositions = [];
-            diffDataIndices.remove.forEach(index => {
-                if (this._table.frozenRowCount + index >= this._table.scenegraph.proxy.rowStart &&
-                    this._table.frozenRowCount + index <= this._table.scenegraph.proxy.rowEnd) {
-                    removeCellPositions.push({ col: 0, row: this._table.frozenRowCount + index });
-                }
+            const removeCellPositions = diffDataIndices.remove.map(index => {
+                return { col: 0, row: this._table.frozenRowCount + index };
             });
             return {
                 addCellPositions,
@@ -60546,10 +61105,10 @@
             return this.internalProps.sortState;
         }
         get records() {
-            return this.dataSource?.source;
+            return this.dataSource?.records;
         }
         get recordsCount() {
-            return this.dataSource.source.length;
+            return this.dataSource.records.length;
         }
         updateColumns(columns) {
             const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
@@ -61114,7 +61673,6 @@
         }
         updateFilterRules(filterRules) {
             this.scenegraph.clearCells();
-            this.internalProps.dataConfig.filterRules = filterRules;
             if (this.sortState) {
                 this.dataSource.updateFilterRulesForSorted(filterRules);
                 sortRecords(this);
@@ -61263,69 +61821,72 @@
             }
             return isValid$3(editorDefine);
         }
-        changeCellValue(col, row, value) {
-            const recordIndex = this.getRecordShowIndexByCell(col, row);
-            const { field } = this.internalProps.layoutMap.getBody(col, row);
-            const beforeChangeValue = this.getCellRawValue(col, row);
-            if (this.isHeader(col, row)) {
-                this.internalProps.layoutMap.updateColumnTitle(col, row, value);
-            }
-            else {
-                this.dataSource.changeFieldValue(value, recordIndex, field, col, row, this);
-            }
-            const aggregators = this.internalProps.layoutMap.getAggregators(col, row);
-            if (aggregators) {
-                if (Array.isArray(aggregators)) {
-                    for (let i = 0; i < aggregators?.length; i++) {
-                        aggregators[i].recalculate();
-                    }
+        changeCellValue(col, row, value, workOnEditableCell = false) {
+            if ((workOnEditableCell && this.isHasEditorDefine(col, row)) || workOnEditableCell === false) {
+                const recordIndex = this.getRecordShowIndexByCell(col, row);
+                const { field } = this.internalProps.layoutMap.getBody(col, row);
+                const beforeChangeValue = this.getCellRawValue(col, row);
+                if (this.isHeader(col, row)) {
+                    this.internalProps.layoutMap.updateColumnTitle(col, row, value);
                 }
                 else {
-                    aggregators.recalculate();
-                }
-                const aggregatorCells = this.internalProps.layoutMap.getCellAddressHasAggregator(col, row);
-                for (let i = 0; i < aggregatorCells.length; i++) {
-                    const range = this.getCellRange(aggregatorCells[i].col, aggregatorCells[i].row);
-                    for (let sCol = range.start.col; sCol <= range.end.col; sCol++) {
-                        for (let sRow = range.start.row; sRow <= range.end.row; sRow++) {
-                            this.scenegraph.updateCellContent(sCol, sRow);
+                    this.dataSource.changeFieldValue(value, recordIndex, field, col, row, this);
+                }
+                const range = this.getCellRange(col, row);
+                const aggregators = this.internalProps.layoutMap.getAggregatorsByCell(col, row);
+                if (aggregators) {
+                    if (Array.isArray(aggregators)) {
+                        for (let i = 0; i < aggregators?.length; i++) {
+                            aggregators[i].recalculate();
+                        }
+                    }
+                    else {
+                        aggregators.recalculate();
+                    }
+                    const aggregatorCells = this.internalProps.layoutMap.getAggregatorCellAddress(range.start.col, range.start.row, range.end.col, range.end.row);
+                    for (let i = 0; i < aggregatorCells.length; i++) {
+                        const range = this.getCellRange(aggregatorCells[i].col, aggregatorCells[i].row);
+                        for (let sCol = range.start.col; sCol <= range.end.col; sCol++) {
+                            for (let sRow = range.start.row; sRow <= range.end.row; sRow++) {
+                                this.scenegraph.updateCellContent(sCol, sRow);
+                            }
                         }
                     }
                 }
-            }
-            const range = this.getCellRange(col, row);
-            for (let sCol = range.start.col; sCol <= range.end.col; sCol++) {
-                for (let sRow = range.start.row; sRow <= range.end.row; sRow++) {
-                    this.scenegraph.updateCellContent(sCol, sRow);
+                for (let sCol = range.start.col; sCol <= range.end.col; sCol++) {
+                    for (let sRow = range.start.row; sRow <= range.end.row; sRow++) {
+                        this.scenegraph.updateCellContent(sCol, sRow);
+                    }
                 }
-            }
-            if (this.widthMode === 'adaptive' || (this.autoFillWidth && this.getAllColsWidth() <= this.tableNoFrameWidth)) {
-                if (this.internalProps._widthResizedColMap.size === 0) {
-                    this.scenegraph.recalculateColWidths();
+                if (this.widthMode === 'adaptive' || (this.autoFillWidth && this.getAllColsWidth() <= this.tableNoFrameWidth)) {
+                    if (this.internalProps._widthResizedColMap.size === 0) {
+                        this.scenegraph.recalculateColWidths();
+                    }
                 }
-            }
-            else if (!this.internalProps._widthResizedColMap.has(col)) {
-                const oldWidth = this.getColWidth(col);
-                const newWidth = computeColWidth(col, 0, this.rowCount - 1, this, false);
-                if (newWidth !== oldWidth) {
-                    this.scenegraph.updateColWidth(col, newWidth - oldWidth);
+                else if (!this.internalProps._widthResizedColMap.has(col)) {
+                    const oldWidth = this.getColWidth(col);
+                    const newWidth = computeColWidth(col, 0, this.rowCount - 1, this, false);
+                    if (newWidth !== oldWidth) {
+                        this.scenegraph.updateColWidth(col, newWidth - oldWidth);
+                    }
                 }
+                if (this.heightMode === 'adaptive' ||
+                    (this.autoFillHeight && this.getAllRowsHeight() <= this.tableNoFrameHeight)) {
+                    this.scenegraph.recalculateRowHeights();
+                }
+                else if (this.heightMode === 'autoHeight') {
+                    const oldHeight = this.getRowHeight(row);
+                    const newHeight = computeRowHeight(row, 0, this.colCount - 1, this);
+                    this.scenegraph.updateRowHeight(row, newHeight - oldHeight);
+                }
+                this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
+                    col,
+                    row,
+                    rawValue: beforeChangeValue,
+                    changedValue: this.getCellOriginValue(col, row)
+                });
+                this.scenegraph.updateNextFrame();
             }
-            if (this.heightMode === 'adaptive' || (this.autoFillHeight && this.getAllRowsHeight() <= this.tableNoFrameHeight)) {
-                this.scenegraph.recalculateRowHeights();
-            }
-            else if (this.heightMode === 'autoHeight') {
-                const oldHeight = this.getRowHeight(row);
-                const newHeight = computeRowHeight(row, 0, this.colCount - 1, this);
-                this.scenegraph.updateRowHeight(row, newHeight - oldHeight);
-            }
-            this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
-                col,
-                row,
-                rawValue: beforeChangeValue,
-                changedValue: this.getCellOriginValue(col, row)
-            });
-            this.scenegraph.updateNextFrame();
         }
         changeCellValues(startCol, startRow, values, workOnEditableCell = false) {
             let pasteColEnd = startCol;
@@ -61366,6 +61927,21 @@
             }
             const startRange = this.getCellRange(startCol, startRow);
             const range = this.getCellRange(pasteColEnd, pasteRowEnd);
+            const aggregators = this.internalProps.layoutMap.getAggregatorsByCellRange(startRange.start.col, startRange.start.row, range.end.col, range.end.row);
+            if (aggregators) {
+                for (let i = 0; i < aggregators?.length; i++) {
+                    aggregators[i].recalculate();
+                }
+                const aggregatorCells = this.internalProps.layoutMap.getAggregatorCellAddress(startRange.start.col, startRange.start.row, range.end.col, range.end.row);
+                for (let i = 0; i < aggregatorCells.length; i++) {
+                    const range = this.getCellRange(aggregatorCells[i].col, aggregatorCells[i].row);
+                    for (let sCol = range.start.col; sCol <= range.end.col; sCol++) {
+                        for (let sRow = range.start.row; sRow <= range.end.row; sRow++) {
+                            this.scenegraph.updateCellContent(sCol, sRow);
+                        }
+                    }
+                }
+            }
             for (let sCol = startRange.start.col; sCol <= range.end.col; sCol++) {
                 for (let sRow = startRange.start.row; sRow <= range.end.row; sRow++) {
                     this.scenegraph.updateCellContent(sCol, sRow);
@@ -66149,41 +66725,44 @@
             }
             return isValid$3(editorDefine);
         }
-        changeCellValue(col, row, value) {
-            let newValue = value;
-            const rawValue = this.getCellRawValue(col, row);
-            if (typeof rawValue === 'number' && isAllDigits(value)) {
-                newValue = parseFloat(value);
-            }
-            this._changeCellValueToDataSet(col, row, newValue);
-            this.scenegraph.updateCellContent(col, row);
-            if (this.widthMode === 'adaptive' || (this.autoFillWidth && this.getAllColsWidth() <= this.tableNoFrameWidth)) {
-                if (this.internalProps._widthResizedColMap.size === 0) {
-                    this.scenegraph.recalculateColWidths();
+        changeCellValue(col, row, value, workOnEditableCell = false) {
+            if ((workOnEditableCell && this.isHasEditorDefine(col, row)) || workOnEditableCell === false) {
+                let newValue = value;
+                const rawValue = this.getCellRawValue(col, row);
+                if (typeof rawValue === 'number' && isAllDigits(value)) {
+                    newValue = parseFloat(value);
                 }
-            }
-            else if (!this.internalProps._widthResizedColMap.has(col)) {
-                const oldWidth = this.getColWidth(col);
-                const newWidth = computeColWidth(col, 0, this.rowCount - 1, this, false);
-                if (newWidth !== oldWidth) {
-                    this.scenegraph.updateColWidth(col, newWidth - oldWidth);
+                this._changeCellValueToDataSet(col, row, newValue);
+                this.scenegraph.updateCellContent(col, row);
+                if (this.widthMode === 'adaptive' || (this.autoFillWidth && this.getAllColsWidth() <= this.tableNoFrameWidth)) {
+                    if (this.internalProps._widthResizedColMap.size === 0) {
+                        this.scenegraph.recalculateColWidths();
+                    }
                 }
+                else if (!this.internalProps._widthResizedColMap.has(col)) {
+                    const oldWidth = this.getColWidth(col);
+                    const newWidth = computeColWidth(col, 0, this.rowCount - 1, this, false);
+                    if (newWidth !== oldWidth) {
+                        this.scenegraph.updateColWidth(col, newWidth - oldWidth);
+                    }
+                }
+                if (this.heightMode === 'adaptive' ||
+                    (this.autoFillHeight && this.getAllRowsHeight() <= this.tableNoFrameHeight)) {
+                    this.scenegraph.recalculateRowHeights();
+                }
+                else if (this.heightMode === 'autoHeight') {
+                    const oldHeight = this.getRowHeight(row);
+                    const newHeight = computeRowHeight(row, 0, this.colCount - 1, this);
+                    this.scenegraph.updateRowHeight(row, newHeight - oldHeight);
+                }
+                this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
+                    col,
+                    row,
+                    rawValue: this.getCellRawValue(col, row),
+                    changedValue: newValue
+                });
+                this.scenegraph.updateNextFrame();
             }
-            if (this.heightMode === 'adaptive' || (this.autoFillHeight && this.getAllRowsHeight() <= this.tableNoFrameHeight)) {
-                this.scenegraph.recalculateRowHeights();
-            }
-            else if (this.heightMode === 'autoHeight') {
-                const oldHeight = this.getRowHeight(row);
-                const newHeight = computeRowHeight(row, 0, this.colCount - 1, this);
-                this.scenegraph.updateRowHeight(row, newHeight - oldHeight);
-            }
-            this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
-                col,
-                row,
-                rawValue: this.getCellRawValue(col, row),
-                changedValue: newValue
-            });
-            this.scenegraph.updateNextFrame();
         }
         changeCellValues(startCol, startRow, values, workOnEditableCell = false) {
             let pasteColEnd = startCol;
@@ -67720,7 +68299,7 @@
     }
 
     registerForVrender();
-    const version = "0.22.4-alpha.0";
+    const version = "0.23.0";
     function getIcons() {
         return get$2();
     }