@kdcloudjs/table 1.0.0 → 1.0.3

package/es/_utils/hooks.js

@@ -2,11 +2,10 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
 import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
-import _getIterator from "@babel/runtime-corejs3/core-js/get-iterator";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 
-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 _context; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context = Object.prototype.toString.call(o)).call(_context, 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); }
 

package/es/_utils/numberUtil.js

@@ -1,6 +1,5 @@
 import _Number$isNaN from "@babel/runtime-corejs3/core-js-stable/number/is-nan";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
 
 /**
@@ -131,13 +130,13 @@ export function serialization(strNumber) {
 } // 根据整数精度和小数精度获取最大值
 
 export function getMaxNumberByPrecision(integerPrecision, decimalPrecision) {
-  var _context2, _context3, _context4, _context5;
+  var _context2, _context3;
 
-  var integerString = _reduceInstanceProperty(_context2 = _fillInstanceProperty(_context3 = Array(integerPrecision)).call(_context3, '9')).call(_context2, function (res, value) {
+  var integerString = _fillInstanceProperty(_context2 = Array(integerPrecision)).call(_context2, '9').reduce(function (res, value) {
     return res += value;
   }, '');
 
-  return decimalPrecision <= 0 ? Number(integerString) : Number(_reduceInstanceProperty(_context4 = _fillInstanceProperty(_context5 = Array(decimalPrecision)).call(_context5, '9')).call(_context4, function (res, value) {
+  return decimalPrecision <= 0 ? Number(integerString) : Number(_fillInstanceProperty(_context3 = Array(decimalPrecision)).call(_context3, '9').reduce(function (res, value) {
     return res += value;
   }, integerString + '.'));
 }

package/es/locale/locale.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
 import _createClass from "@babel/runtime-corejs3/helpers/createClass";
 
-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 _context2; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context2 = Object.prototype.toString.call(o)).call(_context2, 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); }
 
@@ -14,7 +14,6 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
 import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
-import _getIterator from "@babel/runtime-corejs3/core-js/get-iterator";
 import React from 'react';
 import zhCNData from './zh-CN';
 

package/es/table/base/calculations.js

@@ -1,7 +1,6 @@
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
 import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
-import _getIterator from "@babel/runtime-corejs3/core-js/get-iterator";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
@@ -12,7 +11,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Map from "@babel/runtime-corejs3/core-js-stable/map";
 
-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 _context10; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context10 = Object.prototype.toString.call(o)).call(_context10, 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); }
 
@@ -177,7 +176,7 @@ function getHorizontalRenderRange(_ref) {
   while (leftIndex + centerCount < flat.center.length) {
     var _col = flat.center[leftIndex + centerCount];
 
-    if (_col.width + centerRenderWidth < minCenterRenderWidth) {
+    if (centerRenderWidth < minCenterRenderWidth) {
       centerRenderWidth += _col.width;
       centerCount += 1;
     } else {
@@ -192,7 +191,7 @@ function getHorizontalRenderRange(_ref) {
   return {
     leftIndex: leftIndex,
     leftBlank: leftBlank,
-    rightIndex: leftIndex + centerCount + flat.right.length,
+    rightIndex: leftIndex + centerCount,
     rightBlank: rightBlank
   };
 } // 一顿计算，将表格本次渲染所需要的数据都给算出来（代码写得有点乱，有较大优化空间）

package/es/table/base/empty.js

@@ -23,10 +23,10 @@ export function EmptyHtmlTable(_ref) {
   }, /*#__PURE__*/React.createElement(Colgroup, {
     descriptors: descriptors
   }), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
-    className: cx(Classes.tableRow, 'first', 'last', 'no-hover'),
+    className: cx(Classes.tableRow, Classes.first, Classes.last, 'no-hover'),
     "data-rowindex": 0
   }, /*#__PURE__*/React.createElement("td", {
-    className: cx(Classes.tableCell, 'first', 'last'),
+    className: cx(Classes.tableCell, Classes.first, Classes.last),
     colSpan: descriptors.length,
     style: {
       height: emptyCellHeight !== null && emptyCellHeight !== void 0 ? emptyCellHeight : 200

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { RenderInfo } from './interfaces';
-export default function TableHeader({ info }: {
+interface TableHeaderProps {
     info: RenderInfo;
-}): JSX.Element;
+    theaderPosition?: 'left' | 'center' | 'right';
+    rowCount?: number;
+}
+export default function TableHeader({ info, theaderPosition, rowCount: _rowCount }: TableHeaderProps): JSX.Element;
+export {};

package/es/table/base/header.js

@@ -1,15 +1,15 @@
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
-import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
-import _getIterator from "@babel/runtime-corejs3/core-js/get-iterator";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
 
-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); }
 
@@ -226,24 +226,43 @@ function calculateHeaderRenderInfo(_ref, rowCount) {
 export default 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 = _flatInstanceProperty(info),
       stickyLeftMap = info.stickyLeftMap,
       stickyRightMap = info.stickyRightMap;
 
-  var rowCount = getTreeDepth(nested.full) + 1;
+  var rowCount = _rowCount !== null && _rowCount !== void 0 ? _rowCount : 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 = _mapInstanceProperty(_context4 = headerRenderInfo.leveled).call(_context4, function (wrappedCols, level) {
-    var headerCells = _mapInstanceProperty(wrappedCols).call(wrappedCols, function (wrapped, index) {
+    var _cx2;
+
+    var _wrappedCols = _concatInstanceProperty(wrappedCols).call(wrappedCols); // 左中右区域渲染，分组列可能单独位于一个区域，此时其他区域也需要适配分组的高度
+    // rowspan 需要空白的列头去占位, 需要补充额外的空白列头
+
+
+    if (rowCount > 1 && ['left', 'right'].indexOf(theaderPosition) > -1) {
+      _wrappedCols.push({
+        type: 'blank',
+        blankSide: 'left',
+        width: 1,
+        isPlacehoder: true
+      });
+    }
+
+    var headerCells = _mapInstanceProperty(_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,
@@ -259,16 +278,11 @@ export default 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.createElement("th", _extends({
           key: colIndex
         }, headerCellProps, {
-          className: cx(Classes.tableHeaderCell, headerCellProps.className, {
-            first: colIndex === 0,
-            last: colIndex + colSpan === fullFlatCount,
-            'lock-left': colIndex < leftFlatCount,
-            'lock-right': colIndex >= fullFlatCount - rightFlatCount,
-            leaf: wrapped.isLeaf
-          }),
+          className: cx(Classes.tableHeaderCell, headerCellProps.className, (_cx = {}, _defineProperty(_cx, Classes.first, colIndex === 0), _defineProperty(_cx, Classes.last, colIndex + colSpan === fullFlatCount), _defineProperty(_cx, Classes.lockLeft, colIndex < leftFlatCount || theaderPosition === 'left'), _defineProperty(_cx, Classes.lockRight, colIndex >= fullFlatCount - rightFlatCount || theaderPosition === 'right'), _defineProperty(_cx, Classes.leaf, wrapped.isLeaf), _cx)),
           colSpan: colSpan,
           rowSpan: isLeaf ? rowCount - level : undefined,
           style: _extends(_extends({
@@ -276,12 +290,20 @@ export default 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.createElement("div", {
+          className: 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.createElement("th", {
-            key: wrapped.blankSide
+            key: wrapped.blankSide,
+            style: {
+              visibility: wrapped.isPlacehoder ? 'hidden' : undefined
+            }
           });
         } else {
           return null;
@@ -291,10 +313,7 @@ export default function TableHeader(_ref2) {
 
     return /*#__PURE__*/React.createElement("tr", {
       key: level,
-      className: cx(Classes.tableHeaderRow, {
-        first: level === 0,
-        last: level === rowCount - 1
-      })
+      className: cx(Classes.tableHeaderRow, (_cx2 = {}, _defineProperty(_cx2, Classes.first, level === 0), _defineProperty(_cx2, Classes.last, level === rowCount - 1), _cx2))
     }, headerCells);
   });
 

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

@@ -37,7 +37,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/es/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/es/table/base/helpers/TableDOMUtils.js

@@ -48,10 +48,12 @@ export var TableDOMHelper = /*#__PURE__*/function () {
     this.artTableWrapper = artTableWrapper;
     this.artTable = artTableWrapper.querySelector(".".concat(Classes.artTable));
     this.tableHeader = this.artTable.querySelector(".".concat(Classes.tableHeader));
+    this.tableHeaderMain = this.artTable.querySelector(".".concat(Classes.tableHeaderMain));
     this.tableBody = this.artTable.querySelector(".".concat(Classes.tableBody));
     this.virtual = this.artTable.querySelector(".".concat(Classes.virtual));
     this.tableElement = this.artTable.querySelector(".".concat(Classes.tableBody, " table"));
     this.tableFooter = this.artTable.querySelector(".".concat(Classes.tableFooter));
+    this.tableFooterMain = this.artTable.querySelector(".".concat(Classes.tableFooterMain));
 
     var stickyScrollSelector = _concatInstanceProperty(_context = ".".concat(Classes.artTable, " + .")).call(_context, Classes.stickyScroll);
 
@@ -73,23 +75,25 @@ export var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getTableBodyHtmlTable",
     value: function getTableBodyHtmlTable() {
-      return this.artTable.querySelector(".".concat(Classes.tableBody, " table"));
+      var _context2;
+
+      return this.artTable.querySelector(_concatInstanceProperty(_context2 = ".".concat(Classes.tableBody, " .")).call(_context2, Classes.virtual, " table"));
     }
   }, {
     key: "getLeftLockShadow",
     value: function getLeftLockShadow() {
-      var _context2;
+      var _context3;
 
-      var selector = _concatInstanceProperty(_context2 = ".".concat(Classes.lockShadowMask, " .")).call(_context2, Classes.leftLockShadow);
+      var selector = _concatInstanceProperty(_context3 = ".".concat(Classes.lockShadowMask, " .")).call(_context3, Classes.leftLockShadow);
 
       return this.artTable.querySelector(selector);
     }
   }, {
     key: "getRightLockShadow",
     value: function getRightLockShadow() {
-      var _context3;
+      var _context4;
 
-      var selector = _concatInstanceProperty(_context3 = ".".concat(Classes.lockShadowMask, " .")).call(_context3, Classes.rightLockShadow);
+      var selector = _concatInstanceProperty(_context4 = ".".concat(Classes.lockShadowMask, " .")).call(_context4, Classes.rightLockShadow);
 
       return this.artTable.querySelector(selector);
     }
@@ -98,6 +102,20 @@ export var TableDOMHelper = /*#__PURE__*/function () {
     value: function getLoadingIndicator() {
       return this.artTableWrapper.querySelector(".".concat(Classes.loadingIndicator));
     }
+  }, {
+    key: "getRowTop",
+    value: function getRowTop(rowIndex) {
+      var _context5, _context6;
+
+      if (rowIndex === 0) return 0;
+
+      var selector = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = ".".concat(Classes.tableBody, " .")).call(_context6, 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/es/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/es/table/base/helpers/getRichVisibleRectsStream.js

@@ -0,0 +1,216 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import getNodeName from '@popperjs/core/lib/dom-utils/getNodeName';
+import getOffsetParent from '@popperjs/core/lib/dom-utils/getOffsetParent';
+import getParentNode from '@popperjs/core/lib/dom-utils/getParentNode';
+import getWindow from '@popperjs/core/lib/dom-utils/getWindow';
+import getWindowScroll from '@popperjs/core/lib/dom-utils/getWindowScroll';
+import { isHTMLElement } from '@popperjs/core/lib/dom-utils/instanceOf';
+import isScrollParent from '@popperjs/core/lib/dom-utils/isScrollParent';
+import ResizeObserver from 'resize-observer-polyfill';
+import { fromEvent, merge, Observable } from 'rxjs';
+import * as op from 'rxjs/operators';
+import { shallowEqual } from '../utils';
+
+function isWindow(arg) {
+  return arg.toString() === '[object Window]';
+}
+
+function isBody(arg) {
+  return getNodeName(arg) === 'body';
+}
+
+function isHtml(arg) {
+  return getNodeName(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 += getWindowScroll(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 = getOffsetParent(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 (_includesInstanceProperty(offsetParents).call(offsetParents, scrollParent)) {
+    return scrollParent;
+  }
+
+  return getOffsetParent(scrollParent);
+} // 列出 target 元素上层的所有 offset parents
+
+
+function listOffsetParents(target) {
+  var result = [];
+  var elem = target;
+
+  while (true) {
+    if (isWindow(elem)) {
+      break;
+    }
+
+    elem = getOffsetParent(elem);
+    result.push(elem);
+  }
+
+  return result;
+}
+
+function fromScrollEvent(element) {
+  return fromEvent(element, 'scroll', {
+    passive: true
+  });
+}
+
+function fromResizeEvent(element) {
+  if (isWindow(element)) {
+    return fromEvent(element, 'resize', {
+      passive: true
+    });
+  }
+
+  return new Observable(function (subscriber) {
+    var resizeObserver = new ResizeObserver(function (entries) {
+      subscriber.next(entries);
+    });
+    resizeObserver.observe(element);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  });
+}
+
+function getScrollParent(elem) {
+  var _context;
+
+  if (_includesInstanceProperty(_context = ['html', 'body', '#document']).call(_context, getNodeName(elem))) {
+    return getWindow(elem);
+  }
+
+  if (isHTMLElement(elem) && isScrollParent(elem)) {
+    return elem;
+  }
+
+  return getScrollParent(getParentNode(elem));
+} // 获取 target 相对于「它的滚动父元素」的可见部分的大小与位置
+
+
+export function getRichVisibleRectsStream(target, structureMayChange$, virtualDebugLabel) {
+  return structureMayChange$.pipe(op.startWith('init'), op.map(function () {
+    // target 的第一个滚动父元素，我们认为这就是虚拟滚动发生的地方
+    // 即虚拟滚动不考虑「更上层元素发生滚动」的情况
+    // 直接从父元素开始查找，防止自身设置overflow属性导致是同一个元素
+    var scrollParent = getScrollParent(getParentNode(target)); // target 和 scrollParent 的共同 offset 祖先，作为布局尺寸计算时的参照元素
+
+    var commonOffsetAncestor = findCommonOffsetAncestor(target, scrollParent);
+    return {
+      scrollParent: scrollParent,
+      commonOffsetAncestor: commonOffsetAncestor
+    };
+  }), op.distinctUntilChanged(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$ = 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/es/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;