@kdcloudjs/table 1.2.0-canary.9 → 1.2.1-canary.1

package/es/table/base/header.d.ts

@@ -4,6 +4,7 @@ interface TableHeaderProps {
     info: RenderInfo;
     theaderPosition?: 'left' | 'center' | 'right';
     rowCount?: number;
+    stickyRightOffset?: number;
 }
-export default function TableHeader({ info, theaderPosition, rowCount: _rowCount }: TableHeaderProps): JSX.Element;
+export default function TableHeader({ info, theaderPosition, rowCount: _rowCount, stickyRightOffset }: TableHeaderProps): JSX.Element;
 export {};

package/es/table/base/header.js

@@ -228,7 +228,8 @@ export default function TableHeader(_ref2) {
 
   var info = _ref2.info,
       theaderPosition = _ref2.theaderPosition,
-      _rowCount = _ref2.rowCount;
+      _rowCount = _ref2.rowCount,
+      stickyRightOffset = _ref2.stickyRightOffset;
 
   var nested = info.nested,
       flat = _flatInstanceProperty(info),
@@ -275,7 +276,8 @@ export default 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';

package/es/table/base/helpers/TableDOMUtils.js

@@ -94,7 +94,9 @@ export var TableDOMHelper = /*#__PURE__*/function () {
 
     var stickyScrollSelector = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = ".".concat(Classes.artTable, " + .")).call(_context3, Classes.horizontalStickyScrollContainer, " .")).call(_context2, Classes.stickyScroll);
 
-    this.stickyScroll = artTableWrapper.querySelector(stickyScrollSelector);
+    var stickyScrolls = artTableWrapper.querySelectorAll(stickyScrollSelector);
+    this.stickyScroll = stickyScrolls[stickyScrolls.length - 1]; // 当嵌套多层表格时，需要查找最后一个，否则会查找到父表格内嵌套的子表格的
+
     this.stickyScrollItem = this.stickyScroll.querySelector(".".concat(Classes.stickyScrollItem));
   }
 

package/es/table/base/helpers/getRichVisibleRectsStream.js

@@ -164,7 +164,8 @@ function getScrollParent(elem) {
 
 
 export function getRichVisibleRectsStream(target, structureMayChange$, virtualDebugLabel) {
-  return structureMayChange$.pipe(op.startWith('init'), op.map(function () {
+  return structureMayChange$.pipe(op.mapTo(target), op.distinctUntilChanged(shallowEqual), // 当target没有发生变化时，无需重新查找
+  op.startWith('init'), op.map(function () {
     // target 的第一个滚动父元素，我们认为这就是虚拟滚动发生的地方
     // 即虚拟滚动不考虑「更上层元素发生滚动」的情况
     // 直接从父元素开始查找，防止自身设置overflow属性导致是同一个元素

package/es/table/base/html-table.js

@@ -124,7 +124,7 @@ export 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.createElement('td', _extends(_extends(_extends(_extends({

package/es/table/base/renderTemplates.js

@@ -19,7 +19,7 @@ import { getTreeDepth, browserType } from '../utils';
 import TableHeader from './header';
 var TEMPLATES = new _Map();
 
-function renderTableHeaderInIE(info, props) {
+function renderTableHeaderInIE(info, props, extra) {
   var stickyTop = props.stickyTop,
       hasHeader = props.hasHeader;
 
@@ -34,6 +34,9 @@ function renderTableHeaderInIE(info, props) {
       rightNested = nested.right,
       full = nested.full;
   var rowCount = getTreeDepth(full) + 1;
+  var fixedRightTableStyle = {
+    right: (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) || 0
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: cx(Classes.tableHeader)
   }, /*#__PURE__*/React.createElement("div", {
@@ -45,6 +48,11 @@ function renderTableHeaderInIE(info, props) {
   }, /*#__PURE__*/React.createElement(TableHeader, {
     info: info,
     theaderPosition: hasLockColumn ? 'center' : undefined
+  }), /*#__PURE__*/React.createElement("div", {
+    className: 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.createElement("div", {
     className: Classes.fixedLeft
   }, /*#__PURE__*/React.createElement(TableHeader, {
@@ -72,7 +80,8 @@ function renderTableHeaderInIE(info, props) {
     theaderPosition: "left",
     rowCount: rowCount
   })) : null, right.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: Classes.fixedRight
+    className: Classes.fixedRight,
+    style: fixedRightTableStyle
   }, /*#__PURE__*/React.createElement(TableHeader, {
     info: _extends(_extends({}, info), {
       flat: {
@@ -127,9 +136,6 @@ function renderTableBodyInIE(info, props, extra) {
     primaryKey: primaryKey,
     data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex)
   };
-  var fixedRightTableStyle = {
-    right: -extra.stickyRightOffset
-  };
   return /*#__PURE__*/React.createElement("div", {
     className: cx(Classes.tableBody, Classes.horizontalScrollContainer)
   }, /*#__PURE__*/React.createElement("div", {
@@ -182,8 +188,7 @@ function renderTableBodyInIE(info, props, extra) {
       height: bottomBlank
     }
   })) : null, right.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: Classes.fixedRight,
-    style: fixedRightTableStyle
+    className: Classes.fixedRight
   }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
     key: "top-blank",
     className: cx(Classes.virtualBlank, 'top'),
@@ -194,7 +199,6 @@ function renderTableBodyInIE(info, props, extra) {
     tbodyHtmlTag: "tbody"
   }, commonProps, {
     tbodyPosition: "right",
-    stickyRightOffset: extra.stickyRightOffset,
     horizontalRenderInfo: _extends(_extends({}, info), {
       flat: {
         center: right,
@@ -243,6 +247,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.createElement("div", {
     className: cx(Classes.tableFooter),
     style: {
@@ -255,7 +262,13 @@ function renderTableFooterInIE(info, props, extra) {
   }, commonProps, {
     tbodyPosition: hasLockColumn ? 'center' : undefined,
     horizontalRenderInfo: info
-  }))), left.length > 0 ? /*#__PURE__*/React.createElement("div", {
+  })), footerDataSource.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: 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.createElement("div", {
     className: Classes.fixedLeft
   }, /*#__PURE__*/React.createElement(HtmlTable, _extends({
     tbodyHtmlTag: "tfoot"
@@ -271,7 +284,8 @@ function renderTableFooterInIE(info, props, extra) {
       visible: _sliceInstanceProperty(visible).call(visible, 0, left.length)
     })
   }))) : null, right.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: Classes.fixedRight
+    className: Classes.fixedRight,
+    style: fixedRightTableStyle
   }, /*#__PURE__*/React.createElement(HtmlTable, _extends({
     tbodyHtmlTag: "tfoot"
   }, commonProps, {

package/es/table/base/styles.d.ts

@@ -70,6 +70,13 @@ export declare const Classes: {
     readonly popup: string;
     readonly popupHeader: string;
     readonly popupBody: string;
+    readonly rowDragging: string;
+    readonly rowDragStart: string;
+    readonly rowDragEnd: string;
+    readonly rowDragEndToTop: string;
+    readonly rowDragEndToBottom: string;
+    readonly rowDragElement: string;
+    readonly rowDragCell: string;
 };
 export declare const MenuClasses: {
     menu: string;

package/es/table/base/styles.js

@@ -82,7 +82,14 @@ export 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")
 };
 export var MenuClasses = {
   menu: "".concat(prefix, "table-menu"),
@@ -134,7 +141,7 @@ export var defaultCSSVariables = {
 export var variableConst = getCssVariableText(defaultCSSVariables);
 var notBorderedStyleMixin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  --cell-border-vertical: none;\n  --header-cell-border-vertical: none;\n"])));
 var borderedStyleMixin = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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);
-export var StyledArtTableWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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);
+export var StyledArtTableWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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);
 export var ButtonCSS = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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) {

package/es/table/base/table.d.ts

@@ -130,11 +130,11 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     private artTableWrapperRef;
     private domHelper;
     private rootSubscription;
+    private resizeSubject;
     private lastInfo;
     private props$;
     private hasScrollY;
     private resizeObserver?;
-    private resizeSubject;
     private offsetY;
     /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
     getDoms(): TableDOMHelper;
@@ -154,6 +154,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     private renderLockShadows;
     private renderStickyScroll;
     private getScrollBarWidth;
+    private getStickyScrollContainerStyle;
     render(): JSX.Element;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<BaseTableProps>, prevState: Readonly<BaseTableState>): void;

package/es/table/base/table.js

@@ -63,9 +63,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _this.rowHeightManager = makeRowHeightManager(_this.props.dataSource.length, _this.props.estimatedRowHeight);
     _this.artTableWrapperRef = /*#__PURE__*/React.createRef();
-    _this.rootSubscription = new Subscription();
     _this.hasScrollY = false;
-    _this.resizeSubject = new Subject();
     _this.offsetY = 0;
 
     _this.handleRowMouseEnter = function (e) {
@@ -132,7 +130,6 @@ export 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 = getTableRenderTemplate('body');
 
       if (typeof renderBody === 'function') {
@@ -140,8 +137,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           rowProps: {
             onMouseEnter: _this.handleRowMouseEnter,
             onMouseLeave: _this.handleRowMouseLeave
-          },
-          stickyRightOffset: stickyRightOffset
+          }
         });
       }
 
@@ -162,7 +158,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         getRowProps: getRowProps,
         primaryKey: primaryKey,
         data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex),
-        stickyRightOffset: stickyRightOffset,
         horizontalRenderInfo: info,
         verticalRenderInfo: {
           first: 0,
@@ -222,6 +217,9 @@ export 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`
       // 设置滚动条高度
@@ -251,10 +249,10 @@ export 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;
       }
 
@@ -265,9 +263,10 @@ export 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",
@@ -276,9 +275,12 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           stickyTop = _this$props3.stickyTop,
           hasHeader = _this$props3.hasHeader;
       var renderHeader = getTableRenderTemplate('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.createElement("div", {
@@ -288,7 +290,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           display: hasHeader ? undefined : 'none'
         }
       }, /*#__PURE__*/React.createElement(TableHeader, {
-        info: info
+        info: info,
+        stickyRightOffset: stickyRightOffset
       }), /*#__PURE__*/React.createElement("div", {
         className: Classes.verticalScrollPlaceholder,
         style: this.hasScrollY ? {
@@ -370,6 +373,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           getRowProps = _this$props4.getRowProps,
           primaryKey = _this$props4.primaryKey,
           stickyBottom = _this$props4.stickyBottom;
+      var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
       var renderFooter = getTableRenderTemplate('footer');
 
       if (typeof renderFooter === 'function') {
@@ -377,7 +381,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           rowProps: {
             onMouseEnter: this.handleRowMouseEnter,
             onMouseLeave: this.handleRowMouseLeave
-          }
+          },
+          stickyRightOffset: stickyRightOffset
         });
       }
 
@@ -391,6 +396,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         data: footerDataSource,
         horizontalRenderInfo: info,
         getRowProps: getRowProps,
+        stickyRightOffset: stickyRightOffset,
         primaryKey: primaryKey,
         verticalRenderInfo: {
           offset: 0,
@@ -409,7 +415,8 @@ export 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: Classes.lockShadowMask,
         style: {
@@ -422,7 +429,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: Classes.lockShadowMask,
         style: {
           right: 0,
-          width: info.rightLockTotalWidth + LOCK_SHADOW_PADDING
+          width: info.rightLockTotalWidth + LOCK_SHADOW_PADDING + stickyRightOffset
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: cx(Classes.lockShadow, Classes.rightLockShadow)
@@ -436,17 +443,21 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           hasStickyScroll = _this$props5.hasStickyScroll,
           stickyBottom = _this$props5.stickyBottom;
       var hasScroll = this.state.hasScroll;
+      var isScroll = hasStickyScroll && hasScroll;
+      var stickyScrollContainerStyle = this.getStickyScrollContainerStyle();
       return /*#__PURE__*/React.createElement("div", {
-        className: cx(Classes.horizontalScrollContainer, Classes.horizontalStickyScrollContainer)
+        className: cx(Classes.horizontalScrollContainer, Classes.horizontalStickyScrollContainer),
+        style: stickyScrollContainerStyle
       }, /*#__PURE__*/React.createElement("div", {
         className: cx(Classes.horizontalScrollLeftSpacer),
         style: {
-          width: info.leftLockTotalWidth
+          width: info.leftLockTotalWidth,
+          display: isScroll ? 'block' : 'none'
         }
       }), /*#__PURE__*/React.createElement("div", {
         className: cx(Classes.stickyScroll),
         style: {
-          display: hasStickyScroll && hasScroll ? 'block' : 'none',
+          display: isScroll ? 'block' : 'none',
           bottom: stickyBottom
         }
       }, /*#__PURE__*/React.createElement("div", {
@@ -454,7 +465,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/React.createElement("div", {
         className: cx(Classes.horizontalScrollRightSpacer),
         style: {
-          width: info.rightLockTotalWidth
+          width: info.rightLockTotalWidth,
+          display: isScroll ? 'block' : 'none'
         }
       }));
     }
@@ -463,6 +475,22 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     value: function getScrollBarWidth() {
       return this.props.scrollbarWidth || getScrollbarSize().width;
     }
+  }, {
+    key: "getStickyScrollContainerStyle",
+    value: function getStickyScrollContainerStyle() {
+      var _this$props6 = this.props,
+          hasStickyScroll = _this$props6.hasStickyScroll,
+          stickyScrollHeight = _this$props6.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() {
@@ -471,20 +499,20 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       // console.log('render table')
       var info = calculateRenderInfo(this);
       this.lastInfo = info;
-      var _this$props6 = this.props,
-          dataSource = _this$props6.dataSource,
-          className = _this$props6.className,
-          style = _this$props6.style,
-          hasHeader = _this$props6.hasHeader,
-          useOuterBorder = _this$props6.useOuterBorder,
-          isStickyHead = _this$props6.isStickyHead,
-          isStickyHeader = _this$props6.isStickyHeader,
-          isStickyFooter = _this$props6.isStickyFooter,
-          isLoading = _this$props6.isLoading,
-          getTableProps = _this$props6.getTableProps,
-          footerDataSource = _this$props6.footerDataSource,
-          components = _this$props6.components,
-          bordered = _this$props6.bordered;
+      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 artTableWrapperClassName = cx(Classes.artTableWrapper, (_cx = {
         'use-outer-border': useOuterBorder,
         empty: dataSource.length === 0,
@@ -512,20 +540,19 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _a, _b, _c, _d, _e, _f; // console.log('did mount start')
-      // console.log('update dom helper start')
-
-
-      this.updateDOMHelper(); // console.log('update dom helper end')
+      var _a, _b, _c, _d, _e, _f;
 
+      this.rootSubscription = new Subscription();
+      this.resizeSubject = new Subject();
+      this.updateDOMHelper();
       this.props$ = new BehaviorSubject(this.props);
       this.initSubscriptions();
       this.didMountOrUpdate(); // console.log('did mount end')
 
-      var _this$props7 = this.props,
-          cssVariables = _this$props7.cssVariables,
-          enableCSSVariables = _this$props7.enableCSSVariables,
-          bordered = _this$props7.bordered;
+      var _this$props8 = this.props,
+          cssVariables = _this$props8.cssVariables,
+          enableCSSVariables = _this$props8.enableCSSVariables,
+          bordered = _this$props8.bordered;
       cssPolifill({
         variables: cssVariables || {},
         enableCSSVariables: enableCSSVariables,
@@ -541,10 +568,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       var _a; // console.log('did update start')
 
 
-      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;
 
       if (!shallowEqual(prevProps === null || prevProps === void 0 ? void 0 : prevProps.cssVariables, (_a = this.props) === null || _a === void 0 ? void 0 : _a.cssVariables)) {
         cssPolifill({

package/es/table/pipeline/features/autoFill.js

@@ -133,7 +133,9 @@ function getColumnWidthSum(pipeline) {
 }
 
 function getTableRemainingWidth(pipeline) {
-  var tableWidth = pipeline.getStateAtKey(tableWidthKey);
+  var _a, _b;
+
+  var tableWidth = ((_b = (_a = pipeline.ref.current.domHelper) === null || _a === void 0 ? void 0 : _a.tableBody) === null || _b === void 0 ? void 0 : _b.clientWidth) || pipeline.getStateAtKey(tableWidthKey);
   if (!tableWidth) return;
   var remainingWidth = Math.floor(tableWidth - getColumnWidthSum(pipeline));
   return remainingWidth > 0 ? remainingWidth : 0;

package/es/table/pipeline/features/columnDrag.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import { makeRecursiveMapper, mergeCellProps, collectNodes, isLeafNode } from '../../utils';
+import { makeRecursiveMapper, mergeCellProps, collectNodes, isLeafNode, isSelectColumn } from '../../utils';
 import { FILL_COLUMN_CODE } from './autoFill';
 var stateKey = 'columnDrag';
 var SCROLL_SIZE = 30;
@@ -315,9 +315,13 @@ export function columnDrag() {
                 if (onColumnDragStopped) {
                   var _context;
 
-                  var newColumns = _filterInstanceProperty(_context = sortColumns(columns, cloumnsSortData)).call(_context, function (_ref) {
-                    var code = _ref.code;
-                    return code !== FILL_COLUMN_CODE;
+                  var isRowDragColumn = function isRowDragColumn(code) {
+                    var rowDragColumnKey = pipeline.getFeatureOptions('rowDragColumnKey');
+                    return code === rowDragColumnKey;
+                  };
+
+                  var newColumns = _filterInstanceProperty(_context = sortColumns(columns, cloumnsSortData)).call(_context, function (column) {
+                    return column.code !== FILL_COLUMN_CODE && !isRowDragColumn(column.code) && !isSelectColumn(column);
                   }); // TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
 
 
@@ -343,9 +347,9 @@ export 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 !== FILL_COLUMN_CODE && !lock;
 }
 

package/es/table/pipeline/features/columnFilter.js

@@ -88,7 +88,7 @@ export function filter() {
           var colFilterIcon = (_f = (_e = col.features) === null || _e === void 0 ? void 0 : _e.filterIcon) !== null && _f !== void 0 ? _f : filterIcon;
 
           var _Filter = /*#__PURE__*/React.createElement(Filter, {
-            key: "filter",
+            key: "".concat(col.code, "_filter"),
             FilterPanelContent: filterPanel,
             filterIcon: colFilterIcon,
             filterModel: inputFiltersMap.get(col.code),

package/es/table/pipeline/features/index.d.ts

@@ -18,3 +18,4 @@ export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';
 export { mergeCellHover } from './mergeCellHover';
 export { footerDataSource, FooterDataSourceFeatureOptions, footerRowMetaSymbol } from './footerDataSource';
 export { colGroupExtendable, colGroupExtendOption } from './colGroupExtendable';
+export { rowDrag, RowDragFeatureOptions } from './rowDrag';

package/es/table/pipeline/features/index.js

@@ -17,4 +17,5 @@ export { filter } from './columnFilter';
 export { rangeSelection } from './rangeSelection';
 export { mergeCellHover } from './mergeCellHover';
 export { footerDataSource, footerRowMetaSymbol } from './footerDataSource';
-export { colGroupExtendable } from './colGroupExtendable';
+export { colGroupExtendable } from './colGroupExtendable';
+export { rowDrag } from './rowDrag';