@kdcloudjs/table 1.1.3-canary.3 → 1.1.3-canary.5

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

@@ -18,4 +18,6 @@ export declare class TableDOMHelper {
     getRightLockShadow(): HTMLDivElement;
     getLoadingIndicator(): HTMLDivElement;
     getRowTop(rowIndex: number): number;
+    getRowNodeListByEvent: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => HTMLElement[];
+    getInRangeRowByCellEvent: (e: React.MouseEvent<HTMLTableCellElement, MouseEvent>) => unknown[];
 }

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

@@ -1,5 +1,7 @@
 import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
 import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import { Classes } from '../styles'; // 表格 DOM 结构
 // div.art-table-wrapper
@@ -41,10 +43,44 @@ import { Classes } from '../styles'; // 表格 DOM 结构
 
 export var TableDOMHelper = /*#__PURE__*/function () {
   function TableDOMHelper(artTableWrapper) {
-    var _context;
+    var _this = this,
+        _context2;
 
     _classCallCheck(this, TableDOMHelper);
 
+    this.getRowNodeListByEvent = function (e) {
+      var nodeList = null;
+      var rowIndex = e.currentTarget.dataset.rowindex;
+
+      if (rowIndex !== undefined) {
+        var targetParent = _this.tableBody.contains(e.currentTarget) ? _this.tableBody : _this.tableFooter;
+        nodeList = targetParent.querySelectorAll("tr[data-rowindex=\"".concat(rowIndex, "\"]"));
+      }
+
+      return nodeList;
+    };
+
+    this.getInRangeRowByCellEvent = function (e) {
+      var _context;
+
+      var _a;
+
+      var getParentNode = function getParentNode(ele, target) {
+        if (ele.parentNode.nodeName === target) {
+          return ele.parentNode;
+        }
+
+        return getParentNode(ele.parentNode, target);
+      };
+
+      e = e instanceof Array ? e[0] : e;
+      var curCell = e === null || e === void 0 ? void 0 : e.currentTarget;
+      var curRow = getParentNode(curCell, 'TR');
+      var curRowSpan = parseInt(e.currentTarget.getAttribute('rowspan')) || 1;
+      var rows = (_a = getParentNode(curCell, 'TABLE')) === null || _a === void 0 ? void 0 : _a.rows;
+      return _sliceInstanceProperty(_context = _Array$from(rows)).call(_context, curRow.rowIndex, curRow.rowIndex + curRowSpan);
+    };
+
     this.artTableWrapper = artTableWrapper;
     this.artTable = artTableWrapper.querySelector(".".concat(Classes.artTable));
     this.tableHeader = this.artTable.querySelector(".".concat(Classes.tableHeader));
@@ -55,7 +91,7 @@ export var TableDOMHelper = /*#__PURE__*/function () {
     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);
+    var stickyScrollSelector = _concatInstanceProperty(_context2 = ".".concat(Classes.artTable, " + .")).call(_context2, Classes.stickyScroll);
 
     this.stickyScroll = artTableWrapper.querySelector(stickyScrollSelector);
     this.stickyScrollItem = this.stickyScroll.querySelector(".".concat(Classes.stickyScrollItem));
@@ -69,33 +105,33 @@ export var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getTableRows",
     value: function getTableRows() {
-      var _context2;
+      var _context3;
 
-      var tbody = this.artTable.querySelector(_concatInstanceProperty(_context2 = ".".concat(Classes.tableBody, " .")).call(_context2, Classes.virtual, " table tbody"));
+      var tbody = this.artTable.querySelector(_concatInstanceProperty(_context3 = ".".concat(Classes.tableBody, " .")).call(_context3, Classes.virtual, " table tbody"));
       return tbody.childNodes;
     }
   }, {
     key: "getTableBodyHtmlTable",
     value: function getTableBodyHtmlTable() {
-      var _context3;
+      var _context4;
 
-      return this.artTable.querySelector(_concatInstanceProperty(_context3 = ".".concat(Classes.tableBody, " .")).call(_context3, Classes.virtual, " table"));
+      return this.artTable.querySelector(_concatInstanceProperty(_context4 = ".".concat(Classes.tableBody, " .")).call(_context4, Classes.virtual, " table"));
     }
   }, {
     key: "getLeftLockShadow",
     value: function getLeftLockShadow() {
-      var _context4;
+      var _context5;
 
-      var selector = _concatInstanceProperty(_context4 = ".".concat(Classes.lockShadowMask, " .")).call(_context4, Classes.leftLockShadow);
+      var selector = _concatInstanceProperty(_context5 = ".".concat(Classes.lockShadowMask, " .")).call(_context5, Classes.leftLockShadow);
 
       return this.artTable.querySelector(selector);
     }
   }, {
     key: "getRightLockShadow",
     value: function getRightLockShadow() {
-      var _context5;
+      var _context6;
 
-      var selector = _concatInstanceProperty(_context5 = ".".concat(Classes.lockShadowMask, " .")).call(_context5, Classes.rightLockShadow);
+      var selector = _concatInstanceProperty(_context6 = ".".concat(Classes.lockShadowMask, " .")).call(_context6, Classes.rightLockShadow);
 
       return this.artTable.querySelector(selector);
     }
@@ -107,11 +143,11 @@ export var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getRowTop",
     value: function getRowTop(rowIndex) {
-      var _context6, _context7;
+      var _context7, _context8;
 
       if (rowIndex === 0) return 0;
 
-      var selector = _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = ".".concat(Classes.tableBody, " .")).call(_context7, Classes.tableRow, "[data-rowindex=\"")).call(_context6, rowIndex, "\"]");
+      var selector = _concatInstanceProperty(_context7 = _concatInstanceProperty(_context8 = ".".concat(Classes.tableBody, " .")).call(_context8, Classes.tableRow, "[data-rowindex=\"")).call(_context7, rowIndex, "\"]");
 
       var row = this.artTable.querySelector(selector);
       var rowOffsetTop = row && row.offsetTop || 0;

package/es/table/base/styles.js

@@ -120,7 +120,7 @@ export var defaultCSSVariables = {
   '--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);
+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  // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n  tr:not(.no-hover).row-hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n  // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n  tr:not(.no-highlight).highlight > td {\n    background: var(--highlight-bgcolor);\n  }\n\n  th {\n    font-weight: normal;\n    text-align: left;\n    padding: var(--cell-padding);\n    height: var(--header-row-height);\n    color: var(--header-color);\n    background: var(--header-bgcolor);\n    border:1px solid transparent;\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: var(--header-cell-border-horizontal);\n    position: relative;\n  }\n\n  th.resizeable{\n    border-right: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);
 export var ButtonCSS = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  //#region \u6309\u94AE\n  .", "{\n    color: var(--color);\n    background:#ffffff;\n    border:1px solid var(--strong-border-color);\n    border-radius: 2px;\n    cursor: pointer;\n    &:hover{\n      color: var(--primary-color);\n      border:1px solid var(--primary-color);\n    }\n  }\n  .", " {\n    color:#ffffff;\n    background-color: var(--primary-color);\n    border:none;\n    &:hover{\n      color:#ffffff;\n      background-color: var(--primary-color-level2);\n      border:none;\n    }\n  }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
 
 function getCssVariableText(obj) {

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

@@ -145,7 +145,6 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     /** 同步横向滚动偏移量 */
     private syncHorizontalScroll;
     getVerticalRenderRange(useVirtual: ResolvedUseVirtual): VerticalRenderRange;
-    private getRowNodeListByEvent;
     private handleRowMouseEnter;
     private handleRowMouseLeave;
     private renderTableBody;

package/es/table/base/table.js

@@ -95,23 +95,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     _this.resizeSubject = new Subject();
     _this.offsetY = 0;
 
-    _this.getRowNodeListByEvent = function (e) {
-      var nodeList = null;
-      var rowIndex = e.currentTarget.dataset.rowindex;
-
-      if (rowIndex !== undefined) {
-        var _this$domHelper = _this.domHelper,
-            tableBody = _this$domHelper.tableBody,
-            tableFooter = _this$domHelper.tableFooter;
-        var targetParent = tableBody.contains(e.currentTarget) ? tableBody : tableFooter;
-        nodeList = targetParent.querySelectorAll("tr[data-rowindex=\"".concat(rowIndex, "\"]"));
-      }
-
-      return nodeList;
-    };
-
     _this.handleRowMouseEnter = function (e) {
-      var nodeList = _this.getRowNodeListByEvent(e);
+      var nodeList = _this.domHelper.getRowNodeListByEvent(e);
 
       nodeList && nodeList.forEach(function (node) {
         node.classList.add('row-hover');
@@ -119,7 +104,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleRowMouseLeave = function (e) {
-      var nodeList = _this.getRowNodeListByEvent(e);
+      var nodeList = _this.domHelper.getRowNodeListByEvent(e);
 
       nodeList && nodeList.forEach(function (node) {
         node.classList.remove('row-hover');
@@ -251,10 +236,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     value: function updateStickyScroll() {
       var _a, _b;
 
-      var _this$domHelper2 = this.domHelper,
-          stickyScroll = _this$domHelper2.stickyScroll,
-          artTable = _this$domHelper2.artTable,
-          stickyScrollItem = _this$domHelper2.stickyScrollItem;
+      var _this$domHelper = this.domHelper,
+          stickyScroll = _this$domHelper.stickyScroll,
+          artTable = _this$domHelper.artTable,
+          stickyScrollItem = _this$domHelper.stickyScrollItem;
       var _lastHasScrollY = this.hasScrollY;
 
       if (!artTable) {
@@ -595,9 +580,9 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     value: function initSubscriptions() {
       var _this2 = this;
 
-      var _this$domHelper3 = this.domHelper,
-          virtual = _this$domHelper3.virtual,
-          stickyScroll = _this$domHelper3.stickyScroll;
+      var _this$domHelper2 = this.domHelper,
+          virtual = _this$domHelper2.virtual,
+          stickyScroll = _this$domHelper2.stickyScroll;
       this.rootSubscription.add(throttledWindowResize$.subscribe(function () {
         _this2.updateStickyScroll();
 

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

@@ -134,7 +134,7 @@ export function filter() {
         return [item.key, _extends({}, item)];
       }));
 
-      function isMatchedFilterCondition(record) {
+      function isMatchedFilterCondition(record, rowIndex) {
         return !filtersKeys.some(function (key) {
           var _a, _b;
 
@@ -149,14 +149,15 @@ export function filter() {
           } else {
             console.warn("\u5217[".concat(key, "]\u672A\u914D\u7F6E\u7B5B\u9009\u51FD\u6570\uFF0C\u8BF7\u8BBE\u7F6E column.features.filterable \u6765\u4F5C\u4E3A\u8BE5\u5217\u7684\u7B5B\u9009\u51FD\u6570, \u76EE\u524D\u4F7F\u7528\u9ED8\u8BA4\u5305\u542B\u7B5B\u9009\u51FD\u6570"));
             comparisonFn = _filterInstanceProperty(defaultFilterOptionsMap.get('contain'));
-          }
+          } // 不符合过滤条件,退出循环
 
-          return !comparisonFn(_filterInstanceProperty(filterItem))(record[key]); //不符合过滤条件,退出循环
+
+          return !comparisonFn(_filterInstanceProperty(filterItem), filterItem)(internals.safeGetValue(columnsMap.get(key), record, rowIndex), record);
         });
       }
 
-      return dataSource.reduce(function (pre, record) {
-        if (isMatchedFilterCondition(record)) {
+      return dataSource.reduce(function (pre, record, rowIndex) {
+        if (isMatchedFilterCondition(record, rowIndex)) {
           return _concatInstanceProperty(pre).call(pre, [record]);
         }
 

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

@@ -136,7 +136,7 @@ function Filter(_ref2) {
     fill: "currentColor",
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
+    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\r\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\r\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
   }))), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
     ele: iconRef.current,
     filterIcon: filterIcon,

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

@@ -72,7 +72,7 @@ function FilterPanel(_ref) {
     fill: "currentColor",
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
+    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\r\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\r\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
   })))), /*#__PURE__*/React.createElement("div", {
     className: "popup-body"
   }, children));

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

@@ -15,3 +15,4 @@ export { columnResize, ColumnResizeOptions } from './columnResizeWidth';
 export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
 export { filter, FilterFeatureOptions } from './columnFilter';
 export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';
+export { mergeCellHover } from './mergeCellHover';

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

@@ -14,4 +14,5 @@ export { columnDrag } from './columnDrag';
 export { columnResize } from './columnResizeWidth';
 export { contextMenu } from './contextMenu';
 export { filter } from './columnFilter';
-export { rangeSelection } from './rangeSelection';
+export { rangeSelection } from './rangeSelection';
+export { mergeCellHover } from './mergeCellHover';

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

@@ -0,0 +1,2 @@
+import { TablePipeline } from '../pipeline';
+export declare function mergeCellHover(): (pipeline: TablePipeline) => TablePipeline;

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

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { isLeafNode, makeRecursiveMapper, mergeCellProps } from '../../utils';
+export function mergeCellHover() {
+  return function (pipeline) {
+    return pipeline.mapColumns(makeRecursiveMapper(function (col) {
+      if (!isLeafNode(col)) {
+        return col;
+      }
+
+      var prevGetCellProps = col.getCellProps;
+      return _extends(_extends({}, col), {
+        getCellProps: function getCellProps(value, record, rowIndex) {
+          var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
+          return mergeCellProps(prevCellProps, {
+            onMouseEnter: function onMouseEnter(e) {
+              var InRangeRow = pipeline.ref.current.domHelper.getInRangeRowByCellEvent(e);
+              InRangeRow.forEach(function (row) {
+                row.classList.add('row-hover');
+              });
+            },
+            onMouseLeave: function onMouseLeave(e) {
+              var InRangeRow = pipeline.ref.current.domHelper.getInRangeRowByCellEvent(e);
+              InRangeRow.forEach(function (row) {
+                row.classList.remove('row-hover');
+              });
+            }
+          });
+        }
+      });
+    }));
+  };
+}

package/es/table/style/index.less

@@ -1 +1 @@
-
+

package/lib/style/color/colors.less

@@ -1,2 +1,2 @@
-// color palettes
+// color palettes
 @blue-base: #1890ff;

package/lib/style/components.less

@@ -1 +1 @@
-@import "../table/style/index.less";
+@import "../table\style\index.less";

package/lib/style/core/index.less

@@ -1,2 +1,2 @@
-@import 'motion';
+@import 'motion';
 @import 'reset';

package/lib/style/core/motion/other.less

@@ -1,28 +1,28 @@
-@keyframes loadingcircle {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes waveEffect {
-  100% {
-      box-shadow: 0 0 0 6px @theme-color;
-  }
-}
-
-@keyframes fadeEffect {
-  100% {
-      opacity: 0;
-  }
-}
-
-@keyframes kdRadioEffect {
-  0% {
-    transform: translateY(-50%) scale(0.5);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(-50%) scale(1);
-    opacity: 1;
-  }
+@keyframes loadingcircle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes waveEffect {
+  100% {
+      box-shadow: 0 0 0 6px @theme-color;
+  }
+}
+
+@keyframes fadeEffect {
+  100% {
+      opacity: 0;
+  }
+}
+
+@keyframes kdRadioEffect {
+  0% {
+    transform: translateY(-50%) scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(-50%) scale(1);
+    opacity: 1;
+  }
 }

package/lib/style/core/motion/slide.less

@@ -1,53 +1,53 @@
-@keyframes kdSlideDownIn {
-  0% {
-    transform: scaleY(0.8);
-    transform-origin: 50% 0%;
-    opacity: 0;
-  }
-  100% {
-    transform: scaleY(1);
-    transform-origin: 50% 0%;
-    opacity: 1;
-  }
-}
-
-@keyframes kdSlideDownOut {
-  0% {
-    transform: scaleY(1);
-    transform-origin: 50% 0%;
-    opacity: 1;
-  }
-  100% {
-    transform: scaleY(0.9);
-    transform-origin: 50% 0%;
-    opacity: 0;
-  }
-}
-
-@keyframes kdSlideUpIn {
-  0% {
-    transform-origin: 50% 100%;
-    opacity: 0;
-  }
-  5% {
-    transform: scaleY(0.8);
-  }
-  100% {
-    transform: scaleY(1);
-    transform-origin: 50% 100%;
-    opacity: 1;
-  }
-}
-
-@keyframes kdSlideUpOut {
-  0% {
-    transform: scaleY(1);
-    transform-origin: 50% 100%;
-    opacity: 1;
-  }
-  100% {
-    transform: scaleY(0.9);
-    transform-origin: 50% 100%;
-    opacity: 0;
-  }
-}
+@keyframes kdSlideDownIn {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: 50% 0%;
+    opacity: 1;
+  }
+}
+
+@keyframes kdSlideDownOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 50% 0%;
+    opacity: 1;
+  }
+  100% {
+    transform: scaleY(0.9);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+}
+
+@keyframes kdSlideUpIn {
+  0% {
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+  5% {
+    transform: scaleY(0.8);
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: 50% 100%;
+    opacity: 1;
+  }
+}
+
+@keyframes kdSlideUpOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 50% 100%;
+    opacity: 1;
+  }
+  100% {
+    transform: scaleY(0.9);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+}

package/lib/style/core/motion.less

@@ -1,2 +1,2 @@
-@import 'motion/other';
+@import 'motion/other';
 @import 'motion/slide';