@visactor/vtable 1.7.5-alpha.1 → 1.7.6

package/dist/vtable.js

@@ -25564,6 +25564,7 @@
         registerText();
         registerFlexLayoutPlugin();
         loadPoptip();
+        registerFlexLayoutPlugin();
     }
 
     var InteractionState;
@@ -26647,6 +26648,12 @@
         }
         return false;
     }
+    function traverseObject(obj, childrenProperty, callback) {
+        callback(obj);
+        if (obj?.[childrenProperty] && Array.isArray(obj?.[childrenProperty])) {
+            obj[childrenProperty].forEach((child) => traverseObject(child, childrenProperty, callback));
+        }
+    }
 
     const isNode = typeof window === 'undefined' || typeof window.window === 'undefined';
     let arrayFind;
@@ -27174,7 +27181,7 @@
             if (Env.mode === 'node') {
                 return;
             }
-            if (id == null) {
+            if (id === null) {
                 return;
             }
             const obj = this.listeners?.[id];
@@ -28017,6 +28024,9 @@
         getExtendTheme() {
             return this.internalTheme.obj;
         }
+        clearBodyStyleCache() {
+            this._body = null;
+        }
         get font() {
             const { obj, superTheme } = this.internalTheme;
             return getProp$1(obj, superTheme, ['font'], ['bodyStyle', 'font']);
@@ -28175,14 +28185,6 @@
             }
             return this._defaultStyle;
         }
-        get headerStyle() {
-            if (!this._header) {
-                const { obj, superTheme } = this.internalTheme;
-                const header = ingoreNoneValueMerge({}, this.defaultStyle, superTheme.headerStyle, obj.headerStyle);
-                this._header = this.getStyle(header);
-            }
-            return this._header;
-        }
         get cornerHeaderStyle() {
             if (!this._cornerHeader) {
                 const { obj, superTheme } = this.internalTheme;
@@ -28254,6 +28256,14 @@
             }
             return this._rowHeader;
         }
+        get headerStyle() {
+            if (!this._header) {
+                const { obj, superTheme } = this.internalTheme;
+                const header = ingoreNoneValueMerge({}, this.defaultStyle, superTheme.headerStyle, obj.headerStyle);
+                this._header = this.getStyle(header);
+            }
+            return this._header;
+        }
         get bodyStyle() {
             if (!this._body) {
                 const { obj, superTheme } = this.internalTheme;
@@ -29506,9 +29516,7 @@
         _sourceLength;
         _source;
         sortedIndexMap;
-        lastOrder;
-        lastOrderFn;
-        lastOrderField;
+        lastSortStates;
         currentIndexedData = [];
         userPagination;
         pagination;
@@ -29827,14 +29835,15 @@
             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 &&
-                    sort(index => isValid$1(subNodeSortedIndexArray[index])
-                        ? subNodeSortedIndexArray[index]
-                        : (subNodeSortedIndexArray[index] = index), (index, rel) => {
-                        subNodeSortedIndexArray[index] = rel;
-                    }, children.length, this.lastOrderFn, this.lastOrder, index => this.getOriginalField(Array.isArray(indexKey) ? indexKey.concat([index]) : [indexKey, index], this.lastOrderField));
+                this.lastSortStates?.forEach(state => {
+                    if (state.order !== 'normal') {
+                        sort(index => isValid$1(subNodeSortedIndexArray[index])
+                            ? subNodeSortedIndexArray[index]
+                            : (subNodeSortedIndexArray[index] = index), (index, rel) => {
+                            subNodeSortedIndexArray[index] = rel;
+                        }, children.length, state.orderFn, state.order, index => this.getOriginalField(Array.isArray(indexKey) ? indexKey.concat([index]) : [indexKey, index], state.field));
+                    }
+                });
                 for (let i = 0; i < subNodeSortedIndexArray.length; i++) {
                     childrenLength += 1;
                     const childIndex = Array.isArray(indexKey)
@@ -30082,16 +30091,19 @@
             }
             this.sortedIndexMap.clear();
         }
-        sort(field, order, orderFn = order !== 'desc'
-            ? (v1, v2) => (v1 === v2 ? 0 : v1 > v2 ? 1 : -1)
-            : (v1, v2) => (v1 === v2 ? 0 : v1 < v2 ? 1 : -1)) {
-            this.lastOrderField = field;
-            this.lastOrder = order;
-            this.lastOrderFn = orderFn;
-            let filedMap = this.sortedIndexMap.get(field);
-            let orderedData;
-            if (filedMap) {
-                orderedData = filedMap[order];
+        sort(states) {
+            states = (Array.isArray(states) ? states : [states]).filter(state => {
+                let column = this.layoutColumnObjects.find(obj => obj.field == state.field);
+                return column?.define?.sort !== false && state.order !== 'normal';
+            });
+            this.lastSortStates = states;
+            let filedMapArray = states.map(state => this.sortedIndexMap.get(state?.field) || { asc: [], desc: [], normal: [] });
+            let orderedData = null;
+            if (filedMapArray.length > 0) {
+                orderedData = states.reduce((data, state, index) => {
+                    const currentData = filedMapArray[index]?.[state.order];
+                    return currentData && currentData.length > 0 ? currentData : data;
+                }, null);
                 if (orderedData && orderedData.length > 0) {
                     this.currentIndexedData = orderedData;
                     this.updatePagerData();
@@ -30099,21 +30111,22 @@
                     return;
                 }
             }
-            const sortedIndexArray = [];
-            if (order === 'normal') {
-                for (let i = 0; i < this._sourceLength; i++) {
-                    sortedIndexArray[i] = i;
-                }
-            }
-            else {
-                sort(index => (isValid$1(sortedIndexArray[index]) ? sortedIndexArray[index] : (sortedIndexArray[index] = index)), (index, rel) => {
-                    sortedIndexArray[index] = rel;
-                }, this._sourceLength, orderFn, order, index => this.getOriginalField(index, field));
-            }
+            const sortedIndexArray = Array.from({ length: this._sourceLength }, (_, i) => i);
+            sortedIndexArray.sort((indexA, indexB) => {
+                return states.reduce((result, state) => {
+                    if (result !== 0) {
+                        return result;
+                    }
+                    const orderFn = state.orderFn ||
+                        (state.order !== 'desc'
+                            ? (v1, v2) => (v1 === v2 ? 0 : v1 > v2 ? 1 : -1)
+                            : (v1, v2) => (v1 === v2 ? 0 : v1 < v2 ? 1 : -1));
+                    return orderFn(this.getOriginalField(indexA, state.field), this.getOriginalField(indexB, state.field), state.order);
+                }, 0);
+            });
             this.currentIndexedData = sortedIndexArray;
             if (this.hierarchyExpandLevel) {
                 let nodeLength = sortedIndexArray.length;
-                window.performance.now();
                 for (let i = 0; i < nodeLength; i++) {
                     const record = this.getOriginalRecord(sortedIndexArray[i]);
                     const subNodeLength = this.pushChildrenNode(sortedIndexArray[i], record.hierarchyState, this.getOriginalRecord(sortedIndexArray[i]));
@@ -30121,11 +30134,16 @@
                     i += subNodeLength;
                 }
             }
-            if (!filedMap) {
-                filedMap = { asc: [], desc: [], normal: [] };
-                this.sortedIndexMap.set(field, filedMap);
+            if (!filedMapArray.length) {
+                filedMapArray = states.map(() => ({ asc: [], desc: [], normal: [] }));
+                for (let index = 0; index < states.length; index++) {
+                    this.sortedIndexMap.set(states[index].field, filedMapArray[index]);
+                }
             }
-            filedMap[order] = sortedIndexArray;
+            states.forEach((state, index) => {
+                const mapItem = filedMapArray[index];
+                mapItem[state.order] = sortedIndexArray.slice();
+            });
             this.updatePagerData();
             this.fireListeners(EVENT_TYPE$1.CHANGE_ORDER, null);
         }
@@ -30187,22 +30205,27 @@
             }
         }
         clearSortedIndexMap() {
-            if (this.lastOrderField && this.lastOrder) {
+            if (this.lastSortStates && this.lastSortStates.length > 0) {
                 this.sortedIndexMap.forEach((sortMap, key) => {
-                    if (key !== this.lastOrderField) {
+                    const isFieldInRules = this.lastSortStates.some(state => state.field === key);
+                    if (!isFieldInRules) {
                         this.sortedIndexMap.delete(key);
                     }
-                    else if (this.lastOrder === 'asc') {
-                        sortMap.desc = [];
-                        sortMap.normal = [];
-                    }
-                    else if (this.lastOrder === 'desc') {
-                        sortMap.asc = [];
-                        sortMap.normal = [];
-                    }
                     else {
-                        sortMap.desc = [];
-                        sortMap.asc = [];
+                        this.lastSortStates.forEach(state => {
+                            if (state.order === 'asc') {
+                                sortMap.desc = [];
+                                sortMap.normal = [];
+                            }
+                            else if (state.order === 'desc') {
+                                sortMap.asc = [];
+                                sortMap.normal = [];
+                            }
+                            else {
+                                sortMap.asc = [];
+                                sortMap.desc = [];
+                            }
+                        });
                     }
                 });
             }
@@ -30363,7 +30386,7 @@
             return true;
         }
         reorderRecord(sourceIndex, targetIndex) {
-            if (this.lastOrder === 'asc' || this.lastOrder === 'desc') {
+            if (this.lastSortStates?.some(state => state.order === 'asc' || state.order === 'desc')) {
                 return;
             }
             else if (this.isCanExchangeOrder(sourceIndex, targetIndex)) {
@@ -30558,7 +30581,7 @@
             _setFieldCache(this._fieldCache, index, field, value);
         }
         recordPromiseCallBack(index, record) {
-            this._recordCache[index] = record;
+            this._recordCache && (this._recordCache[index] = record);
         }
         get records() {
             return Array.isArray(this._recordCache) && this._recordCache.length > 0 ? this._recordCache : super.records;
@@ -30615,11 +30638,14 @@
             this.initTreeHierarchyState();
             this.updatePagerData();
         }
-        addRecordsForGroup(recordArr) {
+        addRecordsForGroup(recordArr, recordIndex) {
             if (!isArray$1(recordArr) || recordArr.length === 0) {
                 return;
             }
-            this.dataSourceObj.records.push(...recordArr);
+            if (recordIndex === undefined || recordIndex > this.dataSourceObj.records) {
+                recordIndex = this.dataSourceObj.records;
+            }
+            this.dataSourceObj.records.splice(recordIndex, 0, ...recordArr);
             this.updateGroup();
         }
         deleteRecordsForGroup(recordIndexs) {
@@ -34013,11 +34039,14 @@
 
     function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
         let isAsync = false;
+        let cellGroup;
         if (isPromise(value)) {
+            if (table.scenegraph.highPerformanceGetCell(col, row).role !== 'cell') {
+                return cellGroup;
+            }
             value = table.getCellValue(col, row);
             isAsync = true;
         }
-        let cellGroup;
         if (type === 'text' || type === 'link' || customResult) {
             if (type === 'link') {
                 const cellValue = value;
@@ -34071,7 +34100,7 @@
             const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
             if (axisConfig) {
                 const CartesianAxis = Factory.getComponent('axis');
-                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, table);
+                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, axisConfig.__vtablePadding ?? padding, table);
                 cellGroup.clear();
                 cellGroup.appendChild(axis.component);
                 axis.overlap();
@@ -34137,6 +34166,7 @@
         let cellTheme;
         let customStyle;
         let customResult;
+        let isCustomMerge = false;
         if (table.internalProps.customMergeCell) {
             const customMerge = table.getCustomMerge(col, row);
             if (customMerge) {
@@ -34152,6 +34182,7 @@
                 if (customLayout || customRender) {
                     customResult = dealWithCustom(customLayout, customRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), false, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table);
                 }
+                isCustomMerge = true;
             }
         }
         let colForDefine = col;
@@ -34171,10 +34202,10 @@
             range = table.getCellRange(col, row);
             isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
         }
-        let isvtableMerge = false;
+        let isVtableMerge = false;
         if (table.internalProps.enableTreeNodeMerge && isMerge) {
             const { vtableMergeName, vtableMerge } = table.getCellRawRecord(range.start.col, range.start.row);
-            isvtableMerge = vtableMerge;
+            isVtableMerge = vtableMerge;
             if (vtableMerge) {
                 mayHaveIcon = true;
                 if (table.options.groupTitleCustomLayout) {
@@ -34270,7 +34301,7 @@
         if (!addNew && oldCellGroup.role === 'empty') {
             return undefined;
         }
-        const type = isvtableMerge
+        const type = isVtableMerge || isCustomMerge
             ? 'text'
             : table.isHeader(col, row)
                 ? table._getHeaderLayoutMap(col, row).headerType
@@ -35438,8 +35469,9 @@
         }
         cell.needUpdateHeight = false;
         cell.setAttribute('height', distHeight);
-        const isvtableMerge = scene.table.getCellRawRecord(col, row)?.vtableMerge;
-        const type = isvtableMerge
+        const isVtableMerge = scene.table.getCellRawRecord(col, row)?.vtableMerge;
+        const isCustomMerge = !!scene.table.getCustomMerge(col, row);
+        const type = isVtableMerge || isCustomMerge
             ? 'text'
             : scene.table.isHeader(col, row)
                 ? scene.table._getHeaderLayoutMap(col, row).headerType
@@ -35779,8 +35811,9 @@
             return false;
         }
         const autoRowHeight = scene.table.isAutoRowHeight(row);
-        const isvtableMerge = scene.table.getCellRawRecord(col, row)?.vtableMerge;
-        const type = isvtableMerge
+        const isVtableMerge = scene.table.getCellRawRecord(col, row)?.vtableMerge;
+        const isCustomMerge = !!scene.table.getCustomMerge(col, row);
+        const type = isVtableMerge || isCustomMerge
             ? 'text'
             : scene.table.isHeader(col, row)
                 ? scene.table._getHeaderLayoutMap(col, row).headerType
@@ -35822,7 +35855,7 @@
             const padding = getQuadProps(getProp('padding', cellStyle, col, row, scene.table));
             if (axisConfig) {
                 const CartesianAxis = Factory.getComponent('axis');
-                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, scene.table);
+                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, axisConfig.__vtablePadding ?? padding, scene.table);
                 cellGroup.clear();
                 cellGroup.appendChild(axis.component);
                 axis.overlap();
@@ -37216,7 +37249,7 @@
         if (borderLineWidth) {
             rectAttributes.stroke = true;
             rectAttributes.fill = false;
-            rectAttributes.stroke = getStroke(borderColor, strokeArray, borderLineWidth);
+            rectAttributes.stroke = getStroke(borderColor ?? '#E1E4E8', strokeArray, borderLineWidth);
             rectAttributes.lineWidth = borderLineWidth;
             borderLineDash && (rectAttributes.lineDash = borderLineDash);
             rectAttributes.lineCap = 'butt';
@@ -37340,6 +37373,9 @@
         }
     }
     function updateFrameBorder(group, frameTheme, strokeArray) {
+        if (!frameTheme) {
+            return;
+        }
         const { borderColor } = frameTheme;
         group.border?.setAttribute('stroke', getStroke(borderColor, strokeArray));
     }
@@ -39769,6 +39805,7 @@
             let isMerge;
             let customStyle;
             let customResult;
+            let isCustomMerge = false;
             if (table.internalProps.customMergeCell) {
                 const customMerge = table.getCustomMerge(col, row);
                 if (customMerge) {
@@ -39786,6 +39823,7 @@
                     if (customLayout || customRender) {
                         customResult = dealWithCustom(customLayout, customRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), false, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table);
                     }
+                    isCustomMerge = true;
                 }
             }
             let colForDefine = col;
@@ -39814,10 +39852,10 @@
                     cellHeight = mergeSize.cellHeight;
                 }
             }
-            let isvtableMerge = false;
+            let isVtableMerge = false;
             if (table.internalProps.enableTreeNodeMerge && isMerge) {
                 const { vtableMergeName, vtableMerge } = table.getCellRawRecord(range.start.col, range.start.row);
-                isvtableMerge = vtableMerge;
+                isVtableMerge = vtableMerge;
                 if (vtableMerge) {
                     mayHaveIcon = true;
                     if (table.options.groupTitleCustomLayout) {
@@ -39845,7 +39883,7 @@
             if (cellLocation !== 'body' && !cellTheme.group.fill) {
                 cellTheme.group.fill = '#fff';
             }
-            const type = isvtableMerge
+            const type = isVtableMerge || isCustomMerge
                 ? 'text'
                 : (table.isHeader(col, row)
                     ? table._getHeaderLayoutMap(col, row).headerType
@@ -43208,7 +43246,7 @@
                             const cellStyle = table._getCellStyle(cell.col, cell.row);
                             const padding = getQuadProps(getProp('padding', cellStyle, cell.col, cell.row, table));
                             const CartesianAxis = Factory.getComponent('axis');
-                            const axis = new CartesianAxis(axisConfig, cell.attribute.width, cell.attribute.height, padding, table);
+                            const axis = new CartesianAxis(axisConfig, cell.attribute.width, cell.attribute.height, axisConfig.__vtablePadding ?? padding, table);
                             cell.clear();
                             cell.appendChild(axis.component);
                             axis.overlap();
@@ -43456,7 +43494,7 @@
         }
         else {
             let oldIconMark;
-            oldSortCell.forEachChildren((mark) => {
+            traverseObject(oldSortCell, 'children', (mark) => {
                 if (mark.attribute.funcType === 'sort') {
                     oldIconMark = mark;
                     return true;
@@ -43480,7 +43518,8 @@
         }
         return false;
     }
-    function updateSortIcon(col, row, iconMark, order, oldSortCol, oldSortRow, oldIconMark, scene) {
+    function updateSortIcon(options) {
+        const { col, row, iconMark, order, oldSortCol, oldSortRow, oldIconMark, scene } = options;
         const icon = scene.table.internalProps.headerHelper.getSortIcon(order, scene.table, col, row);
         if (iconMark) {
             updateIcon(iconMark, icon, col, row, scene);
@@ -44334,8 +44373,9 @@
         setIconHoverStyle(icon, col, row, cellGroup) {
             setIconHoverStyle(icon, col, row, cellGroup, this);
         }
-        updateSortIcon(col, row, iconMark, order, oldSortCol, oldSortRow, oldIconMark) {
-            updateSortIcon(col, row, iconMark, order, oldSortCol, oldSortRow, oldIconMark, this);
+        updateSortIcon(options) {
+            const { col, row, iconMark, order, oldSortCol, oldSortRow, oldIconMark } = options;
+            updateSortIcon({ col, row, iconMark, order, oldSortCol, oldSortRow, oldIconMark, scene: this });
         }
         updateFrozenIcon(col, oldFrozenCol) {
             updateFrozenIcon(this);
@@ -45063,8 +45103,8 @@
             this.updateNextFrame();
         }
         updateCellContentWhileResize(col, row) {
-            const isvtableMerge = this.table.getCellRawRecord(col, row)?.vtableMerge;
-            const type = isvtableMerge
+            const isVtableMerge = this.table.getCellRawRecord(col, row)?.vtableMerge;
+            const type = isVtableMerge
                 ? 'text'
                 : this.table.isHeader(col, row)
                     ? this.table._getHeaderLayoutMap(col, row).headerType
@@ -45603,10 +45643,28 @@
         if (sortEventReturns.includes(false)) {
             return;
         }
-        table.internalProps.sortState = tableState;
-        table.stateManager.setSortState(tableState);
+        let isArraySortState = false;
+        let sortState = table.internalProps.sortState
+            ? Array.isArray(table.internalProps.sortState) && (isArraySortState = true)
+                ? table.internalProps.sortState
+                : [table.internalProps.sortState]
+            : [];
+        if (Array.isArray(sortState)) {
+            const index = sortState.findIndex(item => item.field === tableState.field);
+            if (index >= 0) {
+                sortState[index] = tableState;
+            }
+            else {
+                sortState.push(tableState);
+            }
+        }
+        sortState = sortState.filter(item => item.order !== 'normal');
+        sortState = table.internalProps.multipleSort && (isArraySortState = true) ? sortState : sortState.splice(-1);
+        sortState = isArraySortState && sortState.length ? sortState : sortState[0];
+        table.internalProps.sortState = sortState;
+        table.stateManager.setSortState(sortState);
         if (headerC?.sort) {
-            executeSort(tableState, table, headerC);
+            executeSort(sortState, table);
         }
         table.internalProps.useOneRowHeightFillAll = false;
         table.internalProps.layoutMap.clearCellRangeMap();
@@ -45616,20 +45674,15 @@
         table.stateManager.endSelectCells(true, isHasSelected);
     }
     function executeSort(newState, table, headerDefine) {
-        const hd = table.internalProps.layoutMap.headerObjects.find((col) => col && col.field === newState.field);
-        if (!hd) {
-            return;
-        }
-        const { field } = hd;
-        if (field === null) {
-            return;
-        }
-        if (typeof headerDefine.sort === 'function') {
-            table.dataSource.sort(field, newState.order || 'asc', headerDefine.sort);
-        }
-        else {
-            table.dataSource.sort(field, newState.order || 'asc', defaultOrderFn);
-        }
+        newState = Array.isArray(newState) || !newState ? newState : [newState];
+        table.dataSource.sort((newState || []).map(item => {
+            const hd = table.internalProps.layoutMap.headerObjects.find((col) => col && col.field === item.field);
+            return {
+                field: item.field,
+                order: item.order || 'asc',
+                orderFn: typeof hd?.define?.sort === 'function' ? hd?.define?.sort : defaultOrderFn
+            };
+        }));
     }
     function isTarget(col, row, range1Col, range1Row, table) {
         return table._getLayoutCellId(col, row) === table._getLayoutCellId(range1Col, range1Row);
@@ -47031,11 +47084,13 @@
                 highlightIndex: -1,
                 dropDownMenuHighlight: []
             };
-            this.sort = {
-                col: -1,
-                row: -1,
-                order: 'normal'
-            };
+            this.sort = [
+                {
+                    col: -1,
+                    row: -1,
+                    order: 'normal'
+                }
+            ];
             this.frozen = {
                 col: -1
             };
@@ -47108,11 +47163,13 @@
                 highlightIndex: -1,
                 dropDownMenuHighlight: []
             };
-            this.sort = {
-                col: -1,
-                row: -1,
-                order: 'normal'
-            };
+            this.sort = [
+                {
+                    col: -1,
+                    row: -1,
+                    order: 'normal'
+                }
+            ];
             this.frozen = {
                 col: -1
             };
@@ -47201,8 +47258,38 @@
             return seled;
         }
         setSortState(sortState) {
-            this.sort.field = sortState?.field;
-            this.sort.order = sortState?.order;
+            sortState = !sortState || Array.isArray(sortState) ? sortState : [sortState];
+            function flattenColumns(columns) {
+                const result = [];
+                function flatten(cols, parentStartIndex = 0) {
+                    cols.forEach((col) => {
+                        const startIndex = col.startInTotal ?? parentStartIndex;
+                        if (col.columns) {
+                            flatten(col.columns, startIndex);
+                        }
+                        else {
+                            result.push({
+                                ...col,
+                                startIndex
+                            });
+                        }
+                    });
+                }
+                flatten(columns);
+                return result;
+            }
+            const sort = sortState &&
+                sortState.reduce((prev, item) => {
+                    const column = flattenColumns(this.table.internalProps.columns)?.find(column => column?.field === item?.field);
+                    prev.push({
+                        field: item.field,
+                        order: item.order,
+                        col: column.startInTotal,
+                        row: column.level
+                    });
+                    return prev;
+                }, []);
+            this.sort = sort || [];
         }
         setFrozenState() {
             this.frozen.col = this.table.frozenColCount - 1;
@@ -47787,28 +47874,92 @@
                 });
                 return;
             }
-            const oldSortCol = this.sort.col;
-            const oldSortRow = this.sort.row;
+            const previousSort = [...this.sort];
+            const previousSortItem = this.table.internalProps.multipleSort || !previousSort.length ? null : this.sort[this.sort.length - 1];
             dealSort(col, row, this.table, event);
-            this.sort.col = col;
-            this.sort.row = row;
-            this.table.scenegraph.updateSortIcon(this.sort.col, this.sort.row, iconMark, this.sort.order, oldSortCol, oldSortRow, this.sort.icon);
-            this.sort.icon = iconMark;
+            const currentSortItem = this.sort.find(item => item.col === col && item.row === row);
+            const oldSortCol = this.table.internalProps.multipleSort || !previousSortItem ? null : previousSortItem.col;
+            const oldSortRow = this.table.internalProps.multipleSort || !previousSortItem ? null : previousSortItem.row;
+            const currentSortItemIndex = previousSort.findIndex(item => item.col === col && item.row === row);
+            if (currentSortItemIndex >= 0) {
+                previousSort.splice(currentSortItemIndex, 1);
+            }
+            this.table.scenegraph.updateSortIcon({
+                col: col,
+                row: row,
+                iconMark,
+                order: currentSortItem?.order,
+                oldSortCol,
+                oldSortRow,
+                oldIconMark: previousSortItem?.icon
+            });
+            if (currentSortItem) {
+                currentSortItem.icon = iconMark;
+            }
+            if (!this.table.internalProps.multipleSort) {
+                previousSort.forEach((sortItem) => {
+                    this.table.scenegraph.updateSortIcon({
+                        col: null,
+                        row: null,
+                        iconMark: null,
+                        order: 'normal',
+                        oldSortCol: sortItem.col,
+                        oldSortRow: sortItem.row,
+                        oldIconMark: null
+                    });
+                });
+            }
         }
         updateSortState(sortState) {
-            if (sortState.field === this.sort.field && sortState.order === this.sort.order) {
-                return;
+            sortState = Array.isArray(sortState) ? sortState : [sortState];
+            for (let index = 0; index < sortState.length; index++) {
+                if ((sortState[index].field === this.sort[index]?.field) && (sortState[sortState.length - 1].order === this.sort[index]?.order)) {
+                    return;
+                }
+                const oldSortCol = this.table.internalProps.multipleSort ? null : this.sort[index]?.col || null;
+                const oldSortRow = this.table.internalProps.multipleSort ? null : this.sort[index]?.row || null;
+                this.sort[index]?.order === 'asc' ? 'sort_downward' : this.sort[index]?.order === 'desc' ? 'sort_upward' : 'sort_normal';
+                this.setSortState(sortState);
+                const cellAddress = this.table.internalProps.layoutMap.getHeaderCellAddressByField(sortState[index].field);
+                this.sort[index].col = cellAddress.col;
+                this.sort[index].row = cellAddress.row;
+                const cellGroup = this.table.scenegraph.getCell(this.sort[index].col, this.sort[index].row);
+                let iconMark;
+                traverseObject(cellGroup, 'children', (mark) => {
+                    if (mark.attribute.funcType === 'sort') {
+                        iconMark = mark;
+                        return true;
+                    }
+                    return false;
+                });
+                this.table.scenegraph.updateSortIcon({
+                    col: this.sort[index].col,
+                    row: this.sort[index].row,
+                    iconMark,
+                    order: this.sort[index].order,
+                    oldSortCol,
+                    oldSortRow,
+                    oldIconMark: this.sort[index]?.icon
+                });
+            }
+            const normalHeaders = [];
+            this.table.internalProps.layoutMap.columnTree.tree.children.forEach((item) => {
+                if (!sortState.some((state) => state.field === item.field)) {
+                    normalHeaders.push(item);
+                }
+            });
+            for (let index = 0; index < normalHeaders.length; index++) {
+                const column = normalHeaders[index];
+                this.table.scenegraph.updateSortIcon({
+                    col: null,
+                    row: null,
+                    iconMark: null,
+                    order: null,
+                    oldSortCol: column.startInTotal,
+                    oldSortRow: column.level,
+                    oldIconMark: null
+                });
             }
-            const oldSortCol = this.sort.col;
-            const oldSortRow = this.sort.row;
-            const name = this.sort.order === 'asc' ? 'sort_downward' : this.sort.order === 'desc' ? 'sort_upward' : 'sort_normal';
-            this.setSortState(sortState);
-            const cellAddress = this.table.internalProps.layoutMap.getHeaderCellAddressByField(sortState.field);
-            this.sort.col = cellAddress.col;
-            this.sort.row = cellAddress.row;
-            const cellGroup = this.table.scenegraph.getCell(this.sort.col, this.sort.row);
-            const iconMark = cellGroup.getChildByName(name, true);
-            this.table.scenegraph.updateSortIcon(this.sort.col, this.sort.row, iconMark, this.sort.order, oldSortCol, oldSortRow, this.sort.icon);
         }
         triggerFreeze(col, row, iconMark) {
             if (this.table.isPivotTable() || this.table.transpose) {
@@ -48091,7 +48242,7 @@
             state.showVerticalScrollBar(true);
         }
         isWheelEvent && state.resetInteractionState();
-        if (event.nativeEvent.cancelable &&
+        if (event.nativeEvent?.cancelable &&
             (state.table.internalProps.overscrollBehavior === 'none' ||
                 (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, state)) ||
                 (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, state)))) {
@@ -48224,7 +48375,8 @@
                 }
                 return;
             }
-            else if (table.eventManager.isDraging &&
+            else if (!table.options.select?.disableDragSelect &&
+                table.eventManager.isDraging &&
                 stateManager.isSelecting() &&
                 !table.editorManager?.editingEditor) {
                 eventManager.dealTableSelect(eventArgsSet, true);
@@ -48439,20 +48591,31 @@
                     }
                 }
             }
-            const isCompleteEdit = table.editorManager?.completeEdit(e.nativeEvent);
-            getPromiseValue(isCompleteEdit, isCompleteEdit => {
-                if (isCompleteEdit === false) {
-                    return;
-                }
-                stateManager.updateInteractionState(InteractionState.default);
-                eventManager.dealTableHover();
-                if (table.options.select?.outsideClickDeselect) {
-                    const isHasSelected = !!stateManager.select.ranges?.length;
-                    eventManager.dealTableSelect();
-                    stateManager.endSelectCells(true, isHasSelected);
-                }
-            });
         });
+        const globalPointerupCallback = (e) => {
+            const target = e.target;
+            if (!table.getElement().contains(target)) {
+                const isCompleteEdit = table.editorManager?.completeEdit(e);
+                getPromiseValue(isCompleteEdit, isCompleteEdit => {
+                    if (isCompleteEdit === false) {
+                        return;
+                    }
+                    stateManager.updateInteractionState(InteractionState.default);
+                    eventManager.dealTableHover();
+                    if (table.options.select?.outsideClickDeselect) {
+                        const isHasSelected = !!stateManager.select.ranges?.length;
+                        eventManager.dealTableSelect();
+                        stateManager.endSelectCells(true, isHasSelected);
+                    }
+                });
+            }
+        };
+        eventManager.globalEventListeners.push({
+            name: 'pointerup',
+            env: 'document',
+            callback: globalPointerupCallback
+        });
+        vglobal.addEventListener('pointerup', globalPointerupCallback);
         table.scenegraph.tableGroup.addEventListener('pointerdown', (e) => {
             if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE)) {
                 table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
@@ -48476,6 +48639,9 @@
             if (eventArgsSet.eventArgs?.target !== stateManager.residentHoverIcon?.icon) {
                 stateManager.hideMenu();
             }
+            if (eventArgsSet?.eventArgs?.target.type === 'chart') {
+                return;
+            }
             const isCompleteEdit = table.editorManager?.completeEdit(e.nativeEvent);
             getPromiseValue(isCompleteEdit, isCompleteEdit => {
                 if (isCompleteEdit === false) {
@@ -50642,7 +50808,7 @@
             iconPropKeys.forEach(k => {
                 if (typeof iconOpt[k] !== 'undefined') {
                     const f = this._table.getFieldData(iconOpt[k], col, row);
-                    if (f != null) {
+                    if (isValid$1(f)) {
                         retIcon[k] = f;
                     }
                     else if (!this._table._hasField?.(iconOpt[k], col, row)) {
@@ -52736,7 +52902,8 @@
                 value: node.value,
                 hierarchyState: node.hierarchyState,
                 children: undefined,
-                virtual: node.virtual ?? false
+                virtual: node.virtual ?? false,
+                levelSpan: node.levelSpan ?? 1
             };
             tree.push(diemnsonNode);
             if (node.children) {
@@ -52846,6 +53013,9 @@
             for (let i = 1; i < hd.levelSpan; i++) {
                 if (!_headerCellIds[row + i]) {
                     _headerCellIds[row + i] = [];
+                    for (let col = 0; col < layoutMap.colIndex; col++) {
+                        _headerCellIds[row + i][col] = _headerCellIds[row][col];
+                    }
                 }
                 _headerCellIds[row + i][layoutMap.colIndex] = id;
             }
@@ -53704,6 +53874,8 @@
                 if (!axisRange) {
                     return;
                 }
+                const chartCellStyle = layout._table._getCellStyle(col, row + 1);
+                const padding = getQuadProps(getProp('padding', chartCellStyle, col, row + 1, layout._table));
                 const { range, ticks, axisOption, isZeroAlign, theme } = axisRange;
                 if (isZeroAlign) {
                     const subAxisRange = getRange$1('bottom', col, row + 1, col, layout.columnHeaderLevelCount - 1, col, row, 0, layout);
@@ -53737,7 +53909,8 @@
                         flush: true
                     },
                     __ticksForVTable: ticks,
-                    __vtableChartTheme: theme
+                    __vtableChartTheme: theme,
+                    __vtablePadding: padding
                 });
             }
             else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
@@ -53755,6 +53928,8 @@
                 if (!axisRange) {
                     return;
                 }
+                const chartCellStyle = layout._table._getCellStyle(col, row - 1);
+                const padding = getQuadProps(getProp('padding', chartCellStyle, col, row - 1, layout._table));
                 const { range, ticks, axisOption, isZeroAlign, theme } = axisRange;
                 if (isZeroAlign) {
                     const subAxisRange = getRange$1('top', col, row - 1, col, row, col, row, 1, layout);
@@ -53792,7 +53967,8 @@
                         flush: true
                     },
                     __ticksForVTable: ticks,
-                    __vtableChartTheme: theme
+                    __vtableChartTheme: theme,
+                    __vtablePadding: padding
                 });
             }
             else if (col === layout.rowHeaderLevelCount - 1 &&
@@ -53809,6 +53985,8 @@
                 if (axisOption?.visible === false) {
                     return;
                 }
+                const chartCellStyle = layout._table._getCellStyle(col + 1, row);
+                const padding = getQuadProps(getProp('padding', chartCellStyle, col + 1, row, layout._table));
                 const spec = layout.getRawChartSpec(col + 1, row);
                 return merge({
                     domain: axisOption?.type === 'linear' ? undefined : Array.from(domain),
@@ -53820,7 +53998,8 @@
                     orient: 'left',
                     type: axisOption?.type ?? 'band',
                     __vtableChartTheme: theme,
-                    inverse: transformInverse(axisOption, (spec?.direction ?? (chartType === 'scatter' ? 'vertical' : 'horizontal')) === "horizontal")
+                    inverse: transformInverse(axisOption, (spec?.direction ?? (chartType === 'scatter' ? 'vertical' : 'horizontal')) === "horizontal"),
+                    __vtablePadding: padding
                 });
             }
         }
@@ -53840,6 +54019,8 @@
                 if (!axisRange) {
                     return;
                 }
+                const chartCellStyle = layout._table._getCellStyle(col + 1, row);
+                const padding = getQuadProps(getProp('padding', chartCellStyle, col + 1, row, layout._table));
                 const { range, ticks, axisOption, isZeroAlign, theme } = axisRange;
                 if (isZeroAlign) {
                     const subAxisRange = getRange$1('right', col + 1, row, col, row, col, row, 1, layout);
@@ -53878,7 +54059,8 @@
                         flush: true
                     },
                     __ticksForVTable: ticks,
-                    __vtableChartTheme: theme
+                    __vtableChartTheme: theme,
+                    __vtablePadding: padding
                 });
             }
             else if (col === layout.colCount - layout.rightFrozenColCount &&
@@ -53888,6 +54070,8 @@
                 if (!axisRange) {
                     return;
                 }
+                const chartCellStyle = layout._table._getCellStyle(col - 1, row);
+                const padding = getQuadProps(getProp('padding', chartCellStyle, col - 1, row, layout._table));
                 const { range, ticks, axisOption, isZeroAlign, theme } = axisRange;
                 if (isZeroAlign) {
                     const subAxisRange = getRange$1('left', col - 1, row, layout.rowHeaderLevelCount - 1, row, col, row, 0, layout);
@@ -53924,7 +54108,8 @@
                         flush: true
                     },
                     __ticksForVTable: ticks,
-                    __vtableChartTheme: theme
+                    __vtableChartTheme: theme,
+                    __vtablePadding: padding
                 });
             }
             else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
@@ -53941,13 +54126,16 @@
                 if (axisOption?.visible === false) {
                     return;
                 }
+                const chartCellStyle = layout._table._getCellStyle(col, row - 1);
+                const padding = getQuadProps(getProp('padding', chartCellStyle, col, row - 1, layout._table));
                 return merge({
                     domain: axisOption?.type === 'linear' ? undefined : Array.from(domain),
                     range: axisOption?.type === 'linear' ? domain : undefined
                 }, axisOption, {
                     orient: 'bottom',
                     type: axisOption?.type ?? 'band',
-                    __vtableChartTheme: theme
+                    __vtableChartTheme: theme,
+                    __vtablePadding: padding
                 });
             }
         }
@@ -54103,7 +54291,9 @@
             range.max = range.max > 0 ? 1 : 0;
         }
         const getAxisDomainRangeAndLabels = Factory.getFunction('getAxisDomainRangeAndLabels');
-        const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, layout._table.getColWidth(col));
+        const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, position === 'bottom' || position === 'top'
+            ? layout._table.getColWidth(col) || layout._table.tableNoFrameWidth
+            : layout._table.getRowHeight(row) || layout._table.tableNoFrameHeight);
         range.min = !isNaN(niceRange[0]) ? niceRange[0] : 0;
         range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1;
         if (isNumber$2(axisOption?.min)) {
@@ -54437,7 +54627,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.7.5-alpha.1";
+        version = "1.7.6";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -56265,7 +56455,7 @@
             return undefined;
         }
         _hasField(field, col, row) {
-            if (field == null) {
+            if (field === null) {
                 return false;
             }
             const table = this;
@@ -56394,17 +56584,19 @@
                 icons = this.internalProps.headerHelper.getIcons(col, row);
             }
             else if (this.internalProps.layoutMap.isSeriesNumber(col, row)) {
-                const dragOrder = this.internalProps.layoutMap.getSeriesNumberBody(col, row)?.define
-                    ?.dragOrder;
-                if (dragOrder) {
-                    icons = this.internalProps.rowSeriesNumberHelper.getIcons(col, row);
+                if (!this.options.groupBy || !this.getCellRawRecord(col, row)?.vtableMerge) {
+                    const dragOrder = this.internalProps.layoutMap.getSeriesNumberBody(col, row)?.define
+                        ?.dragOrder;
+                    if (dragOrder) {
+                        icons = this.internalProps.rowSeriesNumberHelper.getIcons(col, row);
+                    }
                 }
                 const cellValue = this.getCellValue(col, row);
                 const dataValue = this.getCellOriginValue(col, row);
                 const ctx = this.internalProps.context;
                 const cellIcon = this.internalProps.bodyHelper.getIcons(col, row, cellValue, dataValue, ctx);
                 if (icons?.length > 0) {
-                    icons = icons.concat();
+                    icons = icons.concat(cellIcon);
                 }
                 else if (cellIcon?.length > 0) {
                     icons = cellIcon;
@@ -58072,7 +58264,9 @@
         }
         if (axisOption?.nice) {
             const getAxisDomainRangeAndLabels = Factory.getFunction('getAxisDomainRangeAndLabels');
-            const { range: axisRange } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, layout._table.getColWidth(col));
+            const { range: axisRange } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, position === 'bottom' || position === 'top'
+                ? layout._table.getColWidth(col) || layout._table.tableNoFrameWidth
+                : layout._table.getRowHeight(row) || layout._table.tableNoFrameHeight);
             range.min = axisRange[0];
             range.max = axisRange[1];
         }
@@ -59815,27 +60009,19 @@
         return cellUpdateType;
     }
     function sortRecords(table) {
-        if (table.sortState) {
-            let order;
-            let field;
-            if (Array.isArray(table.sortState)) {
-                if (table.sortState.length !== 0) {
-                    ({ order, field } = table.sortState?.[0]);
-                }
-            }
-            else {
-                ({ order, field } = table.sortState);
-            }
-            if (order && field && order !== 'normal') {
-                const sortFunc = table._getSortFuncFromHeaderOption(undefined, field);
-                const hd = table.internalProps.layoutMap.headerObjects.find((col) => col && col.field === field);
-                hd && table.dataSource.sort(hd.field, order, sortFunc ?? defaultOrderFn);
-            }
+        let sortState = table.sortState;
+        sortState = !sortState || Array.isArray(sortState) ? sortState : [sortState];
+        if (sortState) {
+            sortState = sortState.map(item => {
+                item.orderFn = table._getSortFuncFromHeaderOption(undefined, item.field) ?? defaultOrderFn;
+                return item;
+            });
+            table.dataSource.sort(sortState);
         }
     }
     function listTableAddRecord(record, recordIndex, table) {
         if (table.options.groupBy) {
-            table.dataSource.addRecordsForGroup?.([record]);
+            table.dataSource.addRecordsForGroup?.([record], recordIndex);
             table.refreshRowColCount();
             table.internalProps.layoutMap.clearCellRangeMap();
             table.scenegraph.clearCells();
@@ -59918,7 +60104,7 @@
     }
     function listTableAddRecords(records, recordIndex, table) {
         if (table.options.groupBy) {
-            table.dataSource.addRecordsForGroup?.(records);
+            table.dataSource.addRecordsForGroup?.(records, recordIndex);
             table.refreshRowColCount();
             table.internalProps.layoutMap.clearCellRangeMap();
             table.scenegraph.clearCells();
@@ -60178,6 +60364,7 @@
             internalProps.frozenColDragHeaderMode = options.frozenColDragHeaderMode;
             this.pagination = options.pagination;
             internalProps.sortState = options.sortState;
+            internalProps.multipleSort = !!options.multipleSort;
             internalProps.dataConfig = options.groupBy ? getGroupByDataConfig(options.groupBy) : {};
             internalProps.columns = options.columns
                 ? cloneDeepSpec(options.columns, ['children'])
@@ -60304,6 +60491,14 @@
                     const { title } = table.internalProps.layoutMap.getSeriesNumberHeader(col, row);
                     return title;
                 }
+                if (this.options.groupBy) {
+                    const { vtableMerge } = table.getCellRawRecord(col, row);
+                    if (vtableMerge) {
+                        return '';
+                    }
+                    const indexs = this.dataSource.currentIndexedData[row - this.columnHeaderLevelCount];
+                    return indexs[indexs.length - 1] + 1;
+                }
                 const { format } = table.internalProps.layoutMap.getSeriesNumberBody(col, row);
                 return typeof format === 'function' ? format(col, row, this) : row - this.columnHeaderLevelCount + 1;
             }
@@ -60774,8 +60969,10 @@
             if (!sortState) {
                 if (this.internalProps.sortState) {
                     if (Array.isArray(this.internalProps.sortState)) {
-                        sortState = this.internalProps.sortState?.[0];
-                        sortState && (sortState.order = 'normal');
+                        for (let i = 0; i < this.internalProps.sortState.length; i++) {
+                            sortState = this.internalProps.sortState?.[i];
+                            sortState && (sortState.order = 'normal');
+                        }
                     }
                     else {
                         this.internalProps.sortState.order = 'normal';
@@ -60786,27 +60983,24 @@
             else {
                 this.internalProps.sortState = sortState;
             }
-            let order;
-            let field;
-            if (Array.isArray(this.internalProps.sortState)) {
-                if (this.internalProps.sortState?.[0]) {
-                    ({ order, field } = this.internalProps.sortState?.[0]);
-                }
-            }
-            else if (this.internalProps.sortState) {
-                ({ order, field } = this.internalProps.sortState);
-            }
-            if (field && executeSort) {
-                const sortFunc = this._getSortFuncFromHeaderOption(this.internalProps.columns, field);
-                const hd = this.internalProps.layoutMap.headerObjects.find((col) => col && col.field === field);
-                if (hd && hd.define.sort !== false) {
-                    this.dataSource.sort(hd.field, order, sortFunc);
+            sortState = Array.isArray(sortState) ? sortState : [sortState];
+            if (sortState.some((item) => item.field) && executeSort) {
+                if (this.internalProps.layoutMap.headerObjects.some(item => item.define.sort !== false)) {
+                    this.dataSource.sort(sortState.map((item) => {
+                        const sortFunc = this._getSortFuncFromHeaderOption(this.internalProps.columns, item.field);
+                        this.internalProps.layoutMap.headerObjects.find((col) => col && col.field === item.field);
+                        return {
+                            field: item.field,
+                            order: item.order,
+                            orderFn: sortFunc
+                        };
+                    }));
                     this.internalProps.layoutMap.clearCellRangeMap();
                     this.internalProps.useOneRowHeightFillAll = false;
                     this.scenegraph.sortCell();
                 }
             }
-            if (sortState) {
+            if (sortState.length) {
                 this.stateManager.updateSortState(sortState);
             }
         }
@@ -60880,27 +61074,24 @@
             const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.scenegraph.clearCells();
             if (sort !== undefined) {
-                this.internalProps.sortState = sort;
+                this.internalProps.sortState = this.internalProps.multipleSort ? (Array.isArray(sort) ? sort : [sort]) : sort;
                 this.stateManager.setSortState(this.sortState);
             }
             if (records) {
                 _setRecords(this, records);
                 if (this.sortState) {
-                    let order;
-                    let field;
-                    if (Array.isArray(this.sortState)) {
-                        if (this.sortState.length !== 0) {
-                            ({ order, field } = this.sortState?.[0]);
-                        }
-                    }
-                    else {
-                        ({ order, field } = this.sortState);
-                    }
-                    if (order && field && order !== 'normal') {
-                        const sortFunc = this._getSortFuncFromHeaderOption(undefined, field);
-                        const hd = this.internalProps.layoutMap.headerObjectsIncludeHided.find((col) => col && col.field === field);
-                        if (hd && hd.define.sort !== false) {
-                            this.dataSource.sort(hd.field, order, sortFunc ?? defaultOrderFn);
+                    const sortState = Array.isArray(this.sortState) ? this.sortState : [this.sortState];
+                    if (sortState.some((item) => item.order && item.field && item.order !== 'normal')) {
+                        if (this.internalProps.layoutMap.headerObjectsIncludeHided.some(item => item.define.sort !== false)) {
+                            this.dataSource.sort(sortState.map((item) => {
+                                const sortFunc = this._getSortFuncFromHeaderOption(undefined, item.field);
+                                this.internalProps.layoutMap.headerObjectsIncludeHided.find((col) => col && col.field === item.field);
+                                return {
+                                    field: item.field,
+                                    order: item.order || 'asc',
+                                    orderFn: sortFunc ?? defaultOrderFn
+                                };
+                            }));
                         }
                     }
                 }
@@ -61512,7 +61703,9 @@
         tickData;
         scale;
         component;
+        padding;
         constructor(option, width, height, padding, table) {
+            this.padding = padding;
             this.table = table;
             this.orient = option.orient ?? 'left';
             this.type = option.type ?? 'band';
@@ -61521,13 +61714,13 @@
                 const innerOffsetTop = 0;
                 const innerOffsetBottom = 0;
                 this.width = width;
-                this.height = height - padding[2] - innerOffsetBottom;
+                this.height = height - padding[0] - padding[2] - innerOffsetBottom;
                 this.y = padding[0] + innerOffsetTop;
             }
             else if (this.orient === 'top' || this.orient === 'bottom') {
                 const innerOffsetLeft = 0;
                 const innerOffsetRight = 0;
-                this.width = width - padding[1] - innerOffsetRight;
+                this.width = width - padding[1] - padding[3] - innerOffsetRight;
                 this.height = height;
                 this.x = padding[3] + innerOffsetLeft;
             }
@@ -61605,19 +61798,19 @@
             this.component = new LineAxis(merge({
                 disableTriggerEvent: this.table.options.disableInteraction
             }, axisStylrAttrs, attrs));
-            this.component.setAttributes(this.setLayoutStartPosition({ x: 0, y: 0 }));
+            this.component.setAttributes(this.setLayoutStartPosition({ x: this.x, y: this.y }));
             this.component.originAxis = this;
         }
         resize(width, height) {
-            this.width = width;
-            this.height = height;
+            this.width = width - (this.orient === 'top' || this.orient === 'bottom' ? this.padding[1] + this.padding[3] : 0);
+            this.height = height - (this.orient === 'left' || this.orient === 'right' ? this.padding[2] + this.padding[0] : 0);
             this.updateScaleRange();
             this.computeData();
             const axisStylrAttrs = getAxisAttributes(this.option);
             const attrs = this.getUpdateAttribute();
             attrs.verticalFactor = this.orient === 'top' || this.orient === 'right' ? -1 : 1;
             this.component.setAttributes(merge({}, axisStylrAttrs, attrs));
-            this.component.setAttributes(this.setLayoutStartPosition({ x: 0, y: 0 }));
+            this.component.setAttributes(this.setLayoutStartPosition({ x: this.x, y: this.y }));
             this.overlap();
         }
         overlap() {
@@ -61647,7 +61840,7 @@
             }
             const size = this.orient === 'top' || this.orient === 'bottom' ? height : width;
             const attrs = {
-                start: { x: this.x, y: this.y },
+                start: { x: 0, y: 0 },
                 end,
                 title: {
                     text: this.option.title.text,
@@ -64690,7 +64883,7 @@
             for (let i = 0; i < domain.length; i++) {
                 let valid = false;
                 for (let j = 0; j < values.length; j++) {
-                    if (domain[i] == values[j]) {
+                    if (domain[i] === values[j]) {
                         const data = dataValue[j];
                         if (!isValid$1(data[xField]) || !isValid$1(data[yField])) {
                             break;
@@ -66524,7 +66717,8 @@
                     });
                 }
                 else {
-                    this.rowDimensionKeys.forEach((objKey, index) => {
+                    const rowDimensionKeys = this.rowDimensionTree.dimensionKeysIncludeVirtual.valueArr();
+                    rowDimensionKeys.forEach((objKey, index) => {
                         const dimension = this.rowsDefine?.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === objKey);
                         dimension &&
                             (returnWidths[index + (this.rowHeaderTitle ? 1 : 0) + this.leftRowSeriesNumberColumnCount] = {
@@ -67460,7 +67654,7 @@
             let colDimension;
             for (let i = 0; i < dimensions.length; i++) {
                 const highlightDimension = dimensions[i];
-                if ((highlightDimension.isPivotCorner || !highlightDimension.value) &&
+                if ((highlightDimension.isPivotCorner || !isValid$1(highlightDimension.value)) &&
                     i === dimensions.length - 1) {
                     if (this?.cornerSetting?.titleOnDimension === 'row') {
                         let col = 0;
@@ -67875,7 +68069,7 @@
                                 dimension.value === rowDimension.value) ||
                                 (isValid$1(rowDimension.indicatorKey) &&
                                     dimension.indicatorKey === rowDimension.indicatorKey &&
-                                    (!rowDimension.value || dimension.value === rowDimension.value))) {
+                                    (!isValid$1(rowDimension.value) || dimension.value === rowDimension.value))) {
                                 rowArr = dimension.children;
                                 if (needLowestLevel && (!rowArr || rowArr.some(row => row.dimensionKey === 'axis'))) {
                                     rowDimensionFinded = dimension;
@@ -68083,7 +68277,7 @@
             }
             for (let i = 0; i < dimensions.length; i++) {
                 const highlightDimension = dimensions[i];
-                if ((highlightDimension.isPivotCorner || !highlightDimension.value) &&
+                if ((highlightDimension.isPivotCorner || !isValid$1(highlightDimension.value)) &&
                     i === dimensions.length - 1) {
                     return undefined;
                 }
@@ -68943,6 +69137,7 @@
     class Dataset {
         dataConfig;
         records;
+        filteredRecords;
         tree = {};
         changedTree = {};
         colFlatKeys = {};
@@ -69200,18 +69395,29 @@
                 isNeedFilter = true;
             }
             if (Array.isArray(this.records)) {
+                if (!this.filteredRecords) {
+                    this.filteredRecords = [];
+                }
                 for (let i = 0, len = this.records.length; i < len; i++) {
                     const record = this.records[i];
                     if (!isNeedFilter || this.filterRecord(record)) {
+                        this.filteredRecords.push(record);
                         this.processRecord(record);
                     }
                 }
             }
             else {
+                if (!this.filteredRecords) {
+                    this.filteredRecords = {};
+                }
                 for (const key in this.records) {
                     for (let i = 0, len = this.records[key].length; i < len; i++) {
                         const record = this.records[key][i];
                         if (!isNeedFilter || this.filterRecord(record)) {
+                            if (!this.filteredRecords[key]) {
+                                this.filteredRecords[key] = [];
+                            }
+                            this.filteredRecords[key].push(record);
                             this.processRecord(record, key);
                         }
                     }
@@ -69537,6 +69743,7 @@
         }
         updateFilterRules(filterRules, isResetTree = false) {
             this.filterRules = filterRules;
+            this.filteredRecords = undefined;
             if (isResetTree) {
                 this.tree = {};
             }
@@ -71706,6 +71913,9 @@
             this.dataset.updateFilterRules(filterRules);
             this.renderWithRecreateCells();
         }
+        getFilteredRecords() {
+            return this.dataset?.filterRules;
+        }
     }
 
     registerAxis();
@@ -73356,7 +73566,7 @@
     }
 
     registerForVrender();
-    const version = "1.7.5-alpha.1";
+    const version = "1.7.6";
     function getIcons() {
         return get$2();
     }