@kdcloudjs/table 1.0.0 → 1.0.3

package/lib/table/base/header.js

@@ -8,8 +8,6 @@ var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
 
 var _getIteratorMethod = require("@babel/runtime-corejs3/core-js/get-iterator-method");
 
-var _getIterator = require("@babel/runtime-corejs3/core-js/get-iterator");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -17,6 +15,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = TableHeader;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
@@ -35,7 +35,7 @@ var _utils = require("../utils");
 
 var _styles = require("./styles");
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof _Symbol === "undefined" || _getIteratorMethod(o) == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = _getIterator(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { var _context6; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context6 = Object.prototype.toString.call(o)).call(_context6, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
@@ -247,21 +247,40 @@ function calculateHeaderRenderInfo(_ref, rowCount) {
 function TableHeader(_ref2) {
   var _context4, _context5;
 
-  var info = _ref2.info;
+  var info = _ref2.info,
+      theaderPosition = _ref2.theaderPosition,
+      _rowCount = _ref2.rowCount;
   var nested = info.nested,
       flat = (0, _flat.default)(info),
       stickyLeftMap = info.stickyLeftMap,
       stickyRightMap = info.stickyRightMap;
-  var rowCount = (0, _utils.getTreeDepth)(nested.full) + 1;
+  var rowCount = _rowCount !== null && _rowCount !== void 0 ? _rowCount : (0, _utils.getTreeDepth)(nested.full) + 1;
   var headerRenderInfo = calculateHeaderRenderInfo(info, rowCount);
   var fullFlatCount = flat.full.length;
   var leftFlatCount = flat.left.length;
   var rightFlatCount = flat.right.length;
   var thead = (0, _map.default)(_context4 = headerRenderInfo.leveled).call(_context4, function (wrappedCols, level) {
-    var headerCells = (0, _map.default)(wrappedCols).call(wrappedCols, function (wrapped, index) {
+    var _cx2;
+
+    var _wrappedCols = (0, _concat.default)(wrappedCols).call(wrappedCols); // 左中右区域渲染，分组列可能单独位于一个区域，此时其他区域也需要适配分组的高度
+    // rowspan 需要空白的列头去占位, 需要补充额外的空白列头
+
+
+    if (rowCount > 1 && ['left', 'right'].indexOf(theaderPosition) > -1) {
+      _wrappedCols.push({
+        type: 'blank',
+        blankSide: 'left',
+        width: 1,
+        isPlacehoder: true
+      });
+    }
+
+    var headerCells = (0, _map.default)(_wrappedCols).call(_wrappedCols, function (wrapped, index) {
       var _a, _b, _c;
 
       if (wrapped.type === 'normal') {
+        var _cx;
+
         var colIndex = wrapped.colIndex,
             colSpan = wrapped.colSpan,
             isLeaf = wrapped.isLeaf,
@@ -277,16 +296,12 @@ function TableHeader(_ref2) {
           positionStyle.right = stickyRightMap.get(colIndex);
         }
 
+        var justifyContent = col.align === 'right' ? 'flex-end' : col.align === 'center' ? 'center' : 'flex-start';
+
         var cell = /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
           key: colIndex
         }, headerCellProps, {
-          className: (0, _classnames.default)(_styles.Classes.tableHeaderCell, headerCellProps.className, {
-            first: colIndex === 0,
-            last: colIndex + colSpan === fullFlatCount,
-            'lock-left': colIndex < leftFlatCount,
-            'lock-right': colIndex >= fullFlatCount - rightFlatCount,
-            leaf: wrapped.isLeaf
-          }),
+          className: (0, _classnames.default)(_styles.Classes.tableHeaderCell, headerCellProps.className, (_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.first, colIndex === 0), (0, _defineProperty2.default)(_cx, _styles.Classes.last, colIndex + colSpan === fullFlatCount), (0, _defineProperty2.default)(_cx, _styles.Classes.lockLeft, colIndex < leftFlatCount || theaderPosition === 'left'), (0, _defineProperty2.default)(_cx, _styles.Classes.lockRight, colIndex >= fullFlatCount - rightFlatCount || theaderPosition === 'right'), (0, _defineProperty2.default)(_cx, _styles.Classes.leaf, wrapped.isLeaf), _cx)),
           colSpan: colSpan,
           rowSpan: isLeaf ? rowCount - level : undefined,
           style: (0, _extends2.default)((0, _extends2.default)({
@@ -294,13 +309,21 @@ function TableHeader(_ref2) {
             verticalAlign: (_b = col.verticalAlign) !== null && _b !== void 0 ? _b : 'middle'
           }, headerCellProps.style), positionStyle),
           "data-code": col.code
-        }), (_c = col.title) !== null && _c !== void 0 ? _c : col.name);
+        }), theaderPosition === 'center' && positionStyle.position === 'sticky' ? null : /*#__PURE__*/_react.default.createElement("div", {
+          className: _styles.Classes.tableHeaderCellContent,
+          style: {
+            justifyContent: justifyContent
+          }
+        }, (_c = col.title) !== null && _c !== void 0 ? _c : col.name));
 
         return cell;
       } else {
         if (wrapped.width > 0) {
           return /*#__PURE__*/_react.default.createElement("th", {
-            key: wrapped.blankSide
+            key: wrapped.blankSide,
+            style: {
+              visibility: wrapped.isPlacehoder ? 'hidden' : undefined
+            }
           });
         } else {
           return null;
@@ -309,10 +332,7 @@ function TableHeader(_ref2) {
     });
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: level,
-      className: (0, _classnames.default)(_styles.Classes.tableHeaderRow, {
-        first: level === 0,
-        last: level === rowCount - 1
-      })
+      className: (0, _classnames.default)(_styles.Classes.tableHeaderRow, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, _styles.Classes.first, level === 0), (0, _defineProperty2.default)(_cx2, _styles.Classes.last, level === rowCount - 1), _cx2))
     }, headerCells);
   });
   var colgroup = (0, _map.default)(_context5 = (0, _flat.default)(headerRenderInfo)).call(_context5, function (wrapped) {

package/lib/table/base/helpers/SpanManager.js

@@ -47,7 +47,7 @@ var SpanManager = /*#__PURE__*/function () {
     value: function add(rowIndex, colIndex, colSpan, rowSpan) {
       this.rects.push({
         left: colIndex,
-        right: colIndex + colSpan,
+        right: colIndex + (colSpan < 1 ? 1 : colSpan),
         top: rowIndex,
         bottom: rowIndex + rowSpan
       });

package/lib/table/base/helpers/TableDOMUtils.d.ts

@@ -8,6 +8,8 @@ export declare class TableDOMHelper {
     readonly tableFooter: HTMLDivElement;
     readonly stickyScroll: HTMLDivElement;
     readonly stickyScrollItem: HTMLDivElement;
+    readonly tableHeaderMain: HTMLDivElement;
+    readonly tableFooterMain: HTMLDivElement;
     constructor(artTableWrapper: HTMLDivElement);
     getVirtualTop(): HTMLDivElement;
     getTableRows(): NodeListOf<HTMLTableRowElement>;
@@ -15,4 +17,5 @@ export declare class TableDOMHelper {
     getLeftLockShadow(): HTMLDivElement;
     getRightLockShadow(): HTMLDivElement;
     getLoadingIndicator(): HTMLDivElement;
+    getRowTop(rowIndex: number): number;
 }

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

@@ -60,10 +60,12 @@ var TableDOMHelper = /*#__PURE__*/function () {
     this.artTableWrapper = artTableWrapper;
     this.artTable = artTableWrapper.querySelector(".".concat(_styles.Classes.artTable));
     this.tableHeader = this.artTable.querySelector(".".concat(_styles.Classes.tableHeader));
+    this.tableHeaderMain = this.artTable.querySelector(".".concat(_styles.Classes.tableHeaderMain));
     this.tableBody = this.artTable.querySelector(".".concat(_styles.Classes.tableBody));
     this.virtual = this.artTable.querySelector(".".concat(_styles.Classes.virtual));
     this.tableElement = this.artTable.querySelector(".".concat(_styles.Classes.tableBody, " table"));
     this.tableFooter = this.artTable.querySelector(".".concat(_styles.Classes.tableFooter));
+    this.tableFooterMain = this.artTable.querySelector(".".concat(_styles.Classes.tableFooterMain));
     var stickyScrollSelector = (0, _concat.default)(_context = ".".concat(_styles.Classes.artTable, " + .")).call(_context, _styles.Classes.stickyScroll);
     this.stickyScroll = artTableWrapper.querySelector(stickyScrollSelector);
     this.stickyScrollItem = this.stickyScroll.querySelector(".".concat(_styles.Classes.stickyScrollItem));
@@ -83,22 +85,24 @@ var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getTableBodyHtmlTable",
     value: function getTableBodyHtmlTable() {
-      return this.artTable.querySelector(".".concat(_styles.Classes.tableBody, " table"));
+      var _context2;
+
+      return this.artTable.querySelector((0, _concat.default)(_context2 = ".".concat(_styles.Classes.tableBody, " .")).call(_context2, _styles.Classes.virtual, " table"));
     }
   }, {
     key: "getLeftLockShadow",
     value: function getLeftLockShadow() {
-      var _context2;
+      var _context3;
 
-      var selector = (0, _concat.default)(_context2 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context2, _styles.Classes.leftLockShadow);
+      var selector = (0, _concat.default)(_context3 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context3, _styles.Classes.leftLockShadow);
       return this.artTable.querySelector(selector);
     }
   }, {
     key: "getRightLockShadow",
     value: function getRightLockShadow() {
-      var _context3;
+      var _context4;
 
-      var selector = (0, _concat.default)(_context3 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context3, _styles.Classes.rightLockShadow);
+      var selector = (0, _concat.default)(_context4 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context4, _styles.Classes.rightLockShadow);
       return this.artTable.querySelector(selector);
     }
   }, {
@@ -106,6 +110,18 @@ var TableDOMHelper = /*#__PURE__*/function () {
     value: function getLoadingIndicator() {
       return this.artTableWrapper.querySelector(".".concat(_styles.Classes.loadingIndicator));
     }
+  }, {
+    key: "getRowTop",
+    value: function getRowTop(rowIndex) {
+      var _context5, _context6;
+
+      if (rowIndex === 0) return 0;
+      var selector = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = ".".concat(_styles.Classes.tableBody, " .")).call(_context6, _styles.Classes.tableRow, "[data-rowindex=\"")).call(_context5, rowIndex, "\"]");
+      var row = this.artTable.querySelector(selector);
+      var rowOffsetTop = row && row.offsetTop || 0;
+      var tableOffsetTop = this.tableElement.offsetTop || 0;
+      return rowOffsetTop + tableOffsetTop;
+    }
   }]);
   return TableDOMHelper;
 }();

package/lib/table/base/helpers/getRichVisibleRectsStream.d.ts

@@ -0,0 +1,23 @@
+import { Observable } from 'rxjs';
+export declare function getRichVisibleRectsStream(target: HTMLElement, structureMayChange$: Observable<'structure-may-change'>, virtualDebugLabel?: string): Observable<{
+    event: unknown;
+    targetRect: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    };
+    scrollParentRect: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    };
+    offsetY: number;
+    clipRect: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+}>;

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

@@ -0,0 +1,246 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRichVisibleRectsStream = getRichVisibleRectsStream;
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _getNodeName = _interopRequireDefault(require("@popperjs/core/lib/dom-utils/getNodeName"));
+
+var _getOffsetParent = _interopRequireDefault(require("@popperjs/core/lib/dom-utils/getOffsetParent"));
+
+var _getParentNode = _interopRequireDefault(require("@popperjs/core/lib/dom-utils/getParentNode"));
+
+var _getWindow = _interopRequireDefault(require("@popperjs/core/lib/dom-utils/getWindow"));
+
+var _getWindowScroll = _interopRequireDefault(require("@popperjs/core/lib/dom-utils/getWindowScroll"));
+
+var _instanceOf = require("@popperjs/core/lib/dom-utils/instanceOf");
+
+var _isScrollParent = _interopRequireDefault(require("@popperjs/core/lib/dom-utils/isScrollParent"));
+
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
+var _rxjs = require("rxjs");
+
+var op = _interopRequireWildcard(require("rxjs/operators"));
+
+var _utils = require("../utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function isWindow(arg) {
+  return arg.toString() === '[object Window]';
+}
+
+function isBody(arg) {
+  return (0, _getNodeName.default)(arg) === 'body';
+}
+
+function isHtml(arg) {
+  return (0, _getNodeName.default)(arg) === 'html';
+}
+
+function isHtmlOrBody(arg) {
+  return isHtml(arg) || isBody(arg);
+} // 计算从 start（子元素）到 stop（祖先元素）之间所有元素的 scrollTop 或 scrollLeft 的和
+// 注意 start 和 stop 都是 INCLUSIVE 的，即两者的 scrollTop 或 scrollLeft 都会统计在内
+
+
+function accumulateScrollOffset(start, stop, scrollOffsetKey) {
+  var result = 0;
+  var elem = start;
+
+  while (elem != null) {
+    result += elem[scrollOffsetKey];
+
+    if (elem === stop || isWindow(stop) && isHtmlOrBody(elem)) {
+      break;
+    }
+
+    elem = elem.parentElement;
+  }
+
+  if (isWindow(stop)) {
+    result += (0, _getWindowScroll.default)(elem)[scrollOffsetKey];
+  }
+
+  return result;
+}
+/**
+ * 获取 target 相对于 base 的布局大小和相对位置。
+ * 注意该方法会考虑滚动所带来的影响
+ */
+
+
+function getRelativeLayoutRect(base, target) {
+  if (isWindow(target) || isHtmlOrBody(target)) {
+    return {
+      left: 0,
+      right: window.innerWidth,
+      top: 0,
+      bottom: window.innerHeight
+    };
+  }
+
+  var deltaX = 0;
+  var deltaY = 0;
+  var elem = target;
+
+  while (elem != null && elem != base) {
+    deltaY += elem.offsetTop;
+    deltaX += elem.offsetLeft;
+    var offsetParent = (0, _getOffsetParent.default)(elem);
+    deltaY -= accumulateScrollOffset(elem.parentElement, offsetParent, 'scrollTop');
+    deltaX -= accumulateScrollOffset(elem.parentElement, offsetParent, 'scrollLeft');
+
+    if (isWindow(offsetParent)) {
+      break;
+    }
+
+    deltaY += offsetParent.clientTop;
+    deltaX += offsetParent.clientLeft;
+    elem = offsetParent;
+  }
+
+  return {
+    top: deltaY,
+    bottom: deltaY + target.offsetHeight,
+    left: deltaX,
+    right: deltaX + target.offsetWidth
+  };
+}
+
+function findCommonOffsetAncestor(target, scrollParent) {
+  if (isWindow(scrollParent)) {
+    return scrollParent;
+  }
+
+  var offsetParents = listOffsetParents(target);
+
+  if ((0, _includes.default)(offsetParents).call(offsetParents, scrollParent)) {
+    return scrollParent;
+  }
+
+  return (0, _getOffsetParent.default)(scrollParent);
+} // 列出 target 元素上层的所有 offset parents
+
+
+function listOffsetParents(target) {
+  var result = [];
+  var elem = target;
+
+  while (true) {
+    if (isWindow(elem)) {
+      break;
+    }
+
+    elem = (0, _getOffsetParent.default)(elem);
+    result.push(elem);
+  }
+
+  return result;
+}
+
+function fromScrollEvent(element) {
+  return (0, _rxjs.fromEvent)(element, 'scroll', {
+    passive: true
+  });
+}
+
+function fromResizeEvent(element) {
+  if (isWindow(element)) {
+    return (0, _rxjs.fromEvent)(element, 'resize', {
+      passive: true
+    });
+  }
+
+  return new _rxjs.Observable(function (subscriber) {
+    var resizeObserver = new _resizeObserverPolyfill.default(function (entries) {
+      subscriber.next(entries);
+    });
+    resizeObserver.observe(element);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  });
+}
+
+function getScrollParent(elem) {
+  var _context;
+
+  if ((0, _includes.default)(_context = ['html', 'body', '#document']).call(_context, (0, _getNodeName.default)(elem))) {
+    return (0, _getWindow.default)(elem);
+  }
+
+  if ((0, _instanceOf.isHTMLElement)(elem) && (0, _isScrollParent.default)(elem)) {
+    return elem;
+  }
+
+  return getScrollParent((0, _getParentNode.default)(elem));
+} // 获取 target 相对于「它的滚动父元素」的可见部分的大小与位置
+
+
+function getRichVisibleRectsStream(target, structureMayChange$, virtualDebugLabel) {
+  return structureMayChange$.pipe(op.startWith('init'), op.map(function () {
+    // target 的第一个滚动父元素，我们认为这就是虚拟滚动发生的地方
+    // 即虚拟滚动不考虑「更上层元素发生滚动」的情况
+    // 直接从父元素开始查找，防止自身设置overflow属性导致是同一个元素
+    var scrollParent = getScrollParent((0, _getParentNode.default)(target)); // target 和 scrollParent 的共同 offset 祖先，作为布局尺寸计算时的参照元素
+
+    var commonOffsetAncestor = findCommonOffsetAncestor(target, scrollParent);
+    return {
+      scrollParent: scrollParent,
+      commonOffsetAncestor: commonOffsetAncestor
+    };
+  }), op.distinctUntilChanged(_utils.shallowEqual), op.tap(function (structure) {
+    if (virtualDebugLabel) {
+      console.log("%c[ali-react-table STRUCTURE ".concat(virtualDebugLabel, "]"), 'color: #4f9052; font-weight: bold', '\ntarget:', target, '\nscrollParent:', structure.scrollParent, '\ncommonOffsetAncestor:', structure.commonOffsetAncestor);
+    }
+  }), op.switchMap(function (_ref) {
+    var scrollParent = _ref.scrollParent,
+        commonOffsetAncestor = _ref.commonOffsetAncestor;
+    var events$ = (0, _rxjs.merge)(fromScrollEvent(scrollParent), fromResizeEvent(scrollParent), fromResizeEvent(target));
+    return events$.pipe(op.map(function (event) {
+      return {
+        targetRect: getRelativeLayoutRect(commonOffsetAncestor, target),
+        scrollParentRect: getRelativeLayoutRect(commonOffsetAncestor, scrollParent),
+        event: event
+      };
+    }), op.map(function (_ref2) {
+      var event = _ref2.event,
+          scrollParentRect = _ref2.scrollParentRect,
+          targetRect = _ref2.targetRect;
+      return {
+        event: event,
+        targetRect: targetRect,
+        scrollParentRect: scrollParentRect,
+        offsetY: Math.max(0, scrollParentRect.top - targetRect.top),
+        // 表格的横向滚动总是发生在表格内部，所以这里不需要计算 offsetX
+        // offsetX: Math.max(0, scrollParentRect.left - targetRect.left),
+        clipRect: {
+          left: Math.max(targetRect.left, scrollParentRect.left),
+          top: Math.max(targetRect.top, scrollParentRect.top),
+          right: Math.min(targetRect.right, scrollParentRect.right),
+          bottom: Math.min(targetRect.bottom, scrollParentRect.bottom)
+        }
+      };
+    }));
+  }), op.tap(function (rects) {
+    if (virtualDebugLabel) {
+      console.log("%c[ali-react-table RECTS ".concat(virtualDebugLabel, "]"), 'color: #4f9052; font-weight: bold', '\noffsetY:', rects.offsetY, '\ntargetRect:', rects.targetRect, '\nscrollParentRect:', rects.scrollParentRect, '\nclipRect:', rects.clipRect, '\nevent:', rects.event);
+    }
+  }));
+}

package/lib/table/base/html-table.d.ts

@@ -4,6 +4,7 @@ import { BaseTableProps } from './table';
 export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey'>> {
     tbodyHtmlTag: 'tbody' | 'tfoot';
     data: any[];
+    hasScrollY?: boolean;
     horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
     verticalRenderInfo: {
         offset: number;
@@ -11,5 +12,6 @@ export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowPro
         last: number;
         limit: number;
     };
+    tbodyPosition?: 'left' | 'center' | 'right';
 }
-export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, data, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo }: HtmlTableProps): JSX.Element;
+export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, hasScrollY, data, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, tbodyPosition }: HtmlTableProps): JSX.Element;

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

@@ -9,10 +9,14 @@ exports.HtmlTable = HtmlTable;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _flat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/flat"));
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -25,13 +29,17 @@ var _SpanManager = _interopRequireDefault(require("./helpers/SpanManager"));
 
 var _styles = require("./styles");
 
+var _utils = require("./utils");
+
 function HtmlTable(_ref) {
   var tbodyHtmlTag = _ref.tbodyHtmlTag,
       getRowProps = _ref.getRowProps,
       primaryKey = _ref.primaryKey,
+      hasScrollY = _ref.hasScrollY,
       data = _ref.data,
       verInfo = _ref.verticalRenderInfo,
-      hozInfo = _ref.horizontalRenderInfo;
+      hozInfo = _ref.horizontalRenderInfo,
+      tbodyPosition = _ref.tbodyPosition;
   var flat = (0, _flat.default)(hozInfo),
       hoz = hozInfo.horizontalRenderRange;
   var spanManager = new _SpanManager.default();
@@ -43,26 +51,37 @@ function HtmlTable(_ref) {
   }), /*#__PURE__*/_react.default.createElement(tbodyHtmlTag, null, (0, _map.default)(data).call(data, renderRow)));
 
   function renderRow(record, i) {
-    var _context;
+    var _cx, _context;
 
     var rowIndex = verInfo.offset + i;
     spanManager.stripUpwards(rowIndex);
     var rowProps = getRowProps(record, rowIndex);
-    var rowClass = (0, _classnames.default)(_styles.Classes.tableRow, {
-      first: rowIndex === verInfo.first,
-      last: rowIndex === verInfo.last,
-      even: rowIndex % 2 === 0,
-      odd: rowIndex % 2 === 1
-    }, rowProps === null || rowProps === void 0 ? void 0 : rowProps.className);
+    var rowClass = (0, _classnames.default)(_styles.Classes.tableRow, (_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.first, rowIndex === verInfo.first), (0, _defineProperty2.default)(_cx, _styles.Classes.last, rowIndex === verInfo.last), (0, _defineProperty2.default)(_cx, _styles.Classes.even, rowIndex % 2 === 0), (0, _defineProperty2.default)(_cx, _styles.Classes.odd, rowIndex % 2 === 1), _cx), rowProps === null || rowProps === void 0 ? void 0 : rowProps.className);
+    var visibleColumnDescriptor = (0, _concat.default)(_context = hozInfo.visible).call(_context); // 左中右区域渲染，存在融合单元格时需要适配rowspan属性
+    // 如果固定的列均存在融合单元格，需空白一列做占位,否则融合的单元格不会渲染，导致显示异常
+    // 这里无法区分是否存在融合列，默认左右固定区域均添加占位空白列
+
+    if (['left', 'right'].indexOf(tbodyPosition) > -1) {
+      visibleColumnDescriptor.push({
+        type: 'blank',
+        blankSide: 'left',
+        width: 0,
+        isPlacehoder: true
+      });
+    }
+
     return /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({}, rowProps, {
       className: rowClass,
-      key: _internals.internals.safeGetRowKey(primaryKey, record, rowIndex),
+      key: (rowProps === null || rowProps === void 0 ? void 0 : rowProps['data-row-detail-key']) ? rowProps['data-row-detail-key'] : _internals.internals.safeGetRowKey(primaryKey, record, rowIndex),
       "data-rowindex": rowIndex,
       "data-role": 'table-row'
-    }), (0, _map.default)(_context = hozInfo.visible).call(_context, function (descriptor) {
+    }), (0, _map.default)(visibleColumnDescriptor).call(visibleColumnDescriptor, function (descriptor) {
       if (descriptor.type === 'blank') {
         return /*#__PURE__*/_react.default.createElement("td", {
-          key: descriptor.blankSide
+          key: descriptor.blankSide,
+          style: {
+            visibility: descriptor.isPlacehoder ? 'hidden' : undefined
+          }
         });
       }
 
@@ -71,6 +90,8 @@ function HtmlTable(_ref) {
   }
 
   function renderBodyCell(record, rowIndex, column, colIndex) {
+    var _cx2;
+
     var _a, _b, _c;
 
     if (spanManager.testSkip(rowIndex, colIndex)) {
@@ -101,38 +122,35 @@ function HtmlTable(_ref) {
       if (cellProps.rowSpan != null) {
         rowSpan = cellProps.rowSpan;
       }
-    } // rowSpan/colSpan 不能过大，避免 rowSpan/colSpan 影响因虚拟滚动而未渲染的单元格
-
+    }
 
-    rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
-    colSpan = Math.min(colSpan, leftFlatCount + hoz.rightIndex - colIndex);
     var hasSpan = colSpan > 1 || rowSpan > 1;
 
     if (hasSpan) {
       spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
-    }
+    } // rowSpan/colSpan 不能过大，避免 rowSpan/colSpan 影响因虚拟滚动而未渲染的单元格
+
+
+    rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
+    colSpan = Math.min(colSpan, hozInfo.visible.length - colIndex); // todo: 右侧有列固定的情况下colSpan计算不对，这里先限制一下
 
+    rowSpan = Math.max(rowSpan, 1);
+    colSpan = Math.max(colSpan, 1);
     var positionStyle = {};
+    var scrollbarWidth = hasScrollY ? (0, _utils.getScrollbarSize)().width : 0;
 
     if (colIndex < leftFlatCount) {
       positionStyle.position = 'sticky';
       positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
     } else if (colIndex >= fullFlatCount - rightFlatCount) {
       positionStyle.position = 'sticky';
-      positionStyle.right = hozInfo.stickyRightMap.get(colIndex);
+      positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - scrollbarWidth;
     }
 
     return /*#__PURE__*/_react.default.createElement('td', (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
       key: colIndex
     }, cellProps), {
-      className: (0, _classnames.default)(_styles.Classes.tableCell, cellProps.className, {
-        // class
-        first: colIndex === 0,
-        last: colIndex + colSpan === fullFlatCount,
-        'lock-left': colIndex < leftFlatCount,
-        'lock-right': colIndex >= fullFlatCount - rightFlatCount,
-        'row-span': rowSpan > 1
-      })
+      className: (0, _classnames.default)(_styles.Classes.tableCell, cellProps.className, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, _styles.Classes.first, colIndex === 0), (0, _defineProperty2.default)(_cx2, _styles.Classes.last, colIndex + colSpan === fullFlatCount), (0, _defineProperty2.default)(_cx2, _styles.Classes.lockLeft, colIndex < leftFlatCount || tbodyPosition === 'left'), (0, _defineProperty2.default)(_cx2, _styles.Classes.lockRight, colIndex >= fullFlatCount - rightFlatCount), (0, _defineProperty2.default)(_cx2, _styles.Classes.rowSpan, rowSpan > 1), _cx2))
     }), hasSpan ? {
       colSpan: colSpan,
       rowSpan: rowSpan
@@ -144,6 +162,6 @@ function HtmlTable(_ref) {
       'data-role': 'table-cell',
       'data-rowindex': rowIndex,
       'data-code': column.code
-    }), cellContent);
+    }), tbodyPosition === 'center' && positionStyle.position === 'sticky' ? null : cellContent);
   }
 }