@kdcloudjs/table 1.2.0-canary.9 → 1.2.0

package/dist/@kdcloudjs/table.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/table v1.2.0-canary.8
+ *   @kdcloudjs/table v1.1.6
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -304,7 +304,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!******************************!*\
   !*** ./components/index.tsx ***!
   \******************************/
-/*! exports provided: ConfigProvider, Table, TableProps, PrimaryKey, LoadingContentWrapperProps, Classes, TableCSSVariables, collectNodes, getTreeDepth, groupBy, isLeafNode, isGroupColumn, applyTransforms, buildTree, exportTableAsExcel, layeredSort, mergeCellProps, proto, makeRecursiveMapper, smartCompare, traverseColumn, copyDataToClipboard, executeOnTempElement, layeredFilter, getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds, console, browserType, makeAutoRowSpanTransform, useAutoWidthTransform, makeBuildTreeTransform, makeColumnHoverTransform, ColumnHoverOptions, useColumnHoverTransform, makeColumnRangeHoverTransform, ColumnRangeHoverOptions, useColumnHoverRangeTransform, makeColumnResizeTransform, ColumnResizeOptions, useColumnResizeTransform, makeFlattenTransform, makeOrderFieldTransform, makeSortTransform, SortHeaderCellProps, SortOptions, useSortTransform, makeTipsTransform, TipsOptions, makeTreeModeTransform, TreeModeOptions, useTreeModeTransform, makeVisibleTransform, TablePipeline, useTablePipeline, features, internals */
+/*! exports provided: ConfigProvider, Table, TableProps, PrimaryKey, LoadingContentWrapperProps, Classes, TableCSSVariables, collectNodes, getTreeDepth, groupBy, isLeafNode, isGroupColumn, applyTransforms, buildTree, exportTableAsExcel, layeredSort, mergeCellProps, proto, makeRecursiveMapper, smartCompare, traverseColumn, copyDataToClipboard, executeOnTempElement, layeredFilter, getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds, console, browserType, MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn, makeAutoRowSpanTransform, useAutoWidthTransform, makeBuildTreeTransform, makeColumnHoverTransform, ColumnHoverOptions, useColumnHoverTransform, makeColumnRangeHoverTransform, ColumnRangeHoverOptions, useColumnHoverRangeTransform, makeColumnResizeTransform, ColumnResizeOptions, useColumnResizeTransform, makeFlattenTransform, makeOrderFieldTransform, makeSortTransform, SortHeaderCellProps, SortOptions, useSortTransform, makeTipsTransform, TipsOptions, makeTreeModeTransform, TreeModeOptions, useTreeModeTransform, makeVisibleTransform, TablePipeline, useTablePipeline, features, internals */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -375,6 +375,12 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "browserType", function() { return _table__WEBPACK_IMPORTED_MODULE_1__["browserType"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MULTI_SELECT_MARK_PROPNAME", function() { return _table__WEBPACK_IMPORTED_MODULE_1__["MULTI_SELECT_MARK_PROPNAME"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SINGLE_SELECT_MARK_PROPNAME", function() { return _table__WEBPACK_IMPORTED_MODULE_1__["SINGLE_SELECT_MARK_PROPNAME"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "isSelectColumn", function() { return _table__WEBPACK_IMPORTED_MODULE_1__["isSelectColumn"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "makeAutoRowSpanTransform", function() { return _table__WEBPACK_IMPORTED_MODULE_1__["makeAutoRowSpanTransform"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useAutoWidthTransform", function() { return _table__WEBPACK_IMPORTED_MODULE_1__["useAutoWidthTransform"]; });
@@ -1670,7 +1676,8 @@ function calculateHeaderRenderInfo(_ref, rowCount) {
 function TableHeader(_ref2) {
   var info = _ref2.info,
       theaderPosition = _ref2.theaderPosition,
-      _rowCount = _ref2.rowCount;
+      _rowCount = _ref2.rowCount,
+      stickyRightOffset = _ref2.stickyRightOffset;
   var nested = info.nested,
       flat = info.flat,
       stickyLeftMap = info.stickyLeftMap,
@@ -1712,7 +1719,8 @@ function TableHeader(_ref2) {
           positionStyle.left = stickyLeftMap.get(colIndex);
         } else if (colIndex >= fullFlatCount - rightFlatCount) {
           positionStyle.position = 'sticky';
-          positionStyle.right = stickyRightMap.get(colIndex);
+          var stickyRightIndex = colSpan > 1 ? colIndex + colSpan - 1 : colIndex;
+          positionStyle.right = stickyRightMap.get(stickyRightIndex) + stickyRightOffset;
         }
 
         var justifyContent = col.align === 'right' ? 'flex-end' : col.align === 'center' ? 'center' : 'flex-start';
@@ -1991,7 +1999,9 @@ var TableDOMHelper = /*#__PURE__*/function () {
     this.tableFooter = this.artTable.querySelector(".".concat(_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].tableFooter));
     this.tableFooterMain = this.artTable.querySelector(".".concat(_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].tableFooterMain));
     var stickyScrollSelector = ".".concat(_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].artTable, " + .").concat(_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].horizontalStickyScrollContainer, " .").concat(_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].stickyScroll);
-    this.stickyScroll = artTableWrapper.querySelector(stickyScrollSelector);
+    var stickyScrolls = artTableWrapper.querySelectorAll(stickyScrollSelector);
+    this.stickyScroll = stickyScrolls[stickyScrolls.length - 1]; // 当嵌套多层表格时，需要查找最后一个，否则会查找到父表格内嵌套的子表格的
+
     this.stickyScrollItem = this.stickyScroll.querySelector(".".concat(_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].stickyScrollItem));
   }
 
@@ -2672,7 +2682,7 @@ function HtmlTable(_ref) {
       positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
     } else if (colIndex >= fullFlatCount - rightFlatCount) {
       positionStyle.position = 'sticky';
-      positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - (typeof stickyRightOffset === 'number' ? stickyRightOffset : 0);
+      positionStyle.right = hozInfo.stickyRightMap.get(colIndex) + (typeof stickyRightOffset === 'number' ? stickyRightOffset : 0);
     }
 
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_14___default.a.createElement('td', _objectSpread(_objectSpread(_objectSpread({
@@ -2895,7 +2905,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var TEMPLATES = new Map();
 
-function renderTableHeaderInIE(info, props) {
+function renderTableHeaderInIE(info, props, extra) {
   var stickyTop = props.stickyTop,
       hasHeader = props.hasHeader;
   var flat = info.flat,
@@ -2908,6 +2918,9 @@ function renderTableHeaderInIE(info, props) {
       rightNested = nested.right,
       full = nested.full;
   var rowCount = Object(_utils__WEBPACK_IMPORTED_MODULE_23__["getTreeDepth"])(full) + 1;
+  var fixedRightTableStyle = {
+    right: (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) || 0
+  };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
     className: classnames__WEBPACK_IMPORTED_MODULE_19___default()(_styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].tableHeader)
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
@@ -2919,6 +2932,11 @@ function renderTableHeaderInIE(info, props) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(_header__WEBPACK_IMPORTED_MODULE_24__["default"], {
     info: info,
     theaderPosition: hasLockColumn ? 'center' : undefined
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
+    className: _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].verticalScrollPlaceholder,
+    style: typeof (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) === 'number' ? {
+      width: extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset
+    } : undefined
   })), left.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
     className: _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].fixedLeft
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(_header__WEBPACK_IMPORTED_MODULE_24__["default"], {
@@ -2947,7 +2965,8 @@ function renderTableHeaderInIE(info, props) {
     theaderPosition: "left",
     rowCount: rowCount
   })) : null, right.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
-    className: _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].fixedRight
+    className: _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].fixedRight,
+    style: fixedRightTableStyle
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(_header__WEBPACK_IMPORTED_MODULE_24__["default"], {
     info: _objectSpread(_objectSpread({}, info), {}, {
       flat: {
@@ -3001,9 +3020,6 @@ function renderTableBodyInIE(info, props, extra) {
     primaryKey: primaryKey,
     data: dataSource.slice(topIndex, bottomIndex)
   };
-  var fixedRightTableStyle = {
-    right: -extra.stickyRightOffset
-  };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
     className: classnames__WEBPACK_IMPORTED_MODULE_19___default()(_styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].tableBody, _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].horizontalScrollContainer)
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
@@ -3056,8 +3072,7 @@ function renderTableBodyInIE(info, props, extra) {
       height: bottomBlank
     }
   })) : null, right.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
-    className: _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].fixedRight,
-    style: fixedRightTableStyle
+    className: _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].fixedRight
   }, topBlank > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
     key: "top-blank",
     className: classnames__WEBPACK_IMPORTED_MODULE_19___default()(_styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].virtualBlank, 'top'),
@@ -3068,7 +3083,6 @@ function renderTableBodyInIE(info, props, extra) {
     tbodyHtmlTag: "tbody"
   }, commonProps, {
     tbodyPosition: "right",
-    stickyRightOffset: extra.stickyRightOffset,
     horizontalRenderInfo: _objectSpread(_objectSpread({}, info), {}, {
       flat: {
         center: right,
@@ -3116,6 +3130,9 @@ function renderTableFooterInIE(info, props, extra) {
     primaryKey: primaryKey,
     verticalRenderInfo: verticalRenderInfo
   };
+  var fixedRightTableStyle = {
+    right: (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) || 0
+  };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
     className: classnames__WEBPACK_IMPORTED_MODULE_19___default()(_styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].tableFooter),
     style: {
@@ -3128,7 +3145,13 @@ function renderTableFooterInIE(info, props, extra) {
   }, commonProps, {
     tbodyPosition: hasLockColumn ? 'center' : undefined,
     horizontalRenderInfo: info
-  }))), left.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
+  })), footerDataSource.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
+    className: _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].verticalScrollPlaceholder,
+    style: typeof (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) === 'number' ? {
+      width: extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset,
+      visibility: 'initial'
+    } : undefined
+  }) : null), left.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
     className: _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].fixedLeft
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(_html_table__WEBPACK_IMPORTED_MODULE_20__["HtmlTable"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_6___default()({
     tbodyHtmlTag: "tfoot"
@@ -3144,7 +3167,8 @@ function renderTableFooterInIE(info, props, extra) {
       visible: visible.slice(0, left.length)
     })
   }))) : null, right.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
-    className: _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].fixedRight
+    className: _styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].fixedRight,
+    style: fixedRightTableStyle
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(_html_table__WEBPACK_IMPORTED_MODULE_20__["HtmlTable"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_6___default()({
     tbodyHtmlTag: "tfoot"
   }, commonProps, {
@@ -3326,7 +3350,14 @@ var Classes = {
   collapsed: "".concat(prefix, "collapsed"),
   popup: "".concat(prefix, "popup"),
   popupHeader: "".concat(prefix, "popup-header"),
-  popupBody: "".concat(prefix, "popup-body")
+  popupBody: "".concat(prefix, "popup-body"),
+  rowDragging: "".concat(prefix, "row-dragging"),
+  rowDragStart: "".concat(prefix, "row-drag-start"),
+  rowDragEnd: "".concat(prefix, "row-drag-end"),
+  rowDragEndToTop: "".concat(prefix, "row-drag-end-to-top"),
+  rowDragEndToBottom: "".concat(prefix, "row-drag-end-to-bottom"),
+  rowDragElement: "".concat(prefix, "row-drag-element"),
+  rowDragCell: "".concat(prefix, "row-drag-cell")
 };
 var MenuClasses = {
   menu: "".concat(prefix, "table-menu"),
@@ -3378,7 +3409,7 @@ var defaultCSSVariables = {
 var variableConst = getCssVariableText(defaultCSSVariables);
 var notBorderedStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject2 || (_templateObject2 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  --cell-border-vertical: none;\n  --header-cell-border-vertical: none;\n"])));
 var borderedStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject3 || (_templateObject3 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  //th\u9690\u85CF\u5217\u5BBD\u62D6\u62FD\u7684\u80CC\u666F\u8272\uFF0C\u4F7F\u7528th\u7684\u53F3\u8FB9\u6846\u4EE3\u66FF\n  .", "::after{\n    background-color: inherit;\n  }\n"])), Classes.tableHeaderCellResize);
-var StyledArtTableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject4 || (_templateObject4 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  :root {\n    ", "\n  }\n  ", "\n\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  cursor: default;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  position: relative;\n\n  // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n  &.use-outer-border {\n    ", ";\n  }\n\n  // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n  &:not(.", ") {\n    ", "\n  }\n  &.", "{\n    ", "\n  }\n\n  .no-scrollbar {\n    ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .", " {\n    overflow: auto;\n    flex-shrink: 1;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .", " {\n    overflow: hidden;\n    background: var(--header-bgcolor);\n    display: flex;\n    flex-shrink: 0;\n    border-bottom: var(--header-cell-border-horizontal);\n  }\n\n  .", " {\n    display: flex;\n    // justify-content: flex-start;\n    align-items: center;\n    height: inherit;\n  }\n\n  .", " {\n     overflow-x:auto;\n     flex-shrink: 0;\n     flex-grow: 0;\n     scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n     & {\n       ::-webkit-scrollbar {\n         display:none;\n       }\n     }\n   }\n\n  .", " {\n    display: flex;\n    flex: none;\n  }\n  .", ", .", " {\n    background: var(--bgcolor);\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-anchor: none;\n    position:relative;\n    &.empty {\n      position: relative;\n    }\n  }\n\n  .", " {\n    position: relative;\n  }\n  .", ", .", "  {\n    .", "{\n      background-color: #e6effb !important;\n    }\n    .", "{\n      border-top: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-left: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-bottom: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-right: 1px solid #0E5FD8 !important;\n    }\n  }\n\n  .", " {\n    user-select:none;\n  }\n\n\n  &.sticky-header .", " {\n    position: sticky;\n    top: 0;\n    z-index: ", ";\n  }\n\n  &.sticky-footer .", " {\n    position: sticky;\n    bottom: 0;\n    z-index: ", ";\n  }\n\n  table {\n    width: 0;\n    table-layout: fixed;\n    border-collapse: separate;\n    border-spacing: 0;\n    display: table;\n    margin: 0;\n    padding: 0;\n    flex-shrink: 0;\n    flex-grow: 0;\n    position:relative;\n  }\n\n  // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n  tr:not(.no-hover):hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n  tr:not(.no-hover).row-hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n  // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n  tr:not(.no-highlight).highlight > td {\n    background: var(--highlight-bgcolor);\n  }\n\n  th {\n    font-weight: normal;\n    text-align: left;\n    padding: var(--cell-padding);\n    height: var(--header-row-height);\n    color: var(--header-color);\n    background: var(--header-bgcolor);\n    border:1px solid transparent;\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: var(--header-cell-border-horizontal);\n    position: relative;\n  }\n\n  th.resizeable{\n    border-right: var(--header-cell-border-vertical)\n  }\n\n  th.", " {\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: none;\n  }\n\n  tr.", " th {\n    border-top: var(--header-cell-border-horizontal);\n  }\n  th.", " {\n    border-left: var(--header-cell-border-vertical);\n  }\n\n  td {\n    padding: var(--cell-padding);\n    background: var(--bgcolor);\n    height: var(--row-height);\n    border:1px solid transparent;\n    border-right: var(--cell-border-vertical);\n    border-bottom: var(--cell-border-horizontal);\n    word-break: break-all;\n  }\n  td.", " {\n    border-left: var(--cell-border-vertical);\n  }\n  tr.", " td {\n    border-top: var(--cell-border-horizontal);\n  }\n  &.has-header tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tbody tr.", " td {\n    border-bottom: none;\n  }\n\n  .", ",\n  .", " {\n    z-index: ", ";\n  }\n\n  //#region \u9501\u5217\u9634\u5F71\n  .", " {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: ", ";\n    pointer-events: none;\n    overflow: hidden;\n\n    .", " {\n      height: 100%;\n    }\n\n    .", " {\n      margin-right: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-right: var(--cell-border-vertical);\n      }\n    }\n\n    .", " {\n      margin-left: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-left: var(--cell-border-vertical);\n      }\n    }\n  }\n  //#endregion\n\n  //#region \u7A7A\u8868\u683C\u5C55\u73B0\n  .", " {\n    pointer-events: none;\n    color: #99a3b3;\n    font-size: 12px;\n    text-align: center;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    .empty-image {\n      width: 50px;\n      height: 50px;\n    }\n\n    .empty-tips {\n      margin-top: 16px;\n      line-height: 1.5;\n    }\n  }\n  //#endregion\n\n  //#region IE\u517C\u5BB9\n  &.ie-polyfill-wrapper {\n    //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n    .", " {\n      overflow-x: hidden;\n    }\n    .", ", .", " {\n      position:relative;\n    }\n    .", " {\n      overflow: hidden;\n    }\n    .", " {\n      position: relative;\n    }\n\n    .", " {\n      overflow: auto;\n      overflow-x: hidden;\n      overflow-anchor: none;\n    }\n\n    .", ", .", "{\n      position: absolute;\n      z-index: ", ";\n      top: 0;\n    }\n    .", "{\n      left:0;\n    }\n    .", "{\n      right:0;\n    }\n\n    .", "{\n      .", "{\n        position: absolute;\n        top: 0;\n        width: 100%;\n        z-index: ", ";\n      }\n    }\n\n    tr:not(.no-hover).row-hover > td {\n      background: var(--hover-bgcolor);\n    }\n  }\n  //#endregion\n\n  //#region \u7C98\u6027\u6EDA\u52A8\u6761\n  .", "{\n    display:flex;\n    background: var(--bgcolor);\n  }\n  .", "{\n    height: 1px;\n    flex-shrink: 0;\n    border-top: 1px solid var(--border-color);\n  }\n\n  .", "{\n    height: 1px;\n    flex-shrink: 0;\n    border-top: 1px solid var(--border-color);\n  }\n  .", " {\n    overflow-y: hidden;\n    overflow-x: auto;\n    z-index: ", ";\n    flex-shrink: 1;\n    flex-grow: 0;\n    border-top: 1px solid var(--border-color);\n  }\n\n  .", " {\n    // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n    height: 1px;\n    visibility: hidden;\n  }\n  //#endregion\n\n  //#region \u52A0\u8F7D\u6837\u5F0F\n  .", " {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n\n    .", " {\n      filter: none;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n      display: flex;\n      position: relative;\n      flex-direction: column;\n    }\n\n    .", " {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      pointer-events: none;\n    }\n\n    .", " {\n      position: sticky;\n      z-index: ", ";\n      transform: translateY(-50%);\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u8FC7\u6EE4\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n    padding: 6px 4px;\n    &:hover{\n      background-color: #e5e5e5;\n    }\n    &:focus {\n      outline: none\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u6392\u5E8F\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n  .", " {\n    visibility: hidden;\n    flex-shrink: 0;\n  }\n  .", " .", " {\n    border-top: var(--cell-border-horizontal);\n  }\n  //#endregion\n\n  //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n  .", "::after{\n    background-color: var(--border-color);\n  }\n  //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n  .", " th.", " .", "{\n    right: 0;\n    width: 5px;\n    &::after{\n      left: 4px;\n    }\n  }\n  //#endregion\n\n  "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
+var StyledArtTableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject4 || (_templateObject4 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  :root {\n    ", "\n  }\n  ", "\n\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  cursor: default;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  position: relative;\n\n  // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n  &.use-outer-border {\n    ", ";\n  }\n\n  // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n  &:not(.", ") {\n    ", "\n  }\n  &.", "{\n    ", "\n  }\n\n  .no-scrollbar {\n    ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .", " {\n    overflow: auto;\n    flex-shrink: 1;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .", " {\n    overflow: hidden;\n    background: var(--header-bgcolor);\n    display: flex;\n    flex-shrink: 0;\n    border-bottom: var(--header-cell-border-horizontal);\n  }\n\n  .", " {\n    display: flex;\n    // justify-content: flex-start;\n    align-items: center;\n    height: inherit;\n  }\n\n  .", " {\n     overflow-x:auto;\n     flex-shrink: 0;\n     flex-grow: 0;\n     scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n     & {\n       ::-webkit-scrollbar {\n         display:none;\n       }\n     }\n   }\n\n  .", " {\n    display: flex;\n    flex: none;\n  }\n  .", ", .", " {\n    background: var(--bgcolor);\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-anchor: none;\n    position:relative;\n    &.empty {\n      position: relative;\n    }\n  }\n\n  .", " {\n    position: relative;\n  }\n  .", ", .", "  {\n    .", "{\n      background-color: #e6effb !important;\n    }\n    .", "{\n      border-top: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-left: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-bottom: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-right: 1px solid #0E5FD8 !important;\n    }\n  }\n\n  .", " {\n    user-select:none;\n  }\n\n  .", " {\n    user-select:none;\n    .", " .", " >td{\n        cursor:move;\n    }\n\n    .", " .", " >td{\n        cursor:no-drop;\n    }\n    \n  }\n\n  .", "{\n    opacity: 0.5;\n  }\n\n\n  .", " td{\n    border-top: 1px solid var(--primary-color) !important;\n  }\n\n  .", " td{\n    border-bottom: 1px solid var(--primary-color) !important;\n   \n  }\n\n  .", " {\n    cursor:pointer;\n  }\n\n\n  &.sticky-header .", " {\n    position: sticky;\n    top: 0;\n    z-index: ", ";\n  }\n\n  &.sticky-footer .", " {\n    position: sticky;\n    bottom: 0;\n    z-index: ", ";\n  }\n\n  table {\n    width: 0;\n    table-layout: fixed;\n    border-collapse: separate;\n    border-spacing: 0;\n    display: table;\n    margin: 0;\n    padding: 0;\n    flex-shrink: 0;\n    flex-grow: 0;\n    position:relative;\n  }\n\n  // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n  tr:not(.no-hover):hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n  tr:not(.no-hover).row-hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n  // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n  tr:not(.no-highlight).highlight > td {\n    background: var(--highlight-bgcolor);\n  }\n\n  th {\n    font-weight: normal;\n    text-align: left;\n    padding: var(--cell-padding);\n    height: var(--header-row-height);\n    color: var(--header-color);\n    background: var(--header-bgcolor);\n    border:1px solid transparent;\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: var(--header-cell-border-horizontal);\n    position: relative;\n  }\n\n  th.resizeable{\n    border-right: var(--header-cell-border-vertical)\n  }\n\n  th.", " {\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: none;\n  }\n\n  tr.", " th {\n    border-top: var(--header-cell-border-horizontal);\n  }\n  th.", " {\n    border-left: var(--header-cell-border-vertical);\n  }\n\n  td {\n    padding: var(--cell-padding);\n    background: var(--bgcolor);\n    height: var(--row-height);\n    border:1px solid transparent;\n    border-right: var(--cell-border-vertical);\n    border-bottom: var(--cell-border-horizontal);\n    word-break: break-all;\n  }\n  td.", " {\n    border-left: var(--cell-border-vertical);\n  }\n  tr.", " td {\n    border-top: var(--cell-border-horizontal);\n  }\n  &.has-header tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tbody tr.", " td {\n    border-bottom: none;\n  }\n\n  .", ",\n  .", " {\n    z-index: ", ";\n  }\n\n  //#region \u9501\u5217\u9634\u5F71\n  .", " {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: ", ";\n    pointer-events: none;\n    overflow: hidden;\n\n    .", " {\n      height: 100%;\n    }\n\n    .", " {\n      margin-right: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-right: var(--cell-border-vertical);\n      }\n    }\n\n    .", " {\n      margin-left: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-left: var(--cell-border-vertical);\n      }\n    }\n  }\n  //#endregion\n\n  //#region \u7A7A\u8868\u683C\u5C55\u73B0\n  .", " {\n    pointer-events: none;\n    color: #99a3b3;\n    font-size: 12px;\n    text-align: center;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    .empty-image {\n      width: 50px;\n      height: 50px;\n    }\n\n    .empty-tips {\n      margin-top: 16px;\n      line-height: 1.5;\n    }\n  }\n  //#endregion\n\n  //#region IE\u517C\u5BB9\n  &.ie-polyfill-wrapper {\n    //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n    .", " {\n      overflow-x: hidden;\n    }\n    .", ", .", " {\n      position:relative;\n    }\n    .", " {\n      overflow: hidden;\n      display: flex;\n    }\n    .", " {\n      position: relative;\n    }\n\n    .", " {\n      display: flex;\n      overflow: auto;\n      overflow-x: hidden;\n      overflow-anchor: none;\n    }\n\n    .", ", .", "{\n      position: absolute;\n      z-index: ", ";\n      top: 0;\n    }\n    .", "{\n      left:0;\n    }\n    .", "{\n      right:0;\n    }\n\n    .", "{\n      .", "{\n        position: absolute;\n        top: 0;\n        width: 100%;\n        z-index: ", ";\n      }\n    }\n\n    tr:not(.no-hover).row-hover > td {\n      background: var(--hover-bgcolor);\n    }\n  }\n  //#endregion\n\n  //#region \u7C98\u6027\u6EDA\u52A8\u6761\n  .", "{\n    display:flex;\n    background: var(--bgcolor);\n  }\n  .", "{\n    height: 1px;\n    flex-shrink: 0;\n    border-top: 1px solid var(--border-color);\n  }\n\n  .", "{\n    height: 1px;\n    flex-shrink: 0;\n    border-top: 1px solid var(--border-color);\n  }\n  .", " {\n    overflow-y: hidden;\n    overflow-x: auto;\n    z-index: ", ";\n    flex-shrink: 1;\n    flex-grow: 0;\n    border-top: 1px solid var(--border-color);\n  }\n\n  .", " {\n    // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n    height: 1px;\n    visibility: hidden;\n  }\n  //#endregion\n\n  //#region \u52A0\u8F7D\u6837\u5F0F\n  .", " {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n\n    .", " {\n      filter: none;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n      display: flex;\n      position: relative;\n      flex-direction: column;\n    }\n\n    .", " {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      pointer-events: none;\n    }\n\n    .", " {\n      position: sticky;\n      z-index: ", ";\n      transform: translateY(-50%);\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u8FC7\u6EE4\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n    padding: 6px 4px;\n    &:hover{\n      background-color: #e5e5e5;\n    }\n    &:focus {\n      outline: none\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u6392\u5E8F\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n  .", " {\n    visibility: hidden;\n    flex-shrink: 0;\n  }\n  .", " .", " {\n    border-top: var(--cell-border-horizontal);\n  }\n  //#endregion\n\n  //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n  .", "::after{\n    background-color: var(--border-color);\n  }\n  //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n  .", " th.", " .", "{\n    right: 0;\n    width: 5px;\n    &::after{\n      left: 4px;\n    }\n  }\n  //#endregion\n\n  "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndToTop, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
 var ButtonCSS = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject5 || (_templateObject5 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  ", "\n  //#region \u6309\u94AE\n  .", "{\n    color: var(--color);\n    background:#ffffff;\n    border:1px solid var(--strong-border-color);\n    border-radius: 2px;\n    cursor: pointer;\n    &:hover{\n      color: var(--primary-color);\n      border:1px solid var(--primary-color);\n    }\n  }\n  .", " {\n    color:#ffffff;\n    background-color: var(--primary-color);\n    border:none;\n    &:hover{\n      color:#ffffff;\n      background-color: var(--primary-color-level2);\n      border:none;\n    }\n  }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
 
 function getCssVariableText(obj) {
@@ -3551,7 +3582,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
 
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_18___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14___default()(_this), "domHelper", void 0);
 
-    _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_18___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14___default()(_this), "rootSubscription", new rxjs__WEBPACK_IMPORTED_MODULE_28__["Subscription"]());
+    _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_18___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14___default()(_this), "rootSubscription", void 0);
+
+    _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_18___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14___default()(_this), "resizeSubject", void 0);
 
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_18___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14___default()(_this), "lastInfo", void 0);
 
@@ -3561,8 +3594,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
 
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_18___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14___default()(_this), "resizeObserver", void 0);
 
-    _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_18___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14___default()(_this), "resizeSubject", new rxjs__WEBPACK_IMPORTED_MODULE_28__["Subject"]());
-
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_18___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14___default()(_this), "offsetY", 0);
 
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_18___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14___default()(_this), "handleRowMouseEnter", function (e) {
@@ -3629,7 +3660,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           bottomBlank = _info$verticalRenderR.bottomBlank,
           topBlank = _info$verticalRenderR.topBlank,
           bottomIndex = _info$verticalRenderR.bottomIndex;
-      var stickyRightOffset = _this.hasScrollY ? _this.getScrollBarWidth() : 0;
       var renderBody = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_41__["default"])('body');
 
       if (typeof renderBody === 'function') {
@@ -3637,8 +3667,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           rowProps: {
             onMouseEnter: _this.handleRowMouseEnter,
             onMouseLeave: _this.handleRowMouseLeave
-          },
-          stickyRightOffset: stickyRightOffset
+          }
         });
       }
 
@@ -3659,7 +3688,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         getRowProps: getRowProps,
         primaryKey: primaryKey,
         data: dataSource.slice(topIndex, bottomIndex),
-        stickyRightOffset: stickyRightOffset,
         horizontalRenderInfo: info,
         verticalRenderInfo: {
           first: 0,
@@ -3718,6 +3746,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       var tableBodyHtmlTable = this.domHelper.getTableBodyHtmlTable();
       var innerTableWidth = tableBodyHtmlTable.offsetWidth;
       var artTableWidth = artTable.offsetWidth;
+      var artTableHeight = artTable.offsetHeight; // 表格隐藏后，不需要对表格的滚动条做额外的逻辑处理
+
+      if (artTableWidth === 0 && artTableHeight === 0) return;
       var stickyScrollHeightProp = this.props.stickyScrollHeight;
       var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
       // 设置滚动条高度
@@ -3747,10 +3778,10 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         //   }
         this.hasScrollY = true;
       } else {
-        stickyScroll.style.paddingRight = "".concat(stickyScrollHeight, "px"); //   this.setState({
+        // stickyScroll.style.paddingRight = `${stickyScrollHeight}px`
+        //   this.setState({
         //     hasScrollY: false
         //   })
-
         this.hasScrollY = false;
       }
 
@@ -3763,9 +3794,10 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       var _this$lastInfo = this.lastInfo,
           leftLockTotalWidth = _this$lastInfo.leftLockTotalWidth,
           rightLockTotalWidth = _this$lastInfo.rightLockTotalWidth;
-      var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth; // 设置子节点宽度
+      var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth;
+      var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0; // 设置子节点宽度
 
-      stickyScrollItem.style.width = "".concat(innerTableWidth - lockTotalWidth, "px");
+      stickyScrollItem.style.width = "".concat(innerTableWidth - lockTotalWidth + stickyRightOffset, "px");
     }
   }, {
     key: "renderTableHeader",
@@ -3774,9 +3806,12 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           stickyTop = _this$props4.stickyTop,
           hasHeader = _this$props4.hasHeader;
       var renderHeader = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_41__["default"])('header');
+      var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
 
       if (typeof renderHeader === 'function') {
-        return renderHeader(info, this.props);
+        return renderHeader(info, this.props, {
+          stickyRightOffset: stickyRightOffset
+        });
       }
 
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement("div", {
@@ -3786,7 +3821,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           display: hasHeader ? undefined : 'none'
         }
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement(_header__WEBPACK_IMPORTED_MODULE_32__["default"], {
-        info: info
+        info: info,
+        stickyRightOffset: stickyRightOffset
       }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement("div", {
         className: _styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].verticalScrollPlaceholder,
         style: this.hasScrollY ? {
@@ -3866,6 +3902,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           getRowProps = _this$props5.getRowProps,
           primaryKey = _this$props5.primaryKey,
           stickyBottom = _this$props5.stickyBottom;
+      var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
       var renderFooter = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_41__["default"])('footer');
 
       if (typeof renderFooter === 'function') {
@@ -3873,7 +3910,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           rowProps: {
             onMouseEnter: this.handleRowMouseEnter,
             onMouseLeave: this.handleRowMouseLeave
-          }
+          },
+          stickyRightOffset: stickyRightOffset
         });
       }
 
@@ -3887,6 +3925,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         data: footerDataSource,
         horizontalRenderInfo: info,
         getRowProps: getRowProps,
+        stickyRightOffset: stickyRightOffset,
         primaryKey: primaryKey,
         verticalRenderInfo: {
           offset: 0,
@@ -3905,7 +3944,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderLockShadows",
     value: function renderLockShadows(info) {
-      // console.log('render LockShadows')
+      var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0; // console.log('render LockShadows')
+
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_27___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement("div", {
         className: _styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].lockShadowMask,
         style: {
@@ -3918,7 +3958,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: _styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].lockShadowMask,
         style: {
           right: 0,
-          width: info.rightLockTotalWidth + _styles__WEBPACK_IMPORTED_MODULE_38__["LOCK_SHADOW_PADDING"]
+          width: info.rightLockTotalWidth + _styles__WEBPACK_IMPORTED_MODULE_38__["LOCK_SHADOW_PADDING"] + stickyRightOffset
         }
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement("div", {
         className: classnames__WEBPACK_IMPORTED_MODULE_26___default()(_styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].lockShadow, _styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].rightLockShadow)
@@ -3932,17 +3972,21 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           hasStickyScroll = _this$props6.hasStickyScroll,
           stickyBottom = _this$props6.stickyBottom;
       var hasScroll = this.state.hasScroll;
+      var isScroll = hasStickyScroll && hasScroll;
+      var stickyScrollContainerStyle = this.getStickyScrollContainerStyle();
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement("div", {
-        className: classnames__WEBPACK_IMPORTED_MODULE_26___default()(_styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].horizontalScrollContainer, _styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].horizontalStickyScrollContainer)
+        className: classnames__WEBPACK_IMPORTED_MODULE_26___default()(_styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].horizontalScrollContainer, _styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].horizontalStickyScrollContainer),
+        style: stickyScrollContainerStyle
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement("div", {
         className: classnames__WEBPACK_IMPORTED_MODULE_26___default()(_styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].horizontalScrollLeftSpacer),
         style: {
-          width: info.leftLockTotalWidth
+          width: info.leftLockTotalWidth,
+          display: isScroll ? 'block' : 'none'
         }
       }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement("div", {
         className: classnames__WEBPACK_IMPORTED_MODULE_26___default()(_styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].stickyScroll),
         style: {
-          display: hasStickyScroll && hasScroll ? 'block' : 'none',
+          display: isScroll ? 'block' : 'none',
           bottom: stickyBottom
         }
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement("div", {
@@ -3950,7 +3994,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement("div", {
         className: classnames__WEBPACK_IMPORTED_MODULE_26___default()(_styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].horizontalScrollRightSpacer),
         style: {
-          width: info.rightLockTotalWidth
+          width: info.rightLockTotalWidth,
+          display: isScroll ? 'block' : 'none'
         }
       }));
     }
@@ -3959,6 +4004,22 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     value: function getScrollBarWidth() {
       return this.props.scrollbarWidth || Object(_utils__WEBPACK_IMPORTED_MODULE_39__["getScrollbarSize"])().width;
     }
+  }, {
+    key: "getStickyScrollContainerStyle",
+    value: function getStickyScrollContainerStyle() {
+      var _this$props7 = this.props,
+          hasStickyScroll = _this$props7.hasStickyScroll,
+          stickyScrollHeight = _this$props7.stickyScrollHeight;
+      var hasScroll = this.state.hasScroll;
+      var isScroll = hasStickyScroll && hasScroll;
+      var height = stickyScrollHeight === 'auto' ? this.getScrollBarWidth() : stickyScrollHeight;
+      var stickyHeight = isScroll ? height : 0;
+      return {
+        height: stickyHeight,
+        maxHeight: stickyHeight,
+        minHeight: stickyHeight
+      };
+    }
   }, {
     key: "render",
     value: function render() {
@@ -3967,20 +4028,20 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       // console.log('render table')
       var info = Object(_calculations__WEBPACK_IMPORTED_MODULE_30__["calculateRenderInfo"])(this);
       this.lastInfo = info;
-      var _this$props7 = this.props,
-          dataSource = _this$props7.dataSource,
-          className = _this$props7.className,
-          style = _this$props7.style,
-          hasHeader = _this$props7.hasHeader,
-          useOuterBorder = _this$props7.useOuterBorder,
-          isStickyHead = _this$props7.isStickyHead,
-          isStickyHeader = _this$props7.isStickyHeader,
-          isStickyFooter = _this$props7.isStickyFooter,
-          isLoading = _this$props7.isLoading,
-          getTableProps = _this$props7.getTableProps,
-          footerDataSource = _this$props7.footerDataSource,
-          components = _this$props7.components,
-          bordered = _this$props7.bordered;
+      var _this$props8 = this.props,
+          dataSource = _this$props8.dataSource,
+          className = _this$props8.className,
+          style = _this$props8.style,
+          hasHeader = _this$props8.hasHeader,
+          useOuterBorder = _this$props8.useOuterBorder,
+          isStickyHead = _this$props8.isStickyHead,
+          isStickyHeader = _this$props8.isStickyHeader,
+          isStickyFooter = _this$props8.isStickyFooter,
+          isLoading = _this$props8.isLoading,
+          getTableProps = _this$props8.getTableProps,
+          footerDataSource = _this$props8.footerDataSource,
+          components = _this$props8.components,
+          bordered = _this$props8.bordered;
       var artTableWrapperClassName = classnames__WEBPACK_IMPORTED_MODULE_26___default()(_styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].artTableWrapper, (_cx = {
         'use-outer-border': useOuterBorder,
         empty: dataSource.length === 0,
@@ -4008,41 +4069,40 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props$setTableW2, _this$props9, _this$props$setTableD, _this$props10, _this$props$setRowHei, _this$props11;
-
-      // console.log('did mount start')
-      // console.log('update dom helper start')
-      this.updateDOMHelper(); // console.log('update dom helper end')
+      var _this$props$setTableW2, _this$props10, _this$props$setTableD, _this$props11, _this$props$setRowHei, _this$props12;
 
+      this.rootSubscription = new rxjs__WEBPACK_IMPORTED_MODULE_28__["Subscription"]();
+      this.resizeSubject = new rxjs__WEBPACK_IMPORTED_MODULE_28__["Subject"]();
+      this.updateDOMHelper();
       this.props$ = new rxjs__WEBPACK_IMPORTED_MODULE_28__["BehaviorSubject"](this.props);
       this.initSubscriptions();
       this.didMountOrUpdate(); // console.log('did mount end')
 
-      var _this$props8 = this.props,
-          cssVariables = _this$props8.cssVariables,
-          enableCSSVariables = _this$props8.enableCSSVariables,
-          bordered = _this$props8.bordered;
+      var _this$props9 = this.props,
+          cssVariables = _this$props9.cssVariables,
+          enableCSSVariables = _this$props9.enableCSSVariables,
+          bordered = _this$props9.bordered;
       Object(_utils__WEBPACK_IMPORTED_MODULE_39__["cssPolifill"])({
         variables: cssVariables || {},
         enableCSSVariables: enableCSSVariables,
         bordered: bordered
       });
-      (_this$props$setTableW2 = (_this$props9 = this.props).setTableWidth) === null || _this$props$setTableW2 === void 0 ? void 0 : _this$props$setTableW2.call(_this$props9, this.domHelper.tableBody.clientWidth);
-      (_this$props$setTableD = (_this$props10 = this.props).setTableDomHelper) === null || _this$props$setTableD === void 0 ? void 0 : _this$props$setTableD.call(_this$props10, this.domHelper);
-      (_this$props$setRowHei = (_this$props11 = this.props).setRowHeightManager) === null || _this$props$setRowHei === void 0 ? void 0 : _this$props$setRowHei.call(_this$props11, this.rowHeightManager);
+      (_this$props$setTableW2 = (_this$props10 = this.props).setTableWidth) === null || _this$props$setTableW2 === void 0 ? void 0 : _this$props$setTableW2.call(_this$props10, this.domHelper.tableBody.clientWidth);
+      (_this$props$setTableD = (_this$props11 = this.props).setTableDomHelper) === null || _this$props$setTableD === void 0 ? void 0 : _this$props$setTableD.call(_this$props11, this.domHelper);
+      (_this$props$setRowHei = (_this$props12 = this.props).setRowHeightManager) === null || _this$props$setRowHei === void 0 ? void 0 : _this$props$setRowHei.call(_this$props12, this.rowHeightManager);
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props13;
+      var _this$props14;
 
       // console.log('did update start')
-      var _this$props12 = this.props,
-          cssVariables = _this$props12.cssVariables,
-          enableCSSVariables = _this$props12.enableCSSVariables,
-          bordered = _this$props12.bordered;
+      var _this$props13 = this.props,
+          cssVariables = _this$props13.cssVariables,
+          enableCSSVariables = _this$props13.enableCSSVariables,
+          bordered = _this$props13.bordered;
 
-      if (!Object(_utils__WEBPACK_IMPORTED_MODULE_39__["shallowEqual"])(prevProps === null || prevProps === void 0 ? void 0 : prevProps.cssVariables, (_this$props13 = this.props) === null || _this$props13 === void 0 ? void 0 : _this$props13.cssVariables)) {
+      if (!Object(_utils__WEBPACK_IMPORTED_MODULE_39__["shallowEqual"])(prevProps === null || prevProps === void 0 ? void 0 : prevProps.cssVariables, (_this$props14 = this.props) === null || _this$props14 === void 0 ? void 0 : _this$props14.cssVariables)) {
         Object(_utils__WEBPACK_IMPORTED_MODULE_39__["cssPolifill"])({
           variables: cssVariables || {},
           enableCSSVariables: enableCSSVariables,
@@ -4752,7 +4812,7 @@ var ContextMenuStyleWrap = styled_components__WEBPACK_IMPORTED_MODULE_3__["defau
 /*!************************************!*\
   !*** ./components/table/index.tsx ***!
   \************************************/
-/*! exports provided: Table, TableProps, PrimaryKey, LoadingContentWrapperProps, Classes, TableCSSVariables, collectNodes, getTreeDepth, groupBy, isLeafNode, isGroupColumn, applyTransforms, buildTree, exportTableAsExcel, layeredSort, mergeCellProps, proto, makeRecursiveMapper, smartCompare, traverseColumn, copyDataToClipboard, executeOnTempElement, layeredFilter, getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds, console, browserType, makeAutoRowSpanTransform, useAutoWidthTransform, makeBuildTreeTransform, makeColumnHoverTransform, ColumnHoverOptions, useColumnHoverTransform, makeColumnRangeHoverTransform, ColumnRangeHoverOptions, useColumnHoverRangeTransform, makeColumnResizeTransform, ColumnResizeOptions, useColumnResizeTransform, makeFlattenTransform, makeOrderFieldTransform, makeSortTransform, SortHeaderCellProps, SortOptions, useSortTransform, makeTipsTransform, TipsOptions, makeTreeModeTransform, TreeModeOptions, useTreeModeTransform, makeVisibleTransform, TablePipeline, useTablePipeline, features, internals */
+/*! exports provided: Table, TableProps, PrimaryKey, LoadingContentWrapperProps, Classes, TableCSSVariables, collectNodes, getTreeDepth, groupBy, isLeafNode, isGroupColumn, applyTransforms, buildTree, exportTableAsExcel, layeredSort, mergeCellProps, proto, makeRecursiveMapper, smartCompare, traverseColumn, copyDataToClipboard, executeOnTempElement, layeredFilter, getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds, console, browserType, MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn, makeAutoRowSpanTransform, useAutoWidthTransform, makeBuildTreeTransform, makeColumnHoverTransform, ColumnHoverOptions, useColumnHoverTransform, makeColumnRangeHoverTransform, ColumnRangeHoverOptions, useColumnHoverRangeTransform, makeColumnResizeTransform, ColumnResizeOptions, useColumnResizeTransform, makeFlattenTransform, makeOrderFieldTransform, makeSortTransform, SortHeaderCellProps, SortOptions, useSortTransform, makeTipsTransform, TipsOptions, makeTreeModeTransform, TreeModeOptions, useTreeModeTransform, makeVisibleTransform, TablePipeline, useTablePipeline, features, internals */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4822,6 +4882,12 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "browserType", function() { return _utils__WEBPACK_IMPORTED_MODULE_2__["browserType"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MULTI_SELECT_MARK_PROPNAME", function() { return _utils__WEBPACK_IMPORTED_MODULE_2__["MULTI_SELECT_MARK_PROPNAME"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SINGLE_SELECT_MARK_PROPNAME", function() { return _utils__WEBPACK_IMPORTED_MODULE_2__["SINGLE_SELECT_MARK_PROPNAME"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "isSelectColumn", function() { return _utils__WEBPACK_IMPORTED_MODULE_2__["isSelectColumn"]; });
+
 /* harmony import */ var _transforms__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./transforms */ "./components/table/transforms/index.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "makeAutoRowSpanTransform", function() { return _transforms__WEBPACK_IMPORTED_MODULE_3__["makeAutoRowSpanTransform"]; });
 
@@ -5157,7 +5223,9 @@ function getColumnWidthSum(pipeline) {
 }
 
 function getTableRemainingWidth(pipeline) {
-  var tableWidth = pipeline.getStateAtKey(tableWidthKey);
+  var _pipeline$ref$current, _pipeline$ref$current2;
+
+  var tableWidth = ((_pipeline$ref$current = pipeline.ref.current.domHelper) === null || _pipeline$ref$current === void 0 ? void 0 : (_pipeline$ref$current2 = _pipeline$ref$current.tableBody) === null || _pipeline$ref$current2 === void 0 ? void 0 : _pipeline$ref$current2.clientWidth) || pipeline.getStateAtKey(tableWidthKey);
   if (!tableWidth) return;
   var remainingWidth = Math.floor(tableWidth - getColumnWidthSum(pipeline));
   return remainingWidth > 0 ? remainingWidth : 0;
@@ -5844,9 +5912,13 @@ function columnDrag() {
                 var onColumnDragStopped = opts.onColumnDragStopped; // 拖拽结束返回列顺序
 
                 if (onColumnDragStopped) {
-                  var newColumns = sortColumns(columns, cloumnsSortData).filter(function (_ref) {
-                    var code = _ref.code;
-                    return code !== _autoFill__WEBPACK_IMPORTED_MODULE_11__["FILL_COLUMN_CODE"];
+                  var isRowDragColumn = function isRowDragColumn(code) {
+                    var rowDragColumnKey = pipeline.getFeatureOptions('rowDragColumnKey');
+                    return code === rowDragColumnKey;
+                  };
+
+                  var newColumns = sortColumns(columns, cloumnsSortData).filter(function (column) {
+                    return column.code !== _autoFill__WEBPACK_IMPORTED_MODULE_11__["FILL_COLUMN_CODE"] && !isRowDragColumn(column.code) && !Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isSelectColumn"])(column);
                   }); // TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
 
                   onColumnDragStopped(columnMoved, newColumns);
@@ -5871,9 +5943,9 @@ function columnDrag() {
   };
 }
 
-function enableMove(_ref2) {
-  var lock = _ref2.lock,
-      code = _ref2.code;
+function enableMove(_ref) {
+  var lock = _ref.lock,
+      code = _ref.code;
   return code && code !== _autoFill__WEBPACK_IMPORTED_MODULE_11__["FILL_COLUMN_CODE"] && !lock;
 }
 
@@ -6068,7 +6140,7 @@ function filter() {
           var colFilterIcon = (_col$features$filterI = (_col$features3 = col.features) === null || _col$features3 === void 0 ? void 0 : _col$features3.filterIcon) !== null && _col$features$filterI !== void 0 ? _col$features$filterI : filterIcon;
 
           var _Filter = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(_filter__WEBPACK_IMPORTED_MODULE_21__["Filter"], {
-            key: "filter",
+            key: "".concat(col.code, "_filter"),
             FilterPanelContent: filterPanel,
             filterIcon: colFilterIcon,
             filterModel: inputFiltersMap.get(col.code),
@@ -7833,7 +7905,7 @@ function footerDataSource() {
 /*!*****************************************************!*\
   !*** ./components/table/pipeline/features/index.ts ***!
   \*****************************************************/
-/*! exports provided: autoRowSpan, buildTree, columnHover, ColumnHoverFeatureOptions, columnRangeHover, ColumnRangeHoverFeatureOptions, multiSelect, MultiSelectFeatureOptions, rowDetail, RowDetailFeatureOptions, rowGrouping, RowGroupingFeatureOptions, singleSelect, SingleSelectFeatureOptions, sort, SortFeatureOptions, tips, treeMode, TreeModeFeatureOptions, treeMetaSymbol, treeSelect, TreeSelectFeatureOptions, columnDrag, ColumnDragOptions, columnResize, ColumnResizeOptions, contextMenu, ContextMenuFeatureOptions, filter, FilterFeatureOptions, rangeSelection, RangeSelectionFeatureOptions, mergeCellHover, footerDataSource, FooterDataSourceFeatureOptions, footerRowMetaSymbol, colGroupExtendable, colGroupExtendOption */
+/*! exports provided: autoRowSpan, buildTree, columnHover, ColumnHoverFeatureOptions, columnRangeHover, ColumnRangeHoverFeatureOptions, multiSelect, MultiSelectFeatureOptions, rowDetail, RowDetailFeatureOptions, rowGrouping, RowGroupingFeatureOptions, singleSelect, SingleSelectFeatureOptions, sort, SortFeatureOptions, tips, treeMode, TreeModeFeatureOptions, treeMetaSymbol, treeSelect, TreeSelectFeatureOptions, columnDrag, ColumnDragOptions, columnResize, ColumnResizeOptions, contextMenu, ContextMenuFeatureOptions, filter, FilterFeatureOptions, rangeSelection, RangeSelectionFeatureOptions, mergeCellHover, footerDataSource, FooterDataSourceFeatureOptions, footerRowMetaSymbol, colGroupExtendable, colGroupExtendOption, rowDrag, RowDragFeatureOptions */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -7934,6 +8006,12 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "colGroupExtendOption", function() { return _colGroupExtendable__WEBPACK_IMPORTED_MODULE_19__["colGroupExtendOption"]; });
 
+/* harmony import */ var _rowDrag__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./rowDrag */ "./components/table/pipeline/features/rowDrag.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "rowDrag", function() { return _rowDrag__WEBPACK_IMPORTED_MODULE_20__["rowDrag"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RowDragFeatureOptions", function() { return _rowDrag__WEBPACK_IMPORTED_MODULE_20__["RowDragFeatureOptions"]; });
+
+
 
 
 
@@ -8097,9 +8175,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 
 
-var fullRowsSetKey = 'fullRowsSetKey';
-var allEnableKeys = 'allEnableKeys';
-var selectValueSetKey = 'selectValueSetKey';
 function multiSelect() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function multiSelectStep(pipeline) {
@@ -8130,8 +8205,9 @@ function multiSelect() {
         action: action
       });
     };
-    /** dataSource 中包含的所有 keys */
 
+    var dataSource = pipeline.getDataSource();
+    /** dataSource 中包含的所有 keys */
 
     var fullKeySet = new Set();
     /** 所有有效的 keys（disable 状态为 false） */
@@ -8141,7 +8217,7 @@ function multiSelect() {
     var isAllChecked = set.size !== 0; // 当前不存在选中则默认为false
 
     var isAnyChecked = false;
-    var flatDataSource = Object(_utils__WEBPACK_IMPORTED_MODULE_17__["collectNodes"])(pipeline.getDataSource());
+    var flatDataSource = Object(_utils__WEBPACK_IMPORTED_MODULE_17__["collectNodes"])(dataSource);
     flatDataSource.forEach(function (row, rowIndex) {
       var rowKey = _internals__WEBPACK_IMPORTED_MODULE_15__["internals"].safeGetRowKey(primaryKey, row, rowIndex);
       fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
@@ -8163,14 +8239,12 @@ function multiSelect() {
     var hiddenSelectColumn = opts.checkboxColumn && opts.checkboxColumn.hidden === true;
 
     if (!hiddenSelectColumn) {
-      var _opts$checkboxPlaceme;
+      var _opts$checkboxColumn2, _opts$checkboxPlaceme;
 
       var defaultCheckboxColumnTitle = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_14___default.a.createElement(Checkbox, {
         checked: isAllChecked,
         indeterminate: !isAllChecked && isAnyChecked,
         onChange: function onChange(_) {
-          var allKeys = pipeline.getFeatureOptions(allEnableKeys);
-
           if (isAllChecked) {
             _onChange(_utils_others__WEBPACK_IMPORTED_MODULE_16__["arrayUtils"].diff(value, allKeys), '', allKeys, 'uncheck-all');
           } else {
@@ -8191,11 +8265,9 @@ function multiSelect() {
           var rowKey = _internals__WEBPACK_IMPORTED_MODULE_15__["internals"].safeGetRowKey(primaryKey, row, rowIndex);
           var checkboxCellProps = {};
           var preCellProps = (_opts$checkboxColumn = opts.checkboxColumn) === null || _opts$checkboxColumn === void 0 ? void 0 : (_opts$checkboxColumn$ = _opts$checkboxColumn.getCellProps) === null || _opts$checkboxColumn$ === void 0 ? void 0 : _opts$checkboxColumn$.call(_opts$checkboxColumn, value, row, rowIndex);
-          var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new Set();
-          var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new Set();
 
-          if (fullRowsSet.has(rowKey) && clickArea === 'cell') {
-            var prevChecked = selectValueSet.has(rowKey);
+          if (fullKeySet.has(rowKey) && clickArea === 'cell') {
+            var prevChecked = set.has(rowKey);
             var disabled = isDisabled(row, rowIndex);
             checkboxCellProps = {
               style: {
@@ -8219,8 +8291,7 @@ function multiSelect() {
           }
 
           var key = _internals__WEBPACK_IMPORTED_MODULE_15__["internals"].safeGetRowKey(primaryKey, row, rowIndex);
-          var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new Set();
-          var checked = selectValueSet.has(key);
+          var checked = set.has(key);
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_14___default.a.createElement(Checkbox, {
             checked: checked,
             disabled: isDisabled(row, rowIndex),
@@ -8241,7 +8312,8 @@ function multiSelect() {
               }
             } : undefined
           });
-        }
+        },
+        features: _objectSpread(_objectSpread({}, (_opts$checkboxColumn2 = opts.checkboxColumn) === null || _opts$checkboxColumn2 === void 0 ? void 0 : _opts$checkboxColumn2.features), {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_6___default()({}, _utils__WEBPACK_IMPORTED_MODULE_17__["MULTI_SELECT_MARK_PROPNAME"], true))
       });
 
       var nextColumns = pipeline.getColumns().slice();
@@ -8258,9 +8330,8 @@ function multiSelect() {
 
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
       var rowKey = _internals__WEBPACK_IMPORTED_MODULE_15__["internals"].safeGetRowKey(primaryKey, row, rowIndex);
-      var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new Set();
 
-      if (!fullRowsSet.has(rowKey)) {
+      if (!fullKeySet.has(rowKey)) {
         // rowKey 不在 fullKeySet 中说明这一行是在 multiSelect 之后才生成的，multiSelect 不对之后生成的行进行处理
         return;
       }
@@ -8268,8 +8339,7 @@ function multiSelect() {
       var style = {};
       var className;
       var onClick;
-      var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new Set();
-      var checked = selectValueSet.has(rowKey);
+      var checked = set.has(rowKey);
 
       if (opts.highlightRowWhenSelected && checked) {
         className = 'highlight';
@@ -8296,32 +8366,22 @@ function multiSelect() {
         style: style,
         onClick: onClick
       };
-    }); // 只保留一份到pipeline， 避免行数据过多时内容被握住
-
-    pipeline.setFeatureOptions(fullRowsSetKey, fullKeySet);
-    pipeline.setFeatureOptions(allEnableKeys, allKeys);
-    pipeline.setFeatureOptions(selectValueSetKey, set);
-    fullKeySet = null;
-    allKeys = null;
-    set = null;
+    });
     return pipeline;
 
     function onCheckboxChange(prevChecked, key, batch) {
       var batchKeys = [key];
 
       if (batch && lastKey) {
-        var _allKeys = pipeline.getFeatureOptions(allEnableKeys);
-
-        var lastIdx = _allKeys.indexOf(lastKey);
-
-        var cntIdx = _allKeys.indexOf(key);
+        var lastIdx = allKeys.indexOf(lastKey);
+        var cntIdx = allKeys.indexOf(key);
 
         var _ref5 = lastIdx < cntIdx ? [lastIdx, cntIdx] : [cntIdx, lastIdx],
             _ref6 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_5___default()(_ref5, 2),
             start = _ref6[0],
             end = _ref6[1];
 
-        batchKeys = _allKeys.slice(start, end + 1);
+        batchKeys = allKeys.slice(start, end + 1);
       }
 
       if (prevChecked) {
@@ -8538,7 +8598,9 @@ function rangeSelection(opts) {
 
       var isCtrlKey = mouseDownEvent.ctrlKey || mouseDownEvent.metaKey;
       var isShiftKey = mouseDownEvent.shiftKey;
-      var target = mouseDownEvent.target; // 每次点击时先确认初始生效的框选范围
+      var target = mouseDownEvent.target;
+      var startDragCell = getTargetCell(target, columns);
+      if (!startDragCell) return; // 每次点击时先确认初始生效的框选范围
 
       setStartSelectedCellRanges(isCtrlKey, isShiftKey);
 
@@ -8547,7 +8609,6 @@ function rangeSelection(opts) {
         return;
       }
 
-      var startDragCell = getTargetCell(target, columns);
       pipeline.setFeatureOptions(lastClickCellKey, startDragCell);
       var draggingCell = startDragCell;
       var mousemove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_15__["fromEvent"])(window, 'mousemove');
@@ -9299,6 +9360,379 @@ function rowDetail() {
 
 /***/ }),
 
+/***/ "./components/table/pipeline/features/rowDrag.tsx":
+/*!********************************************************!*\
+  !*** ./components/table/pipeline/features/rowDrag.tsx ***!
+  \********************************************************/
+/*! exports provided: ROW_DRAG_COLUMN_CODE, rowDragKey, rowDrag */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ROW_DRAG_COLUMN_CODE", function() { return ROW_DRAG_COLUMN_CODE; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rowDragKey", function() { return rowDragKey; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rowDrag", function() { return rowDrag; });
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.array.slice.js */ "./node_modules/core-js/modules/es.array.slice.js");
+/* harmony import */ var core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.concat.js */ "./node_modules/core-js/modules/es.array.concat.js");
+/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
+/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _base_styles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../base/styles */ "./components/table/base/styles.ts");
+
+
+
+
+
+
+
+
+var ROW_DRAG_COLUMN_CODE = '$_row_drag_column_&';
+var rowDragKey = 'rowDragKey';
+var SCROLL_OFFSET = 30;
+var defaultRowDragColumn = {
+  name: '拖拽列',
+  code: ROW_DRAG_COLUMN_CODE,
+  lock: true,
+  title: '',
+  width: 40,
+  align: 'center',
+  getCellProps: function getCellProps(value, row, rowIndex) {
+    return {
+      className: classnames__WEBPACK_IMPORTED_MODULE_6___default()(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragCell)
+    };
+  },
+  render: function render(value, row, rowIndex) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("svg", {
+      viewBox: "0 0 1024 1024",
+      version: "1.1",
+      xmlns: "http://www.w3.org/1999/xlink",
+      "data-icon": "drag",
+      width: "16",
+      height: "16"
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("path", {
+      d: "M298.688 192a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0zM298.688 512a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m-298.624 320a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z",
+      "p-id": "4278"
+    }));
+  }
+};
+function rowDrag(opt) {
+  return function rowDragStep(pipeline) {
+    var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
+    var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
+    if (!tableBody) return pipeline;
+    var dataSource = pipeline.getDataSource();
+    var rowHeight = (opt === null || opt === void 0 ? void 0 : opt.rowHeight) || 48;
+
+    var handleDragStrat = function handleDragStrat(event) {
+      var _opt$onDragStart;
+
+      // 开始拖拽
+      artTable.classList.add(classnames__WEBPACK_IMPORTED_MODULE_6___default()(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragging));
+      opt === null || opt === void 0 ? void 0 : (_opt$onDragStart = opt.onDragStart) === null || _opt$onDragStart === void 0 ? void 0 : _opt$onDragStart.call(opt, event);
+    };
+
+    var handleDragMove = function handleDragMove(event) {
+      var _opt$onDragMove;
+
+      opt === null || opt === void 0 ? void 0 : (_opt$onDragMove = opt.onDragMove) === null || _opt$onDragMove === void 0 ? void 0 : _opt$onDragMove.call(opt, event);
+      pipeline.setStateAtKey(rowDragKey, event);
+    };
+
+    var handleDragEnd = function handleDragEnd(event, isOutOfRange) {
+      artTable.classList.remove(classnames__WEBPACK_IMPORTED_MODULE_6___default()(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragging));
+      pipeline.setStateAtKey(rowDragKey, event); // 超出拖拽范围不触发dragend事件
+
+      if (!isOutOfRange) {
+        var _opt$onDragEnd;
+
+        opt === null || opt === void 0 ? void 0 : (_opt$onDragEnd = opt.onDragEnd) === null || _opt$onDragEnd === void 0 ? void 0 : _opt$onDragEnd.call(opt, event);
+      }
+    };
+
+    var getDragEvent = function getDragEvent(startRowInfo, endRowInfo, _ref) {
+      var isFinished = _ref.isFinished,
+          _ref$dragPosition = _ref.dragPosition,
+          dragPosition = _ref$dragPosition === void 0 ? 'bottom' : _ref$dragPosition;
+      return {
+        startRowIndex: startRowInfo.rowIndex,
+        startRow: startRowInfo.row,
+        endRowIndex: endRowInfo.rowIndex,
+        endRow: endRowInfo.row,
+        dragPosition: dragPosition,
+        isFinished: isFinished
+      };
+    };
+
+    var updateScrollPosition = function updateScrollPosition(mouseMoveEvent) {
+      if (opt !== null && opt !== void 0 && opt.suppressScrollMove) return;
+      var clientY = mouseMoveEvent.clientY;
+      var tableBodyClientRect = tableBody.getBoundingClientRect();
+      var top = tableBodyClientRect.top,
+          height = tableBodyClientRect.height;
+
+      if (clientY + SCROLL_OFFSET >= top + height) {
+        pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_OFFSET;
+      }
+
+      if (clientY + SCROLL_OFFSET <= top) {
+        pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_OFFSET;
+      }
+    };
+
+    var onMouseDown = function onMouseDown(mouseDownEvent) {
+      var _opt$isDisabled;
+
+      var startRowInfo = getTargetRowInfo(mouseDownEvent.target, tableBody, dataSource);
+      var endRowInfo = startRowInfo;
+      if (!startRowInfo || startRowInfo.code !== rowDragColumn.code) return;
+      if (opt !== null && opt !== void 0 && (_opt$isDisabled = opt.isDisabled) !== null && _opt$isDisabled !== void 0 && _opt$isDisabled.call(opt, startRowInfo.row, startRowInfo.rowIndex)) return; // 默认拖拽插入的位置是向下
+
+      var dragPosition = 'bottom';
+      var isOutOfRange = false;
+      var dragStartEvent = getDragEvent(startRowInfo, endRowInfo, {
+        isFinished: false,
+        dragPosition: 'bottom'
+      });
+      handleDragStrat(dragStartEvent);
+      var tableWidth = tableBody.clientWidth;
+      var startRowRects = startRowInfo.cell.getBoundingClientRect(); // 光标位置距离初始拖拽行的偏移量
+
+      var startOffset = mouseDownEvent.clientY - startRowRects.top;
+      var dragElement = createDragElement(startRowRects, tableWidth, rowHeight); // 可拖拽的范围
+
+      var dragRange = getDragRange(tableBody, {
+        startOffset: startOffset,
+        rowHeight: rowHeight
+      });
+      var mousePosition = {
+        x: mouseDownEvent.clientX,
+        y: mouseDownEvent.clientY
+      };
+      var mousemove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_4__["fromEvent"])(window, 'mousemove');
+      var mouseup$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_4__["fromEvent"])(window, 'mouseup');
+
+      var scrollCallback = function scrollCallback(event) {
+        // 在当前表格内滚动不处理
+        if (event.target === tableBody) return;
+        dragRange = getDragRange(tableBody, {
+          startOffset: startOffset,
+          rowHeight: rowHeight
+        });
+        var isOutOfRange = isOutOfDragRange(mousePosition, dragRange);
+        updateCurSorStyle(isOutOfRange);
+      };
+
+      document.addEventListener('scroll', scrollCallback, true);
+      var rowDrag$ = mousemove$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_5__["map"])(function (mouseMoveEvent) {
+        var clientX = mouseMoveEvent.clientX,
+            clientY = mouseMoveEvent.clientY;
+        var tagretRow = getTargetRowInfo(mouseMoveEvent.target, tableBody, dataSource);
+
+        if (tagretRow) {
+          endRowInfo = tagretRow;
+        }
+
+        var targetRowRects = endRowInfo.cell.getBoundingClientRect(); // 判断拖拽插入的位置，拖拽框上边框位于目标行之上则向上插入，否则向下插入
+
+        var isMoveToTop = clientY - startOffset < targetRowRects.top;
+        dragPosition = isMoveToTop ? 'top' : 'bottom';
+        isOutOfRange = isOutOfDragRange({
+          x: clientX,
+          y: clientY
+        }, dragRange);
+        mousePosition = {
+          x: clientX,
+          y: clientY
+        };
+        updateScrollPosition(mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
+
+        updateDragElementPosition(dragElement, dragRange, {
+          x: clientX,
+          y: clientY,
+          startOffset: startOffset
+        });
+        updateCurSorStyle(isOutOfRange);
+        return {
+          startRowInfo: startRowInfo,
+          endRowInfo: endRowInfo,
+          dragPosition: dragPosition
+        };
+      }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_5__["takeUntil"])(mouseup$));
+      rowDrag$.subscribe({
+        next: function next(_ref2) {
+          var startRowInfo = _ref2.startRowInfo,
+              endRowInfo = _ref2.endRowInfo,
+              dragPosition = _ref2.dragPosition;
+          var dragMoveEvent = getDragEvent(startRowInfo, endRowInfo, {
+            isFinished: false,
+            dragPosition: dragPosition
+          });
+          handleDragMove(dragMoveEvent);
+        },
+        complete: function complete() {
+          var dragEndEvent = getDragEvent(startRowInfo, endRowInfo, {
+            isFinished: true,
+            dragPosition: dragPosition
+          });
+          handleDragEnd(dragEndEvent, isOutOfRange);
+          removeDragElement(dragElement);
+          removeCurSorStyle();
+          document.removeEventListener('scroll', scrollCallback, true);
+        }
+      });
+    };
+
+    var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
+    pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
+    var nextColumns = pipeline.getColumns().slice();
+    nextColumns.unshift(rowDragColumn);
+    pipeline.columns(nextColumns);
+    pipeline.addTableProps({
+      onMouseDown: onMouseDown
+    });
+    pipeline.appendRowPropsGetter(function (row, rowIndex) {
+      var _cx;
+
+      var rowDragEvent = pipeline.getStateAtKey(rowDragKey) || {};
+      var startRowIndex = rowDragEvent.startRowIndex,
+          endRowIndex = rowDragEvent.endRowIndex,
+          isFinished = rowDragEvent.isFinished,
+          dragPosition = rowDragEvent.dragPosition;
+      var isFooterCell = row[pipeline.getFeatureOptions('footerRowMetaKey')];
+      if (isFooterCell || isFinished || rowIndex !== startRowIndex && rowIndex !== endRowIndex) return;
+      var className = classnames__WEBPACK_IMPORTED_MODULE_6___default()((_cx = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_cx, _base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragStart, rowIndex === startRowIndex), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_cx, _base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragEnd, rowIndex === endRowIndex), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_cx, _base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_cx, _base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'), _cx));
+      return {
+        className: className
+      };
+    });
+    return pipeline;
+  };
+}
+
+function getTargetRowInfo(target, tableBody, record) {
+  while (target && tableBody.contains(target)) {
+    if (target.getAttribute('data-role') === 'table-cell') {
+      var code = target.getAttribute('data-code');
+
+      var _rowIndex = parseInt(target.getAttribute('data-rowindex'));
+
+      var _row = record[_rowIndex];
+      var isFooterCell = isEleInFooter(target);
+      if (!_row || isFooterCell) return null;
+      return {
+        rowIndex: _rowIndex,
+        row: _row,
+        code: code,
+        cell: target
+      };
+    }
+
+    target = target.parentElement;
+  }
+
+  return null;
+}
+
+function isEleInFooter(target) {
+  while (target && !target.classList.contains(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].artTable)) {
+    if (target.classList.contains(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].tableFooter)) {
+      return true;
+    }
+
+    target = target.parentElement;
+  }
+
+  return false;
+}
+
+function createDragElement(rects, tableWidth, rowHeight) {
+  var x = rects.x,
+      y = rects.y;
+  var dragMoveElement = document.createElement('div');
+  dragMoveElement.className = classnames__WEBPACK_IMPORTED_MODULE_6___default()(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragElement);
+  dragMoveElement.style.cssText = "position:fixed;z-index:9999;left:".concat(x, "px;top:").concat(y, "px;pointer-events:none;width:").concat(tableWidth, "px;height:").concat(rowHeight, "px;background:var(--primary-color);opacity: 0.1;");
+  document.body.appendChild(dragMoveElement);
+  return dragMoveElement;
+}
+
+function updateDragElementPosition(element, dragRange, _ref3) {
+  var x = _ref3.x,
+      y = _ref3.y,
+      startOffset = _ref3.startOffset;
+  var validPosition = getValidPosition({
+    x: x,
+    y: y
+  }, dragRange);
+  element.style.top = validPosition.y - startOffset + 'px';
+  return element;
+}
+
+function removeDragElement(element) {
+  document.body.removeChild(element);
+}
+
+function updateCurSorStyle(isOutOfRange) {
+  if (isOutOfRange) {
+    document.body.style.cursor = 'no-drop';
+  } else {
+    document.body.style.cursor = 'move';
+  }
+}
+
+function removeCurSorStyle() {
+  document.body.style.cursor = 'default';
+}
+
+function getDragRange(tableBody, _ref4) {
+  var startOffset = _ref4.startOffset,
+      rowHeight = _ref4.rowHeight;
+  var tableBodyClientRect = tableBody.getBoundingClientRect();
+  var height = tableBodyClientRect.height,
+      width = tableBodyClientRect.width,
+      top = tableBodyClientRect.top,
+      left = tableBodyClientRect.left;
+  return {
+    minX: left,
+    maxX: left + width,
+    minY: top - rowHeight + startOffset,
+    maxY: top + height + startOffset
+  };
+}
+
+function getValidPosition(position, dragRange) {
+  var x = position.x,
+      y = position.y;
+  var minX = dragRange.minX,
+      maxX = dragRange.maxX,
+      minY = dragRange.minY,
+      maxY = dragRange.maxY;
+  var newX = x < minX ? minX : x > maxX ? maxX : x;
+  var newY = y < minY ? minY : y > maxY ? maxY : y;
+  return {
+    x: newX,
+    y: newY
+  };
+}
+
+function isOutOfDragRange(position, dragRange) {
+  var x = position.x,
+      y = position.y;
+  var minX = dragRange.minX,
+      maxX = dragRange.maxX,
+      minY = dragRange.minY,
+      maxY = dragRange.maxY;
+  return x > maxX || x < minX || y > maxY || y < minY;
+}
+
+/***/ }),
+
 /***/ "./components/table/pipeline/features/rowGrouping.tsx":
 /*!************************************************************!*\
   !*** ./components/table/pipeline/features/rowGrouping.tsx ***!
@@ -9620,7 +10054,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function singleSelect() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function singleSelectStep(pipeline) {
-    var _opts$clickArea, _opts$isDisabled, _ref, _opts$value, _opts$radioPlacement;
+    var _opts$clickArea, _opts$isDisabled, _ref, _opts$value, _opts$radioColumn2, _opts$radioPlacement;
 
     var Radio = pipeline.ctx.components.Radio;
 
@@ -9691,7 +10125,8 @@ function singleSelect() {
             onChange(rowKey);
           } : undefined
         });
-      }
+      },
+      features: _objectSpread(_objectSpread({}, (_opts$radioColumn2 = opts.radioColumn) === null || _opts$radioColumn2 === void 0 ? void 0 : _opts$radioColumn2.features), {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default()({}, _utils__WEBPACK_IMPORTED_MODULE_12__["SINGLE_SELECT_MARK_PROPNAME"], true))
     });
 
     var nextColumns = pipeline.getColumns().slice();
@@ -10421,6 +10856,11 @@ function treeMode() {
     return pipeline.mapDataSource(processDataSource).mapColumns(processColumns);
 
     function processDataSource(input) {
+      if (pipeline.isSameInputDataSource() && openKeys === pipeline.getFeatureOptions('lastOpenKeys')) {
+        return pipeline.getFeatureOptions('lastTreeMode');
+      }
+
+      pipeline.setFeatureOptions('lastOpenKeys', pipeline.getStateAtKey(stateKey) || openKeys);
       var result = [];
       dfs(input, 0);
 
@@ -10461,6 +10901,7 @@ function treeMode() {
         }
       }
 
+      pipeline.setFeatureOptions('lastTreeMode', result);
       return result;
     }
 
@@ -10904,6 +11345,8 @@ var TablePipeline = /*#__PURE__*/function () {
 
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_10___default()(this, "_dataSource", void 0);
 
+    _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_10___default()(this, "_isSameInputDataSource", void 0);
+
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_10___default()(this, "_columns", void 0);
 
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_10___default()(this, "_footerDataSource", void 0);
@@ -10955,6 +11398,11 @@ var TablePipeline = /*#__PURE__*/function () {
         return this._snapshots[name].dataSource;
       }
     }
+  }, {
+    key: "isSameInputDataSource",
+    value: function isSameInputDataSource() {
+      return this._isSameInputDataSource;
+    }
   }, {
     key: "getColumns",
     value: function getColumns(name) {
@@ -11005,9 +11453,12 @@ var TablePipeline = /*#__PURE__*/function () {
 
       if (this._dataSource != null || this._columns != null) {
         throw new Error('input 不能调用两次');
-      }
+      } // 在 pipeline 中识别本次更新是否有数据变化
+
 
+      this._isSameInputDataSource = _input.dataSource === this.ref.current._lastInputDataSource;
       this._dataSource = _input.dataSource;
+      this.ref.current._lastInputDataSource = _input.dataSource;
       this._columns = _input.columns.map(function (col) {
         return _objectSpread(_objectSpread({}, col), {}, {
           key: _this.guid()
@@ -14228,7 +14679,7 @@ function groupBy(list, iteratee) {
 /*!******************************************!*\
   !*** ./components/table/utils/index.tsx ***!
   \******************************************/
-/*! exports provided: collectNodes, getTreeDepth, groupBy, isLeafNode, isGroupColumn, applyTransforms, buildTree, exportTableAsExcel, layeredSort, mergeCellProps, proto, makeRecursiveMapper, smartCompare, traverseColumn, copyDataToClipboard, executeOnTempElement, layeredFilter, getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds, console, browserType */
+/*! exports provided: collectNodes, getTreeDepth, groupBy, isLeafNode, isGroupColumn, applyTransforms, buildTree, exportTableAsExcel, layeredSort, mergeCellProps, proto, makeRecursiveMapper, smartCompare, traverseColumn, copyDataToClipboard, executeOnTempElement, layeredFilter, getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds, console, browserType, MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -14302,6 +14753,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _browserType__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./browserType */ "./components/table/utils/browserType.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "browserType", function() { return _browserType__WEBPACK_IMPORTED_MODULE_18__["browserType"]; });
 
+/* harmony import */ var _selectColumn__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./selectColumn */ "./components/table/utils/selectColumn.ts");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MULTI_SELECT_MARK_PROPNAME", function() { return _selectColumn__WEBPACK_IMPORTED_MODULE_19__["MULTI_SELECT_MARK_PROPNAME"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SINGLE_SELECT_MARK_PROPNAME", function() { return _selectColumn__WEBPACK_IMPORTED_MODULE_19__["SINGLE_SELECT_MARK_PROPNAME"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "isSelectColumn", function() { return _selectColumn__WEBPACK_IMPORTED_MODULE_19__["isSelectColumn"]; });
+
+
 
 
 
@@ -15023,6 +15482,27 @@ proto.array = function (baseRecord) {
 
 /***/ }),
 
+/***/ "./components/table/utils/selectColumn.ts":
+/*!************************************************!*\
+  !*** ./components/table/utils/selectColumn.ts ***!
+  \************************************************/
+/*! exports provided: MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MULTI_SELECT_MARK_PROPNAME", function() { return MULTI_SELECT_MARK_PROPNAME; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SINGLE_SELECT_MARK_PROPNAME", function() { return SINGLE_SELECT_MARK_PROPNAME; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isSelectColumn", function() { return isSelectColumn; });
+var MULTI_SELECT_MARK_PROPNAME = 'checkboxSelection';
+var SINGLE_SELECT_MARK_PROPNAME = 'radioSelection';
+function isSelectColumn(column) {
+  var features = column.features || {};
+  return features[MULTI_SELECT_MARK_PROPNAME] === true || features[SINGLE_SELECT_MARK_PROPNAME] === true;
+}
+
+/***/ }),
+
 /***/ "./components/table/utils/smartCompare.ts":
 /*!************************************************!*\
   !*** ./components/table/utils/smartCompare.ts ***!