@visactor/vtable-gantt 1.26.3-alpha.0 → 1.26.4-alpha.0

package/dist/vtable-gantt.js

@@ -42898,6 +42898,20 @@
         var _a, _b, _c;
         return null !== (_c = null === (_b = null === (_a = this.dataConfig) || void 0 === _a ? void 0 : _a.groupByRules) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : 0;
       }
+      refreshRecords(records = [], dataConfig, pagination, columns, rowHierarchyType, hierarchyExpandLevel) {
+        var _a;
+        this.clearCache(), this.beforeChangedRecordsMap.clear(), this.groupAggregator = null, this.addRecordRule = (null == dataConfig ? void 0 : dataConfig.addRecordRule) || "Object", this.dataConfig = dataConfig, this.columns = columns, this._isGrouped = isArray$5(null == dataConfig ? void 0 : dataConfig.groupByRules), this.rowHierarchyType = rowHierarchyType, this.dataSourceObj = {
+          get: index => records[index],
+          length: records.length,
+          records: records
+        }, this._source = this.processRecords(records), this.sourceLength = (null === (_a = this.source) || void 0 === _a ? void 0 : _a.length) || 0, this.sortedIndexMap.clear(), this._currentPagerIndexedData = [], this.userPagination = pagination, this.pagination = pagination || {
+          totalCount: this.sourceLength,
+          perPageCount: this.sourceLength,
+          currentPage: 0
+        }, this.hierarchyExpandLevel = hierarchyExpandLevel >= 1 ? hierarchyExpandLevel : 0, this.currentIndexedData = Array.from({
+          length: this.sourceLength
+        }, (_, i) => i), this.userPagination || (this.pagination.perPageCount = this.sourceLength, this.pagination.totalCount = this.sourceLength), "tree" === rowHierarchyType && this.initTreeHierarchyState(), this.updatePagerData();
+      }
       updateGroup() {
         var _a, _b, _c;
         this.clearCache();
@@ -43213,13 +43227,20 @@
       return parse$2(font);
     }
 
-    function getQuadProps(paddingOrigin) {
+    function normalizeQuadArray(values) {
+      return 0 === values.length ? [0, 0, 0, 0] : 1 === values.length ? [values[0], values[0], values[0], values[0]] : 2 === values.length ? [values[0], values[1], values[0], values[1]] : 3 === values.length ? [values[0], values[1], values[2], values[1]] : [values[0], values[1], values[2], values[3]];
+    }
+    function parseStringQuad(padding) {
+      const tokens = padding.trim().split(/\s+/),
+        values = tokens.map(token => Number.parseFloat(token)).filter(value => Number.isFinite(value));
+      return values.length === tokens.length && values.length > 0 ? normalizeQuadArray(values) : [padding, padding, padding, padding];
+    }
+    function normalizePaddingObject(paddingOrigin) {
       var _a, _b, _c, _d;
-      if (isNumber$2(paddingOrigin) || isString$2(paddingOrigin) || isArray$5(paddingOrigin)) {
-        let padding = parsePadding(paddingOrigin);
-        return "number" == typeof padding || "string" == typeof padding ? padding = [padding, padding, padding, padding] : Array.isArray(padding) && (padding = padding.slice(0)), padding;
-      }
-      return paddingOrigin && (isFinite(paddingOrigin.bottom) || isFinite(paddingOrigin.left) || isFinite(paddingOrigin.right) || isFinite(paddingOrigin.top)) ? [null !== (_a = paddingOrigin.top) && void 0 !== _a ? _a : 0, null !== (_b = paddingOrigin.right) && void 0 !== _b ? _b : 0, null !== (_c = paddingOrigin.bottom) && void 0 !== _c ? _c : 0, null !== (_d = paddingOrigin.left) && void 0 !== _d ? _d : 0] : [0, 0, 0, 0];
+      return Number.isFinite(paddingOrigin.bottom) || Number.isFinite(paddingOrigin.left) || Number.isFinite(paddingOrigin.right) || Number.isFinite(paddingOrigin.top) ? [null !== (_a = paddingOrigin.top) && void 0 !== _a ? _a : 0, null !== (_b = paddingOrigin.right) && void 0 !== _b ? _b : 0, null !== (_c = paddingOrigin.bottom) && void 0 !== _c ? _c : 0, null !== (_d = paddingOrigin.left) && void 0 !== _d ? _d : 0] : [0, 0, 0, 0];
+    }
+    function getQuadProps(paddingOrigin) {
+      return Array.isArray(paddingOrigin) ? normalizeQuadArray(paddingOrigin.slice(0, 4)) : "number" == typeof paddingOrigin && Number.isFinite(paddingOrigin) ? [paddingOrigin, paddingOrigin, paddingOrigin, paddingOrigin] : "string" == typeof paddingOrigin ? parseStringQuad(paddingOrigin) : paddingOrigin && "object" == typeof paddingOrigin ? normalizePaddingObject(paddingOrigin) : [0, 0, 0, 0];
     }
 
     const TYPE_PAREN = 0,
@@ -43449,14 +43470,17 @@
         table.dataSource.hierarchyExpandLevel && table.refreshRowColCount(), table.render();
       })];
     }
-    function _setRecords(table, records = []) {
+    function getListTableRowHierarchyType(table) {
+      var _a, _b;
       const tableWithPlugins = table;
+      let rowHierarchyType = table.internalProps.layoutMap.rowHierarchyType;
+      return isArray$5(null === (_a = table.internalProps.dataConfig) || void 0 === _a ? void 0 : _a.groupByRules) && (rowHierarchyType = "tree"), (null === (_b = tableWithPlugins.pluginManager) || void 0 === _b ? void 0 : _b.getPluginByName("Master Detail Plugin")) && (rowHierarchyType = "grid"), rowHierarchyType;
+    }
+    function _setRecords(table, records = []) {
       _dealWithUpdateDataSource(table, () => {
-        var _a;
         table.internalProps.records = records;
-        let rowHierarchyType = table.internalProps.layoutMap.rowHierarchyType;
-        isArray$5(null === (_a = table.internalProps.dataConfig) || void 0 === _a ? void 0 : _a.groupByRules) && (rowHierarchyType = "tree"), tableWithPlugins.pluginManager.getPluginByName("Master Detail Plugin") && (rowHierarchyType = "grid");
-        const newDataSource = table.internalProps.dataSource = CachedDataSource.ofArray(records, table.internalProps.dataConfig, table.pagination, table.internalProps.columns, rowHierarchyType, getHierarchyExpandLevel(table));
+        const rowHierarchyType = getListTableRowHierarchyType(table),
+          newDataSource = table.internalProps.dataSource = CachedDataSource.ofArray(records, table.internalProps.dataConfig, table.pagination, table.internalProps.columns, rowHierarchyType, getHierarchyExpandLevel(table));
         table.addReleaseObj(newDataSource);
       });
     }
@@ -44832,7 +44856,7 @@
 
     function createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, lineClamp, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme, range) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      let contentWidth,
+      let contentWidth = 0,
         leftIconWidth = 0,
         rightIconWidth = 0,
         absoluteRightIconWidth = 0;
@@ -44912,8 +44936,8 @@
           }), contentRightIcons.forEach(icon => {
             const iconMark = dealWithIcon(icon, void 0, cellGroup.col, cellGroup.row, range, table, dealWithIconComputeVar);
             iconMark.role = "icon-content-right", iconMark.name = icon.name, cellContent.addRightOccupyingIcon(iconMark);
-          }), cellContent.addContent(textMark), cellGroup.appendChild(cellContent), cellContent.layout(), contentWidth = cellContent.AABBBounds.width(), cellContent.AABBBounds.height();
-        } else cellGroup.firstChild ? cellGroup.insertBefore(textMark, cellGroup.firstChild) : cellGroup.appendChild(textMark), contentWidth = textMark.AABBBounds.width(), textMark.AABBBounds.height();
+          }), cellContent.addContent(textMark), cellGroup.appendChild(cellContent), cellContent.layout(), autoColWidth && (contentWidth = cellContent.AABBBounds.width());
+        } else cellGroup.firstChild ? cellGroup.insertBefore(textMark, cellGroup.firstChild) : cellGroup.appendChild(textMark), autoColWidth && (contentWidth = textMark.AABBBounds.width());
       } else if (isValid$1(textStr)) {
         const {
             text: text,
@@ -44937,7 +44961,7 @@
             keepCenterInLine: !0
           },
           wrapText = new Text$1(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
-        wrapText.name = "text", wrapText.textBaseline = textBaseline, cellGroup.appendChild(wrapText), contentWidth = wrapText.AABBBounds.width(), wrapText.AABBBounds.height();
+        wrapText.name = "text", wrapText.textBaseline = textBaseline, cellGroup.appendChild(wrapText), autoColWidth && (contentWidth = wrapText.AABBBounds.width());
       }
       const width = autoColWidth ? leftIconWidth + contentWidth + rightIconWidth : cellWidth - (padding[1] + padding[3]),
         height = cellHeight - (padding[0] + padding[2]);
@@ -45395,7 +45419,7 @@
       }
     }
 
-    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
+    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, headerStyle) {
       var _a, _b;
       let cellGroup,
         isAsync = !1;
@@ -45430,7 +45454,7 @@
           customElementsGroup: customElementsGroup,
           renderDefault: renderDefault
         } = _generateCustomElementsGroup(table, define, col, row, cellWidth, cellHeight, padding, range, customResult);
-        cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync);
+        cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle);
         const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
         if (axisConfig) {
           const axis = new (Factory.getComponent("axis"))(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, null !== (_a = axisConfig.__vtableBodyChartCellPadding) && void 0 !== _a ? _a : padding, table);
@@ -45453,20 +45477,20 @@
           } = _generateCustomElementsGroup(table, define, col, row, cellWidth, cellHeight, padding, range, customResult),
           style = table._getCellStyle(col, row),
           dataValue = table.getCellOriginValue(col, row);
-        cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync);
+        cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle);
         const progressBarGroup = Factory.getFunction("createProgressBarCell")(define, style, colWidth, value, dataValue, col, row, padding, table, range);
         cellGroup.firstChild ? cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild) : cellGroup.appendChild(progressBarGroup);
       } else if ("sparkline" === type) {
         cellGroup = Factory.getFunction("createSparkLineCellGroup")(null, columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, table, cellTheme, isAsync);
       } else if ("checkbox" === type) {
         if ("isAggregation" in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row)) {
-          cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, !1, void 0, !0, cellTheme, range, isAsync);
+          cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, !1, void 0, !0, cellTheme, range, isAsync, headerStyle);
         } else {
           cellGroup = Factory.getFunction("createCheckboxCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, !1);
         }
       } else if ("radio" === type) {
         if ("isAggregation" in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row)) {
-          cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, !1, void 0, !0, cellTheme, range, isAsync);
+          cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, !1, void 0, !0, cellTheme, range, isAsync, headerStyle);
         } else {
           cellGroup = Factory.getFunction("createRadioCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, table, cellTheme, define, range);
         }
@@ -50678,6 +50702,7 @@
           isMerge,
           customStyle,
           customResult,
+          rawRecord,
           cellLocation = table.getCellLocation(col, row),
           value = table.getCellValue(col, row),
           cellWidth = colWidth,
@@ -50707,17 +50732,17 @@
         const isAggregation = "isAggregation" in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row),
           isSeriesNumber = table.internalProps.layoutMap.isSeriesNumber(col, row);
         let mayHaveIcon = "body" !== cellLocation || ((null == define ? void 0 : define.dragOrder) || !!(null == define ? void 0 : define.icon) || !!(null == define ? void 0 : define.tree)) && !(isAggregation && isSeriesNumber);
-        if (!range && (table.internalProps.enableTreeNodeMerge || "body" !== cellLocation || (null == define ? void 0 : define.mergeCell)) && (range = table.getCellRange(col, row), isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row, isMerge)) {
+        if (!range && (table.internalProps.enableTreeNodeMerge || "body" !== cellLocation || (null == define ? void 0 : define.mergeCell)) && (table.internalProps.enableTreeNodeMerge && "body" === cellLocation && !(null == define ? void 0 : define.mergeCell) ? (rawRecord = table.getCellRawRecord(col, row), (null == rawRecord ? void 0 : rawRecord.vtableMerge) && (range = table.getCellRange(col, row), isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row)) : (range = table.getCellRange(col, row), isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row), isMerge)) {
           const mergeSize = dealMerge(range, mergeMap, table, rowStart > range.start.row);
           cellWidth = mergeSize.cellWidth, cellHeight = mergeSize.cellHeight;
         }
         let isVtableMerge = !1;
         if (table.internalProps.enableTreeNodeMerge && isMerge) {
-          const rawRecord = table.getCellRawRecord(range.start.col, range.start.row),
-            {
-              vtableMergeName: vtableMergeName,
-              vtableMerge: vtableMerge
-            } = null != rawRecord ? rawRecord : {};
+          rawRecord = null != rawRecord ? rawRecord : table.getCellRawRecord(range.start.col, range.start.row);
+          const {
+            vtableMergeName: vtableMergeName,
+            vtableMerge: vtableMerge
+          } = null != rawRecord ? rawRecord : {};
           isVtableMerge = vtableMerge, vtableMerge && (mayHaveIcon = !0, table.internalProps.groupTitleCustomLayout && (customResult = dealWithCustom(table.internalProps.groupTitleCustomLayout, void 0, range.start.col, range.start.row, table.getColsWidth(range.start.col, range.end.col), table.getRowsHeight(range.start.row, range.end.row), !1, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table)), table.internalProps.groupTitleFieldFormat ? value = table.internalProps.groupTitleFieldFormat(rawRecord, col, row, table) : void 0 !== vtableMergeName && (value = vtableMergeName));
         }
         const type = isVtableMerge || isCustomMerge ? "text" : table.getCellType(col, row);
@@ -50747,7 +50772,7 @@
           const cellStyle = customStyle || table._getCellStyle(range ? range.start.col : col, range ? range.start.row : row),
             cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
           cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table), cellTheme.group.width = colWidth, cellTheme.group.height = Array.isArray(defaultRowHeight) ? defaultRowHeight[row] : defaultRowHeight, cellTheme._vtable.padding && (padding = cellTheme._vtable.padding), cellTheme.text.textAlign && (textAlign = cellTheme.text.textAlign), cellTheme.text.textBaseline && (textBaseline = cellTheme.text.textBaseline), "body" === cellLocation || cellTheme.group.fill || (cellTheme.group.fill = "#fff");
-          const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
+          const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, cellStyle);
           if (columnGroup.updateColumnRowNumber(row), isMerge) {
             const rangeHeight = table.getRowHeight(row),
               {
@@ -50789,7 +50814,7 @@
         } = createCellArgs,
         cellStyle = customStyle || table._getCellStyle(range ? range.start.col : col, range ? range.start.row : row),
         cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
-      cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table), cellTheme.group.width = colWidth, cellTheme.group.height = Array.isArray(defaultRowHeight) ? defaultRowHeight[row] : defaultRowHeight, cellTheme._vtable.padding && (padding = cellTheme._vtable.padding), cellTheme.text.textAlign && (textAlign = cellTheme.text.textAlign), cellTheme.text.textBaseline && (textBaseline = cellTheme.text.textBaseline), "body" === cellLocation || cellTheme.group.fill || (cellTheme.group.fill = "#fff"), createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
+      cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table), cellTheme.group.width = colWidth, cellTheme.group.height = Array.isArray(defaultRowHeight) ? defaultRowHeight[row] : defaultRowHeight, cellTheme._vtable.padding && (padding = cellTheme._vtable.padding), cellTheme.text.textAlign && (textAlign = cellTheme.text.textAlign), cellTheme.text.textBaseline && (textBaseline = cellTheme.text.textBaseline), "body" === cellLocation || cellTheme.group.fill || (cellTheme.group.fill = "#fff"), createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, cellStyle);
     }
     function dealMerge(range, mergeMap, table, forceUpdate) {
       let cellWidth = 0,
@@ -52685,7 +52710,8 @@
         for (let col = table.colCount - currentRightFrozenCol - 1; col >= table.colCount - distRightFrozenCol; col--) {
           insertBefore(rightFrozenGroup, scene.getColGroup(col), rightFrozenGroup.firstChild);
           insertBefore(rightTopCornerGroup, scene.getColGroup(col, !0), rightTopCornerGroup.firstChild);
-          insertBefore(rightBottomCornerGroup, scene.getColGroupInBottom(col), rightBottomCornerGroup.firstChild);
+          const bottomColGroup = scene.getColGroupInBottom(col);
+          bottomColGroup && insertBefore(rightBottomCornerGroup, bottomColGroup, rightBottomCornerGroup.firstChild);
         }
         let x = 0;
         rightFrozenGroup.forEachChildren(columnGroup => {
@@ -52702,7 +52728,10 @@
           const headerColGroup = scene.getColGroupInRightTopCorner(col);
           headerColGroup.setAttribute("x", colHeaderGroup.lastChild.attribute.x + table.getColWidth(colHeaderGroup.lastChild.col)), colHeaderGroup.appendChild(headerColGroup);
           const bottomColGroup = scene.getColGroupInRightBottomCorner(col);
-          bottomColGroup.setAttribute("x", bottomFrozenGroup.lastChild.attribute.x + table.getColWidth(bottomFrozenGroup.lastChild.col)), bottomFrozenGroup.appendChild(bottomColGroup);
+          if (bottomColGroup) {
+            const lastBottomColGroup = bottomFrozenGroup.lastChild;
+            bottomColGroup.setAttribute("x", lastBottomColGroup ? lastBottomColGroup.attribute.x + table.getColWidth(lastBottomColGroup.col) : 0), bottomFrozenGroup.appendChild(bottomColGroup);
+          }
         }
         let x = 0;
         rightFrozenGroup.forEachChildren(columnGroup => {
@@ -54235,16 +54264,28 @@
         updateContainerChildrenX(this.rightFrozenGroup, rightStartX), updateContainerChildrenX(this.rightTopCornerGroup, rightStartX), updateContainerChildrenX(this.rightBottomCornerGroup, rightStartX), this.updateNextFrame();
       }
       updateContainerAttrHeightAndY() {
-        var _a, _b, _c;
-        for (let i = 0; i < this.cornerHeaderGroup.children.length; i++) updateContainerChildrenY(this.cornerHeaderGroup.children[i], 0);
-        for (let i = 0; i < this.colHeaderGroup.children.length; i++) updateContainerChildrenY(this.colHeaderGroup.children[i], 0);
-        for (let i = 0; i < this.rightTopCornerGroup.children.length; i++) updateContainerChildrenY(this.rightTopCornerGroup.children[i], 0);
-        for (let i = 0; i < this.rowHeaderGroup.children.length; i++) this.rowHeaderGroup.children[i].firstChild && updateContainerChildrenY(this.rowHeaderGroup.children[i], this.rowHeaderGroup.children[i].firstChild.row > 0 ? this.table.getRowsHeight(null !== (_a = this.table.frozenRowCount) && void 0 !== _a ? _a : 0, this.rowHeaderGroup.children[i].firstChild.row - 1) : 0);
-        for (let i = 0; i < this.bodyGroup.children.length; i++) this.bodyGroup.children[i].firstChild && updateContainerChildrenY(this.bodyGroup.children[i], this.bodyGroup.children[i].firstChild.row > 0 ? this.table.getRowsHeight(null !== (_b = this.table.frozenRowCount) && void 0 !== _b ? _b : 0, this.bodyGroup.children[i].firstChild.row - 1) : 0);
-        for (let i = 0; i < this.rightFrozenGroup.children.length; i++) this.rightFrozenGroup.children[i].firstChild && updateContainerChildrenY(this.rightFrozenGroup.children[i], this.rightFrozenGroup.children[i].firstChild.row > 0 ? this.table.getRowsHeight(null !== (_c = this.table.frozenRowCount) && void 0 !== _c ? _c : 0, this.rightFrozenGroup.children[i].firstChild.row - 1) : 0);
-        for (let i = 0; i < this.leftBottomCornerGroup.children.length; i++) updateContainerChildrenY(this.leftBottomCornerGroup.children[i], 0);
-        for (let i = 0; i < this.bottomFrozenGroup.children.length; i++) updateContainerChildrenY(this.bottomFrozenGroup.children[i], 0);
-        for (let i = 0; i < this.rightBottomCornerGroup.children.length; i++) updateContainerChildrenY(this.rightBottomCornerGroup.children[i], 0);
+        this.cornerHeaderGroup.forEachChildrenSkipChild(column => {
+          updateContainerChildrenY(column, 0);
+        }), this.colHeaderGroup.forEachChildrenSkipChild(column => {
+          updateContainerChildrenY(column, 0);
+        }), this.rightTopCornerGroup.forEachChildrenSkipChild(column => {
+          updateContainerChildrenY(column, 0);
+        }), this.rowHeaderGroup.forEachChildrenSkipChild(column => {
+          var _a;
+          column.firstChild && updateContainerChildrenY(column, column.firstChild.row > 0 ? this.table.getRowsHeight(null !== (_a = this.table.frozenRowCount) && void 0 !== _a ? _a : 0, column.firstChild.row - 1) : 0);
+        }), this.bodyGroup.forEachChildrenSkipChild(column => {
+          var _a;
+          column.firstChild && updateContainerChildrenY(column, column.firstChild.row > 0 ? this.table.getRowsHeight(null !== (_a = this.table.frozenRowCount) && void 0 !== _a ? _a : 0, column.firstChild.row - 1) : 0);
+        }), this.rightFrozenGroup.forEachChildrenSkipChild(column => {
+          var _a;
+          column.firstChild && updateContainerChildrenY(column, column.firstChild.row > 0 ? this.table.getRowsHeight(null !== (_a = this.table.frozenRowCount) && void 0 !== _a ? _a : 0, column.firstChild.row - 1) : 0);
+        }), this.leftBottomCornerGroup.forEachChildrenSkipChild(column => {
+          updateContainerChildrenY(column, 0);
+        }), this.bottomFrozenGroup.forEachChildrenSkipChild(column => {
+          updateContainerChildrenY(column, 0);
+        }), this.rightBottomCornerGroup.forEachChildrenSkipChild(column => {
+          updateContainerChildrenY(column, 0);
+        });
       }
       updateContainer(updateConfig = {
         async: !1,
@@ -62131,7 +62172,7 @@
         const internalProps = this.internalProps;
         if ("node" === Env.mode || options.canvas || updateRootElementPadding(internalProps.element, this.padding), this.columnWidthComputeMode = null !== (_d = options.columnWidthComputeMode) && void 0 !== _d ? _d : "normal", internalProps.frozenColCount = frozenColCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.enableCheckboxCascade = null === (_e = null != enableCheckboxCascade ? enableCheckboxCascade : null == rowSeriesNumber ? void 0 : rowSeriesNumber.enableTreeCheckbox) || void 0 === _e || _e, internalProps.enableHeaderCheckboxCascade = enableCheckboxCascade || null == enableHeaderCheckboxCascade || enableHeaderCheckboxCascade, internalProps.columnResizeMode = null !== (_f = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _f ? _f : columnResizeMode, internalProps.canResizeColumn = null == resize ? void 0 : resize.canResizeColumn, internalProps.rowResizeMode = null !== (_g = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _g ? _g : rowResizeMode, internalProps.dragHeaderMode = null !== (_j = null !== (_h = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _h ? _h : dragHeaderMode) && void 0 !== _j ? _j : "none", internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", internalProps.cellTextOverflows = {}, internalProps.groupBy = null !== (_k = null == groupConfig ? void 0 : groupConfig.groupBy) && void 0 !== _k ? _k : groupBy, internalProps.groupTitleCheckbox = null == groupConfig ? void 0 : groupConfig.titleCheckbox, internalProps.groupTitleFieldFormat = null !== (_l = null == groupConfig ? void 0 : groupConfig.titleFieldFormat) && void 0 !== _l ? _l : groupTitleFieldFormat, internalProps.groupTitleCustomLayout = null !== (_m = null == groupConfig ? void 0 : groupConfig.titleCustomLayout) && void 0 !== _m ? _m : groupTitleCustomLayout, internalProps.enableTreeStickCell = null !== (_o = null == groupConfig ? void 0 : groupConfig.enableTreeStickCell) && void 0 !== _o ? _o : enableTreeStickCell, (null == updateConfig ? void 0 : updateConfig.clearColWidthCache) && (internalProps._widthResizedColMap.clear(), this.colWidthsMap = new NumberMap(), this.colContentWidthsMap = new NumberMap(), this.colWidthsLimit = {}), (null == updateConfig ? void 0 : updateConfig.clearRowHeightCache) && (internalProps._heightResizedRowMap.clear(), internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map(), internalProps._colRangeWidthsMap = new Map()), internalProps.stick.changedCells.clear(), internalProps.theme = themes.of(null !== (_p = options.theme) && void 0 !== _p ? _p : themes.DEFAULT), internalProps.theme.isPivot = this.isPivotTable(), setIconColor(internalProps.theme.functionalIconsStyle), this.scenegraph.updateStageBackground(), internalProps.autoWrapText = options.autoWrapText, internalProps.enableLineBreak = options.enableLineBreak, internalProps.allowFrozenColCount = null !== (_q = options.allowFrozenColCount) && void 0 !== _q ? _q : 0, internalProps.limitMaxAutoWidth = null !== (_r = options.limitMaxAutoWidth) && void 0 !== _r ? _r : 450, internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, null === (_s = internalProps.legends) || void 0 === _s || _s.forEach(legend => {
           null == legend || legend.release();
-        }), null === (_t = internalProps.title) || void 0 === _t || _t.release(), internalProps.title = null, null === (_u = internalProps.emptyTip) || void 0 === _u || _u.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), clearChartRenderQueue(), this.scenegraph.clearCells(), this.scenegraph.updateComponent(), this.stateManager.updateOptionSetState(), this._updateSize(), this.eventManager.updateEventBinder(), options.legends) {
+        }), null === (_t = internalProps.title) || void 0 === _t || _t.release(), internalProps.title = null, null === (_u = internalProps.emptyTip) || void 0 === _u || _u.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), clearChartRenderQueue(), (null == updateConfig ? void 0 : updateConfig.skipClearCells) || this.scenegraph.clearCells(), this.scenegraph.updateComponent(), this.stateManager.updateOptionSetState(), this._updateSize(), this.eventManager.updateEventBinder(), options.legends) {
           internalProps.legends = [];
           const createLegend = Factory.getFunction("createLegend");
           if (Array.isArray(options.legends)) {
@@ -63285,16 +63326,17 @@
       }
       scrollToRow(row, animationOption) {
         var _a;
-        const targetRow = Math.min(Math.max(Math.floor(row), 0), this.rowCount - 1);
+        const targetRow = Math.min(Math.max(row, 0), this.rowCount - 1),
+          targetRowInt = Math.floor(targetRow);
         if (this.clearCorrectTimer(), !animationOption) return this.scrollToCell({
-          row: targetRow
-        }), void this._scheduleScrollToRowCorrect(targetRow);
+          row: targetRowInt
+        }), void this._scheduleScrollToRowCorrect(targetRowInt);
         const duration = isBoolean$2(animationOption) ? 3e3 : null !== (_a = null == animationOption ? void 0 : animationOption.duration) && void 0 !== _a ? _a : 3e3;
         this.animationManager.scrollTo({
           row: targetRow
-        }, animationOption), this._scrollToRowCorrectTimer = setTimeout(() => {
-          this.scrollToRow(targetRow, !1);
-        }, duration);
+        }, animationOption), targetRowInt === targetRow && (this._scrollToRowCorrectTimer = setTimeout(() => {
+          this.scrollToRow(targetRowInt, !1);
+        }, duration));
       }
       scrollToCol(col, animationOption) {
         animationOption ? this.animationManager.scrollTo({
@@ -66192,14 +66234,19 @@
         clearRowHeightCache: !0
       }) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const internalProps = this.internalProps;
-        if (this.pluginManager.removeOrAddPlugins(options.plugins), super.updateOption(options, updateConfig), internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy, options.addRecordRule) : {
+        const internalProps = this.internalProps,
+          prevSortState = internalProps.sortState,
+          hasActiveSortState = (Array.isArray(options.sortState) ? options.sortState : options.sortState ? [options.sortState] : []).some(item => (null == item ? void 0 : item.field) && (null == item ? void 0 : item.order) && "normal" !== item.order),
+          shouldSkipInitialClearCells = Boolean(options.records) || !!options.dataSource && this.dataSource !== options.dataSource;
+        if (this.pluginManager.removeOrAddPlugins(options.plugins), super.updateOption(options, Object.assign(Object.assign({}, updateConfig), {
+          skipClearCells: shouldSkipInitialClearCells
+        })), internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy, options.addRecordRule) : {
           addRecordRule: options.addRecordRule
         }, this.showHeader = null === (_c = options.showHeader) || void 0 === _c || _c, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_e = null !== (_d = options.enableTreeNodeMerge) && void 0 !== _d ? _d : isValid$1(this.internalProps.groupBy)) && void 0 !== _e && _e, this.internalProps.headerHelper.setTableColumnsEditor(), this.transpose = null !== (_f = options.transpose) && void 0 !== _f && _f, this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, this.internalProps.columnWidthConfig = options.columnWidthConfig, this.internalProps.rowHeightConfig = options.rowHeightConfig, internalProps.releaseList) for (let i = internalProps.releaseList.length - 1; i >= 0; i--) {
           const releaseObj = internalProps.releaseList[i];
           releaseObj instanceof DataSource$1 ? releaseObj.updateColumns(this.internalProps.columns) : (null === (_g = null == releaseObj ? void 0 : releaseObj.release) || void 0 === _g || _g.call(releaseObj), internalProps.releaseList.splice(i, 1));
         }
-        if (options.dataSource && this.dataSource !== options.dataSource ? this.dataSource = options.dataSource : options.records ? this.setRecords(options.records, {
+        if (options.dataSource && this.dataSource !== options.dataSource ? this.dataSource = options.dataSource : options.records && options.records === internalProps.records && options.sortState === prevSortState && !hasActiveSortState && this.dataSource instanceof CachedDataSource ? this._refreshCurrentRecordsForOptionUpdate(options.records) : options.records ? this.setRecords(options.records, {
           sortState: options.sortState
         }) : (this.refreshRowColCount(), this._resetFrozenColCount(), this.scenegraph.createSceneGraph(), this.render()), options.title) {
           const Title = Factory.getComponent("title");
@@ -66215,6 +66262,22 @@
           setTimeout(resolve, 0);
         });
       }
+      _refreshCurrentRecordsForOptionUpdate(records) {
+        var _a;
+        const dataSource = this.dataSource;
+        this.stateManager.endResizeIfResizing(), clearChartRenderQueue();
+        const oldHoverState = {
+          col: this.stateManager.hover.cellPos.col,
+          row: this.stateManager.hover.cellPos.row
+        };
+        this.scenegraph.clearCells(), this.internalProps.records = records, dataSource.refreshRecords(records, this.internalProps.dataConfig, this.pagination, this.internalProps.columns, getListTableRowHierarchyType(this), getHierarchyExpandLevel(this)), this.refreshRowColCount(), this.stateManager.initCheckedState(records), this.clearCellStyleCache(), this.scenegraph.createSceneGraph(), this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row), this._updateSize();
+        (null !== (_a = this.options.componentLayoutOrder) && void 0 !== _a ? _a : ["legend", "title"]).forEach(component => {
+          var _a, _b;
+          "legend" === component ? null === (_a = this.internalProps.legends) || void 0 === _a || _a.forEach(legend => {
+            null == legend || legend.resize();
+          }) : "title" === component && (null === (_b = this.internalProps.title) || void 0 === _b || _b.resize());
+        }), this.scenegraph.resize(), this.render();
+      }
       updatePagination(pagination) {
         this.pagination && ("number" == typeof pagination.currentPage && pagination.currentPage >= 0 && (this.pagination.currentPage = pagination.currentPage), pagination.perPageCount && (this.pagination.perPageCount = pagination.perPageCount || this.pagination.perPageCount), this.internalProps.layoutMap.clearCellRangeMap(), this.internalProps.useOneRowHeightFillAll = !1, this.scenegraph.clearCells(), this.dataSource.updatePagination(this.pagination), this.refreshRowColCount(), this.stateManager.initCheckedState(this.records), this.scenegraph.createSceneGraph(), this.renderAsync());
       }
@@ -70120,10 +70183,10 @@
       }
     }
 
-    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync) {
+    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
-      const headerStyle = table._getCellStyle(col, row),
-        functionalPadding = getFunctionalProp("padding", headerStyle, col, row, table);
+      headerStyle = headerStyle || table._getCellStyle(col, row);
+      const functionalPadding = getFunctionalProp("padding", headerStyle, col, row, table);
       isValid$1(functionalPadding) && (padding = functionalPadding), (null === (_a = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _a ? void 0 : _a.textAlign) && (textAlign = null === (_b = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _b ? void 0 : _b.textAlign), (null === (_c = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _c ? void 0 : _c.textBaseline) && (textBaseline = null === (_d = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _d ? void 0 : _d.textBaseline);
       const autoRowHeight = table.isAutoRowHeight(row),
         autoColWidth = "auto" === colWidth,
@@ -74391,7 +74454,8 @@
                 return false;
             });
             if (downBarNode) {
-                const taskRecord = downBarNode.record;
+                const taskRecord = scene._gantt.getRecordByIndex(downBarNode.task_index, downBarNode.sub_task_index);
+                downBarNode.record = taskRecord;
                 const isProjectTask = taskRecord?.type === TaskType.PROJECT;
                 if (!isProjectTask) {
                     if (e.target.name === 'task-bar-hover-shadow-left-icon') {
@@ -75128,12 +75192,43 @@
         });
     }
     function syncSortFromTable(gantt) {
-        gantt.taskListTableInstance?.on('after_sort', (args) => {
+        const taskListTableInstance = gantt.taskListTableInstance;
+        if (!taskListTableInstance || taskListTableInstance._vtableGanttSortSyncPatched) {
+            return;
+        }
+        const syncTaskBarsAfterSort = (attempt = 0) => {
             gantt.scenegraph.refreshTaskBars();
+            const taskCount = Math.min(gantt.itemCount ?? 0, 10);
+            const taskKeyField = gantt.parsedOptions.taskKeyField;
+            let taskBarsSynced = true;
+            for (let index = 0; index < taskCount; index++) {
+                const taskBarNode = gantt.scenegraph.taskBar.getTaskBarNodeByIndex(index);
+                const visibleRecord = gantt.getRecordByIndex(index);
+                if (taskBarNode && taskBarNode.record?.[taskKeyField] !== visibleRecord?.[taskKeyField]) {
+                    taskBarsSynced = false;
+                    break;
+                }
+            }
+            if (!taskBarsSynced && attempt < 10) {
+                setTimeout(() => syncTaskBarsAfterSort(attempt + 1), 16);
+                return;
+            }
             const left = gantt.stateManager.scroll.horizontalBarPos;
             const top = gantt.stateManager.scroll.verticalBarPos;
             gantt.scenegraph.setX(-left);
             gantt.scenegraph.setY(-top);
+        };
+        const originalUpdateSortState = taskListTableInstance.updateSortState?.bind(taskListTableInstance);
+        if (originalUpdateSortState) {
+            taskListTableInstance.updateSortState = (...args) => {
+                const result = originalUpdateSortState(...args);
+                syncTaskBarsAfterSort();
+                return result;
+            };
+        }
+        taskListTableInstance._vtableGanttSortSyncPatched = true;
+        taskListTableInstance.on('after_sort', () => {
+            syncTaskBarsAfterSort();
         });
     }
     function syncDragOrderFromTable(gantt) {
@@ -75381,6 +75476,7 @@
             if (target.name === 'task-bar-hover-shadow') {
                 target = target.parent;
             }
+            syncTaskBarNodeRecord(target, this._gantt);
             this.moveTaskBar.moving = true;
             this.moveTaskBar.target = target;
             this.moveTaskBar.targetStartX = target.attribute.x;
@@ -75419,10 +75515,12 @@
                 const newEndDate = new Date(newStartDate.getTime() +
                     (createDateAtMidnight(oldEndDate).getTime() - createDateAtMidnight(oldStartDate).getTime()));
                 let dateChanged;
+                let reorderedTaskShowIndex;
                 if (createDateAtMidnight(oldStartDate).getTime() !== newStartDate.getTime()) {
                     dateChanged = createDateAtMidnight(oldStartDate).getTime() > newStartDate.getTime() ? 'left' : 'right';
                     this._gantt._updateStartEndDateToTaskRecord(newStartDate, newEndDate, taskIndex, sub_task_index);
-                    const newRecord = this._gantt.getRecordByIndex(taskIndex, sub_task_index);
+                    const newRecord = target.record;
+                    reorderedTaskShowIndex = getTaskShowIndexByTaskRecord(newRecord, this._gantt);
                     if (this._gantt.hasListeners(GANTT_EVENT_TYPE.CHANGE_DATE_RANGE)) {
                         this._gantt.fireListeners(GANTT_EVENT_TYPE.CHANGE_DATE_RANGE, {
                             startDate: newRecord[this._gantt.parsedOptions.startDateField],
@@ -75434,7 +75532,7 @@
                         });
                     }
                     const indexs = getTaskIndexsByTaskY(targetEndY, this._gantt);
-                    const newRowIndex = indexs.task_index;
+                    const newRowIndex = isValid$1(reorderedTaskShowIndex) ? reorderedTaskShowIndex : indexs.task_index;
                     if (this._gantt.hasListeners(GANTT_EVENT_TYPE.MOVE_END_TASK_BAR)) {
                         this._gantt.fireListeners(GANTT_EVENT_TYPE.MOVE_END_TASK_BAR, {
                             startDate: newRecord[this._gantt.parsedOptions.startDateField],
@@ -75489,34 +75587,44 @@
                         }
                     }
                     else {
-                        let newX = startDateColIndex >= 1 ? this._gantt.getDateColsWidth(0, startDateColIndex - 1) : 0;
-                        if (target.record.type === TaskType.MILESTONE) {
-                            const milestoneTaskbarHeight = this._gantt.parsedOptions.taskBarMilestoneStyle.width;
-                            newX -= milestoneTaskbarHeight / 2;
+                        if (dateChanged && isValid$1(reorderedTaskShowIndex) && reorderedTaskShowIndex !== taskIndex) {
+                            this._gantt._syncPropsFromTable();
+                            this._gantt.scenegraph.refreshTaskBarsAndGrid();
+                            const left = this._gantt.stateManager.scroll.horizontalBarPos;
+                            const top = this._gantt.stateManager.scroll.verticalBarPos;
+                            this._gantt.scenegraph.setX(-left);
+                            this._gantt.scenegraph.setY(-top);
                         }
-                        moveTaskBar(target, newX - target.attribute.x, targetEndY - target.attribute.y, this);
-                        if (dateChanged === 'right') {
-                            let insertAfterNode = target;
-                            while (insertAfterNode.nextSibling &&
-                                insertAfterNode.nextSibling.attribute.y === target.attribute.y &&
-                                insertAfterNode.nextSibling.record[this._gantt.parsedOptions.startDateField] <=
-                                    target.record[this._gantt.parsedOptions.startDateField]) {
-                                insertAfterNode = insertAfterNode.nextSibling;
-                            }
-                            if (insertAfterNode !== target) {
-                                insertAfterNode.parent.insertAfter(target, insertAfterNode);
+                        else {
+                            let newX = startDateColIndex >= 1 ? this._gantt.getDateColsWidth(0, startDateColIndex - 1) : 0;
+                            if (target.record.type === TaskType.MILESTONE) {
+                                const milestoneTaskbarHeight = this._gantt.parsedOptions.taskBarMilestoneStyle.width;
+                                newX -= milestoneTaskbarHeight / 2;
                             }
-                        }
-                        else if (dateChanged === 'left') {
-                            let insertBeforeNode = target;
-                            while (insertBeforeNode.previousSibling &&
-                                insertBeforeNode.previousSibling.attribute.y === target.attribute.y &&
-                                insertBeforeNode.previousSibling.record[this._gantt.parsedOptions.startDateField] >=
-                                    target.record[this._gantt.parsedOptions.startDateField]) {
-                                insertBeforeNode = insertBeforeNode.previousSibling;
+                            moveTaskBar(target, newX - target.attribute.x, targetEndY - target.attribute.y, this);
+                            if (dateChanged === 'right') {
+                                let insertAfterNode = target;
+                                while (insertAfterNode.nextSibling &&
+                                    insertAfterNode.nextSibling.attribute.y === target.attribute.y &&
+                                    insertAfterNode.nextSibling.record[this._gantt.parsedOptions.startDateField] <=
+                                        target.record[this._gantt.parsedOptions.startDateField]) {
+                                    insertAfterNode = insertAfterNode.nextSibling;
+                                }
+                                if (insertAfterNode !== target) {
+                                    insertAfterNode.parent.insertAfter(target, insertAfterNode);
+                                }
                             }
-                            if (insertBeforeNode !== target) {
-                                insertBeforeNode.parent.insertBefore(target, insertBeforeNode);
+                            else if (dateChanged === 'left') {
+                                let insertBeforeNode = target;
+                                while (insertBeforeNode.previousSibling &&
+                                    insertBeforeNode.previousSibling.attribute.y === target.attribute.y &&
+                                    insertBeforeNode.previousSibling.record[this._gantt.parsedOptions.startDateField] >=
+                                        target.record[this._gantt.parsedOptions.startDateField]) {
+                                    insertBeforeNode = insertBeforeNode.previousSibling;
+                                }
+                                if (insertBeforeNode !== target) {
+                                    insertBeforeNode.parent.insertBefore(target, insertBeforeNode);
+                                }
                             }
                         }
                     }
@@ -75632,6 +75740,7 @@
             gantt.scenegraph.updateNextFrame();
         }
         startResizeTaskBar(target, x, y, startOffsetY, onIconName) {
+            syncTaskBarNodeRecord(target, this._gantt);
             this.resizeTaskBar.onIconName = onIconName;
             this.resizeTaskBar.resizing = true;
             this.resizeTaskBar.target = target;
@@ -75733,6 +75842,7 @@
             this._gantt.scenegraph.updateNextFrame();
         }
         startAdjustProgressBar(target, x, y) {
+            syncTaskBarNodeRecord(target, this._gantt);
             if (!target || !target.record) {
                 return;
             }
@@ -76164,6 +76274,27 @@
             }
         }
     }
+    function syncTaskBarNodeRecord(target, gantt) {
+        if (!target) {
+            return;
+        }
+        target.record = gantt.getRecordByIndex(target.task_index, target.sub_task_index);
+    }
+    function getTaskShowIndexByTaskRecord(record, gantt) {
+        if (!record) {
+            return undefined;
+        }
+        const taskKeyField = gantt.parsedOptions.taskKeyField;
+        const taskKey = record?.[taskKeyField];
+        if (!isValid$1(taskKey)) {
+            return undefined;
+        }
+        const matchedRecord = findRecordByTaskKey(gantt.records, taskKeyField, taskKey);
+        if (!matchedRecord) {
+            return undefined;
+        }
+        return gantt.getTaskShowIndexByRecordIndex(matchedRecord.index);
+    }
     function moveTaskBar(target, dx, dy, state) {
         const taskIndex = target.task_index;
         const sub_task_index = target.sub_task_index;
@@ -78052,6 +78183,23 @@
         _updateRecordToListTable(record, index) {
             this.taskListTableInstance.updateRecords([record], [index]);
         }
+        _refreshSortedTaskBarsAfterRecordUpdate(recordIndex, taskShowIndex) {
+            const sortState = this.taskListTableInstance?.sortState;
+            if (!sortState || (Array.isArray(sortState) && sortState.length === 0)) {
+                return false;
+            }
+            const nextTaskShowIndex = this.getTaskShowIndexByRecordIndex(recordIndex);
+            if (!isValid$1(nextTaskShowIndex) || nextTaskShowIndex === taskShowIndex) {
+                return false;
+            }
+            this._syncPropsFromTable();
+            this.scenegraph.refreshTaskBarsAndGrid();
+            const left = this.stateManager.scroll.horizontalBarPos;
+            const top = this.stateManager.scroll.verticalBarPos;
+            this.scenegraph.setX(-left);
+            this.scenegraph.setY(-top);
+            return true;
+        }
         getTaskInfoByTaskListIndex(taskShowIndex, sub_task_index) {
             const taskRecord = this.getRecordByIndex(taskShowIndex, sub_task_index);
             const isMilestone = taskRecord?.type;
@@ -78154,11 +78302,12 @@
             const newStartDate = formatDate(startDate, dateFormat);
             taskRecord[startDateField] = newStartDate;
             if (!isValid$1(sub_task_index)) {
-                const indexs = this.getRecordIndexByTaskShowIndex(index);
-                this._updateRecordToListTable(taskRecord, indexs);
-                if (Array.isArray(indexs)) {
-                    this.stateManager.updateProjectTaskTimes(indexs);
+                const recordIndex = this.getRecordIndexByTaskShowIndex(index);
+                this._updateRecordToListTable(taskRecord, Array.isArray(recordIndex) ? recordIndex : index);
+                if (Array.isArray(recordIndex)) {
+                    this.stateManager.updateProjectTaskTimes(recordIndex);
                 }
+                this._refreshSortedTaskBarsAfterRecordUpdate(recordIndex, index);
             }
             else if (Array.isArray(sub_task_index)) {
                 this.stateManager.updateProjectTaskTimes(sub_task_index);
@@ -78171,11 +78320,12 @@
             const newEndDate = formatDate(endDate, dateFormat);
             taskRecord[endDateField] = newEndDate;
             if (!isValid$1(sub_task_index)) {
-                const indexs = this.getRecordIndexByTaskShowIndex(index);
-                this._updateRecordToListTable(taskRecord, indexs);
-                if (Array.isArray(indexs)) {
-                    this.stateManager.updateProjectTaskTimes(indexs);
+                const recordIndex = this.getRecordIndexByTaskShowIndex(index);
+                this._updateRecordToListTable(taskRecord, Array.isArray(recordIndex) ? recordIndex : index);
+                if (Array.isArray(recordIndex)) {
+                    this.stateManager.updateProjectTaskTimes(recordIndex);
                 }
+                this._refreshSortedTaskBarsAfterRecordUpdate(recordIndex, index);
             }
             else if (Array.isArray(sub_task_index)) {
                 this.stateManager.updateProjectTaskTimes(sub_task_index);
@@ -78191,11 +78341,12 @@
             const newEndDate = formatDate(endDate, dateFormat);
             taskRecord[endDateField] = newEndDate;
             if (!isValid$1(sub_task_index)) {
-                const indexs = this.getRecordIndexByTaskShowIndex(index);
-                this._updateRecordToListTable(taskRecord, indexs);
-                if (Array.isArray(indexs)) {
-                    this.stateManager.updateProjectTaskTimes(indexs);
+                const recordIndex = this.getRecordIndexByTaskShowIndex(index);
+                this._updateRecordToListTable(taskRecord, Array.isArray(recordIndex) ? recordIndex : index);
+                if (Array.isArray(recordIndex)) {
+                    this.stateManager.updateProjectTaskTimes(recordIndex);
                 }
+                this._refreshSortedTaskBarsAfterRecordUpdate(recordIndex, index);
             }
             else if (Array.isArray(sub_task_index)) {
                 this.stateManager.updateProjectTaskTimes(sub_task_index);
@@ -78206,9 +78357,11 @@
             const progressField = this.parsedOptions.progressField;
             if (progressField) {
                 taskRecord[progressField] = progress;
-                const indexs = this.getRecordIndexByTaskShowIndex(index);
-                this._updateRecordToListTable(taskRecord, indexs);
-                this._refreshTaskBar(index, sub_task_index);
+                const recordIndex = this.getRecordIndexByTaskShowIndex(index);
+                this._updateRecordToListTable(taskRecord, Array.isArray(recordIndex) ? recordIndex : index);
+                if (!this._refreshSortedTaskBarsAfterRecordUpdate(recordIndex, index)) {
+                    this._refreshTaskBar(index, sub_task_index);
+                }
             }
         }
         _dragOrderTaskRecord(source_index, source_sub_task_index, target_index, target_sub_task_index) {