@kdcloudjs/table 1.1.0 → 1.1.2

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

@@ -69,31 +69,33 @@ export var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getTableRows",
     value: function getTableRows() {
-      var htmlTable = this.getTableBodyHtmlTable();
-      return htmlTable.querySelectorAll("tbody > .".concat(Classes.tableRow));
+      var _context2;
+
+      var tbody = this.artTable.querySelector(_concatInstanceProperty(_context2 = ".".concat(Classes.tableBody, " .")).call(_context2, Classes.virtual, " table tbody"));
+      return tbody.childNodes;
     }
   }, {
     key: "getTableBodyHtmlTable",
     value: function getTableBodyHtmlTable() {
-      var _context2;
+      var _context3;
 
-      return this.artTable.querySelector(_concatInstanceProperty(_context2 = ".".concat(Classes.tableBody, " .")).call(_context2, Classes.virtual, " table"));
+      return this.artTable.querySelector(_concatInstanceProperty(_context3 = ".".concat(Classes.tableBody, " .")).call(_context3, Classes.virtual, " table"));
     }
   }, {
     key: "getLeftLockShadow",
     value: function getLeftLockShadow() {
-      var _context3;
+      var _context4;
 
-      var selector = _concatInstanceProperty(_context3 = ".".concat(Classes.lockShadowMask, " .")).call(_context3, Classes.leftLockShadow);
+      var selector = _concatInstanceProperty(_context4 = ".".concat(Classes.lockShadowMask, " .")).call(_context4, Classes.leftLockShadow);
 
       return this.artTable.querySelector(selector);
     }
   }, {
     key: "getRightLockShadow",
     value: function getRightLockShadow() {
-      var _context4;
+      var _context5;
 
-      var selector = _concatInstanceProperty(_context4 = ".".concat(Classes.lockShadowMask, " .")).call(_context4, Classes.rightLockShadow);
+      var selector = _concatInstanceProperty(_context5 = ".".concat(Classes.lockShadowMask, " .")).call(_context5, Classes.rightLockShadow);
 
       return this.artTable.querySelector(selector);
     }
@@ -105,11 +107,11 @@ export var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getRowTop",
     value: function getRowTop(rowIndex) {
-      var _context5, _context6;
+      var _context6, _context7;
 
       if (rowIndex === 0) return 0;
 
-      var selector = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = ".".concat(Classes.tableBody, " .")).call(_context6, Classes.tableRow, "[data-rowindex=\"")).call(_context5, rowIndex, "\"]");
+      var selector = _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = ".".concat(Classes.tableBody, " .")).call(_context7, Classes.tableRow, "[data-rowindex=\"")).call(_context6, rowIndex, "\"]");
 
       var row = this.artTable.querySelector(selector);
       var rowOffsetTop = row && row.offsetTop || 0;

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

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

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

@@ -9,12 +9,11 @@ import { internals } from '../internals';
 import { Colgroup } from './colgroup';
 import SpanManager from './helpers/SpanManager';
 import { Classes } from './styles';
-import { getScrollbarSize } from './utils';
 export function HtmlTable(_ref) {
   var tbodyHtmlTag = _ref.tbodyHtmlTag,
       getRowProps = _ref.getRowProps,
       primaryKey = _ref.primaryKey,
-      hasScrollY = _ref.hasScrollY,
+      stickyRightOffset = _ref.stickyRightOffset,
       data = _ref.data,
       verInfo = _ref.verticalRenderInfo,
       hozInfo = _ref.horizontalRenderInfo,
@@ -119,14 +118,13 @@ export function HtmlTable(_ref) {
     rowSpan = Math.max(rowSpan, 1);
     colSpan = Math.max(colSpan, 1);
     var positionStyle = {};
-    var scrollbarWidth = hasScrollY ? 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) - scrollbarWidth;
+      positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - stickyRightOffset;
     }
 
     return /*#__PURE__*/React.createElement('td', _extends(_extends(_extends(_extends({

package/es/table/base/renderTemplates.js

@@ -14,7 +14,7 @@ import ReactDom from 'react-dom';
 import cx from 'classnames';
 import { HtmlTable } from './html-table';
 import { Classes } from './styles';
-import { composeRowPropsGetter, getScrollbarSize } from './utils';
+import { composeRowPropsGetter } from './utils';
 import { getTreeDepth, browserType } from '../utils';
 import TableHeader from './header';
 var TEMPLATES = new _Map();
@@ -127,14 +127,14 @@ function renderTableBodyInIE(info, props, extra) {
     primaryKey: primaryKey,
     data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex)
   };
-  var scrollbarWidth = extra.hasScrollY ? getScrollbarSize().width : 0;
   var fixedRightTableStyle = {
-    right: -scrollbarWidth
+    right: -extra.stickyRightOffset
   };
   return /*#__PURE__*/React.createElement("div", {
     className: cx(Classes.tableBody, Classes.horizontalScrollContainer)
   }, /*#__PURE__*/React.createElement("div", {
-    className: Classes.virtual
+    className: Classes.virtual,
+    tabIndex: -1
   }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
     key: "top-blank",
     className: cx(Classes.virtualBlank, 'top'),
@@ -194,7 +194,7 @@ function renderTableBodyInIE(info, props, extra) {
     tbodyHtmlTag: "tbody"
   }, commonProps, {
     tbodyPosition: "right",
-    hasScrollY: extra.hasScrollY,
+    stickyRightOffset: extra.stickyRightOffset,
     horizontalRenderInfo: _extends(_extends({}, info), {
       flat: {
         center: right,

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

@@ -149,7 +149,6 @@ export declare const defaultCSSVariables: {
     '---cell-border-vertical': string;
     '--header-cell-border': string;
     '--header-cell-border-horizontal': string;
-    '--header-cell-border-vertical': string;
 };
 export declare const variableConst: string;
 export declare const StyledArtTableWrapper: any;

package/es/table/base/styles.js

@@ -117,8 +117,7 @@ export var defaultCSSVariables = {
   '--cell-border-horizontal': '1px solid #dfe3e8',
   '---cell-border-vertical': '1px solid #dfe3e8',
   '--header-cell-border': '1px solid #dfe3e8',
-  '--header-cell-border-horizontal': '1px solid #dfe3e8',
-  '--header-cell-border-vertical': '1px solid #dfe3e8'
+  '--header-cell-border-horizontal': '1px solid #dfe3e8'
 };
 export var variableConst = getCssVariableText(defaultCSSVariables);
 export var StyledArtTableWrapper = styled.div(_templateObject2 || (_templateObject2 = _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  .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    user-select:none;\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  &.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  // \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:none\n  }\n\n  th.", " {\n    border-right: none;\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    overflow-y: hidden;\n    overflow-x: auto;\n    z-index: ", ";\n    flex-shrink: 0;\n    flex-grow: 0;\n    border-top: 1px solid var(--border-color);\n    background: var(--bgcolor);\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: auto;\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  }\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  //#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  "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, 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.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder);

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

@@ -43,6 +43,8 @@ export interface BaseTableProps {
     hasStickyScroll?: boolean;
     /** 横向粘性滚动条高度 */
     stickyScrollHeight?: 'auto' | number;
+    /** 表格滚动条的宽度 */
+    scrollbarWidth?: number;
     /** 使用来自外层 div 的边框代替单元格的外边框 */
     useOuterBorder?: boolean;
     /** 表格是否在加载中 */
@@ -78,6 +80,12 @@ export interface BaseTableProps {
         [key: string]: any;
     };
     enableCSSVariables?: boolean;
+    scrollLoad?: {
+        /** 表格滚动加载回调 */
+        callback(startIndex: number): void;
+        /** 每个数据块的数据条数 */
+        blockSize?: number;
+    };
 }
 export interface BaseTableState {
     /** 是否要展示自定义滚动条(stickyScroll) */
@@ -125,6 +133,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     private hasScrollY;
     private resizeObserver?;
     private resizeSubject;
+    private offsetY;
     /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
     getDoms(): TableDOMHelper;
     constructor(props: Readonly<BaseTableProps>);
@@ -143,6 +152,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     private renderTableFooter;
     private renderLockShadows;
     private renderStickyScroll;
+    private getScrollBarWidth;
     render(): JSX.Element;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<BaseTableProps>, prevState: Readonly<BaseTableState>): void;

package/es/table/base/table.js

@@ -27,7 +27,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_R
 
 import cx from 'classnames';
 import React from 'react';
-import { BehaviorSubject, combineLatest, noop, Subscription, Subject } from 'rxjs';
+import { BehaviorSubject, combineLatest, noop, Subscription, Subject, from } from 'rxjs';
 import * as op from 'rxjs/operators';
 import { calculateRenderInfo } from './calculations';
 import { EmptyHtmlTable } from './empty';
@@ -93,6 +93,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     _this.rootSubscription = new Subscription();
     _this.hasScrollY = false;
     _this.resizeSubject = new Subject();
+    _this.offsetY = 0;
 
     _this.getRowNodeListByEvent = function (e) {
       var nodeList = null;
@@ -158,6 +159,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           className: cx(tableBodyClassName, 'empty')
         }, /*#__PURE__*/React.createElement("div", {
           className: Classes.virtual,
+          tabIndex: -1,
           style: virtualStyle
         }, /*#__PURE__*/React.createElement(EmptyHtmlTable, {
           descriptors: info.visible,
@@ -172,6 +174,7 @@ 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') {
@@ -180,7 +183,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
             onMouseEnter: _this.handleRowMouseEnter,
             onMouseLeave: _this.handleRowMouseLeave
           },
-          hasScrollY: _this.hasScrollY
+          stickyRightOffset: stickyRightOffset
         });
       }
 
@@ -188,6 +191,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: tableBodyClassName
       }, /*#__PURE__*/React.createElement("div", {
         className: Classes.virtual,
+        tabIndex: -1,
         style: virtualStyle
       }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
         key: "top-blank",
@@ -200,7 +204,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         getRowProps: getRowProps,
         primaryKey: primaryKey,
         data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex),
-        hasScrollY: _this.hasScrollY,
+        stickyRightOffset: stickyRightOffset,
         horizontalRenderInfo: info,
         verticalRenderInfo: {
           first: 0,
@@ -261,7 +265,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       var innerTableWidth = tableBodyHtmlTable.offsetWidth;
       var artTableWidth = artTable.offsetWidth;
       var stickyScrollHeightProp = this.props.stickyScrollHeight;
-      var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? getScrollbarSize().height : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
+      var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
       // 设置滚动条高度
 
       stickyScroll.style.height = "".concat(stickyScrollHeight, "px");
@@ -326,7 +330,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("div", {
         className: Classes.verticalScrollPlaceholder,
         style: this.hasScrollY ? {
-          width: getScrollbarSize().width
+          width: this.getScrollBarWidth()
         } : undefined
       }));
     }
@@ -435,7 +439,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("div", {
         className: Classes.verticalScrollPlaceholder,
         style: this.hasScrollY ? {
-          width: getScrollbarSize().width,
+          width: this.getScrollBarWidth(),
           visibility: 'initial'
         } : undefined
       }));
@@ -480,6 +484,11 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: Classes.stickyScrollItem
       }));
     }
+  }, {
+    key: "getScrollBarWidth",
+    value: function getScrollBarWidth() {
+      return this.props.scrollbarWidth || getScrollbarSize().width;
+    }
   }, {
     key: "render",
     value: function render() {
@@ -654,6 +663,47 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       })).subscribe(function (sizeAndOffset) {
         _this2.setState(sizeAndOffset);
       }));
+      this.rootSubscription.add(richVisibleRects$.pipe(op.map(function (_ref7) {
+        var clipRect = _ref7.clipRect,
+            offsetY = _ref7.offsetY;
+        return {
+          maxRenderHeight: clipRect.bottom - clipRect.top,
+          maxRenderWidth: clipRect.right - clipRect.left,
+          offsetY: offsetY
+        };
+      }), op.distinctUntilChanged(function (x, y) {
+        return x.offsetY - y.offsetY === 0;
+      }), // 计算得到当前行索引对应的数据块，blocks改成数组的形式，兼容快速拖动可视区域出现两个数据块的情况
+      op.map(function (sizeAndOffset) {
+        var _a;
+
+        var offsetY = sizeAndOffset.offsetY,
+            maxRenderHeight = sizeAndOffset.maxRenderHeight;
+        var scrollDirection = offsetY - _this2.offsetY >= 0 ? 'down' : 'up';
+        _this2.offsetY = offsetY;
+        var rowCount = _this2.props.dataSource.length;
+
+        var vertical = _this2.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
+
+        var topIndex = vertical.topIndex,
+            bottomIndex = vertical.bottomIndex;
+        var blockSize = ((_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.blockSize) || 200;
+        var topBlockStartIndex = Math.floor(Math.max(topIndex - 1, 0) / blockSize) * blockSize;
+        var bottomBlockStartIndex = Math.floor((bottomIndex + 1) / blockSize) * blockSize;
+        return scrollDirection === 'down' ? [topBlockStartIndex, bottomBlockStartIndex] : [bottomBlockStartIndex, topBlockStartIndex];
+      }), op.distinctUntilChanged(function (x, y) {
+        return x[0] === y[0] && x[1] === y[1];
+      }), op.switchMap(function (startIndexs) {
+        var event$ = from(startIndexs);
+        return event$.pipe(op.map(function (startIndex) {
+          return startIndex;
+        }));
+      }), // 过滤掉重复掉值
+      op.distinctUntilChanged()).subscribe(function (startIndex) {
+        var _a;
+
+        (_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.callback(startIndex);
+      }));
     }
   }, {
     key: "componentWillUnmount",

package/es/table/pipeline/features/filter/FilterPanel.js

@@ -36,8 +36,8 @@ function FilterPanel(_ref) {
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      opaque = _useState4[0],
-      setOpaque = _useState4[1];
+      visible = _useState4[0],
+      setVisible = _useState4[1];
 
   var ref = React.useRef(null);
 
@@ -47,16 +47,16 @@ function FilterPanel(_ref) {
 
   useEffect(function () {
     setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
-    setOpaque(true);
+    setVisible(true);
   }, [position]);
   useWindowEvents(function (e) {
     return !isContainPanel(e) && onClose();
   }, ['mousedown']);
   return /*#__PURE__*/React.createElement(FilterPanelStyle, {
     style: _extends(_extends({}, style), {
-      left: perfectPosition.x,
-      top: perfectPosition.y,
-      opacity: opaque ? 1 : 0
+      left: visible ? perfectPosition.x : 0,
+      top: visible ? perfectPosition.y : 0,
+      opacity: visible ? 1 : 0
     }),
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -126,6 +126,8 @@ export function rangeSelection(opts) {
     };
 
     var onKeyDown = function onKeyDown(e) {
+      if (!isElementInEventPath(tableBody, e.nativeEvent)) return;
+
       if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
         var rowLen = pipeline.getDataSource().length;
 

package/es/table/utils/element.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 /** elementUtil html元素用的工具函数 */
-export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent>): any;
+export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent> | KeyboardEvent): any;
 /**
  * 获取点击事件是否发生在元素内部
  * @param ele
  * @param event
  */
-export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent): boolean;
+export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent | KeyboardEvent): boolean;
 /**
  * 根据点击路径获取对应元素
  * @param path

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

@@ -79,30 +79,32 @@ var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getTableRows",
     value: function getTableRows() {
-      var htmlTable = this.getTableBodyHtmlTable();
-      return htmlTable.querySelectorAll("tbody > .".concat(_styles.Classes.tableRow));
+      var _context2;
+
+      var tbody = this.artTable.querySelector((0, _concat.default)(_context2 = ".".concat(_styles.Classes.tableBody, " .")).call(_context2, _styles.Classes.virtual, " table tbody"));
+      return tbody.childNodes;
     }
   }, {
     key: "getTableBodyHtmlTable",
     value: function getTableBodyHtmlTable() {
-      var _context2;
+      var _context3;
 
-      return this.artTable.querySelector((0, _concat.default)(_context2 = ".".concat(_styles.Classes.tableBody, " .")).call(_context2, _styles.Classes.virtual, " table"));
+      return this.artTable.querySelector((0, _concat.default)(_context3 = ".".concat(_styles.Classes.tableBody, " .")).call(_context3, _styles.Classes.virtual, " table"));
     }
   }, {
     key: "getLeftLockShadow",
     value: function getLeftLockShadow() {
-      var _context3;
+      var _context4;
 
-      var selector = (0, _concat.default)(_context3 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context3, _styles.Classes.leftLockShadow);
+      var selector = (0, _concat.default)(_context4 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context4, _styles.Classes.leftLockShadow);
       return this.artTable.querySelector(selector);
     }
   }, {
     key: "getRightLockShadow",
     value: function getRightLockShadow() {
-      var _context4;
+      var _context5;
 
-      var selector = (0, _concat.default)(_context4 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context4, _styles.Classes.rightLockShadow);
+      var selector = (0, _concat.default)(_context5 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context5, _styles.Classes.rightLockShadow);
       return this.artTable.querySelector(selector);
     }
   }, {
@@ -113,10 +115,10 @@ var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getRowTop",
     value: function getRowTop(rowIndex) {
-      var _context5, _context6;
+      var _context6, _context7;
 
       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 selector = (0, _concat.default)(_context6 = (0, _concat.default)(_context7 = ".".concat(_styles.Classes.tableBody, " .")).call(_context7, _styles.Classes.tableRow, "[data-rowindex=\"")).call(_context6, rowIndex, "\"]");
       var row = this.artTable.querySelector(selector);
       var rowOffsetTop = row && row.offsetTop || 0;
       var tableOffsetTop = this.tableElement.offsetTop || 0;

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

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

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

@@ -29,13 +29,11 @@ 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,
+      stickyRightOffset = _ref.stickyRightOffset,
       data = _ref.data,
       verInfo = _ref.verticalRenderInfo,
       hozInfo = _ref.horizontalRenderInfo,
@@ -137,14 +135,13 @@ function HtmlTable(_ref) {
     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) - scrollbarWidth;
+      positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - stickyRightOffset;
     }
 
     return /*#__PURE__*/_react.default.createElement('td', (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({

package/lib/table/base/renderTemplates.js

@@ -154,14 +154,14 @@ function renderTableBodyInIE(info, props, extra) {
     primaryKey: primaryKey,
     data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex)
   };
-  var scrollbarWidth = extra.hasScrollY ? (0, _utils.getScrollbarSize)().width : 0;
   var fixedRightTableStyle = {
-    right: -scrollbarWidth
+    right: -extra.stickyRightOffset
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_styles.Classes.tableBody, _styles.Classes.horizontalScrollContainer)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _styles.Classes.virtual
+    className: _styles.Classes.virtual,
+    tabIndex: -1
   }, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
     key: "top-blank",
     className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'top'),
@@ -221,7 +221,7 @@ function renderTableBodyInIE(info, props, extra) {
     tbodyHtmlTag: "tbody"
   }, commonProps, {
     tbodyPosition: "right",
-    hasScrollY: extra.hasScrollY,
+    stickyRightOffset: extra.stickyRightOffset,
     horizontalRenderInfo: (0, _extends2.default)((0, _extends2.default)({}, info), {
       flat: {
         center: right,

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

@@ -149,7 +149,6 @@ export declare const defaultCSSVariables: {
     '---cell-border-vertical': string;
     '--header-cell-border': string;
     '--header-cell-border-horizontal': string;
-    '--header-cell-border-vertical': string;
 };
 export declare const variableConst: string;
 export declare const StyledArtTableWrapper: any;

package/lib/table/base/styles.js

@@ -142,8 +142,7 @@ var defaultCSSVariables = {
   '--cell-border-horizontal': '1px solid #dfe3e8',
   '---cell-border-vertical': '1px solid #dfe3e8',
   '--header-cell-border': '1px solid #dfe3e8',
-  '--header-cell-border-horizontal': '1px solid #dfe3e8',
-  '--header-cell-border-vertical': '1px solid #dfe3e8'
+  '--header-cell-border-horizontal': '1px solid #dfe3e8'
 };
 exports.defaultCSSVariables = defaultCSSVariables;
 var variableConst = getCssVariableText(defaultCSSVariables);

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

@@ -43,6 +43,8 @@ export interface BaseTableProps {
     hasStickyScroll?: boolean;
     /** 横向粘性滚动条高度 */
     stickyScrollHeight?: 'auto' | number;
+    /** 表格滚动条的宽度 */
+    scrollbarWidth?: number;
     /** 使用来自外层 div 的边框代替单元格的外边框 */
     useOuterBorder?: boolean;
     /** 表格是否在加载中 */
@@ -78,6 +80,12 @@ export interface BaseTableProps {
         [key: string]: any;
     };
     enableCSSVariables?: boolean;
+    scrollLoad?: {
+        /** 表格滚动加载回调 */
+        callback(startIndex: number): void;
+        /** 每个数据块的数据条数 */
+        blockSize?: number;
+    };
 }
 export interface BaseTableState {
     /** 是否要展示自定义滚动条(stickyScroll) */
@@ -125,6 +133,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     private hasScrollY;
     private resizeObserver?;
     private resizeSubject;
+    private offsetY;
     /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
     getDoms(): TableDOMHelper;
     constructor(props: Readonly<BaseTableProps>);
@@ -143,6 +152,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     private renderTableFooter;
     private renderLockShadows;
     private renderStickyScroll;
+    private getScrollBarWidth;
     render(): JSX.Element;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<BaseTableProps>, prevState: Readonly<BaseTableState>): void;