@kdcloudjs/table 1.0.2 → 1.1.0

package/es/table/base/calculations.js

@@ -191,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.js

@@ -1,3 +1,4 @@
+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";
@@ -241,6 +242,8 @@ export default function TableHeader(_ref2) {
   var rightFlatCount = flat.right.length;
 
   var thead = _mapInstanceProperty(_context4 = headerRenderInfo.leveled).call(_context4, function (wrappedCols, level) {
+    var _cx2;
+
     var _wrappedCols = _concatInstanceProperty(wrappedCols).call(wrappedCols); // 左中右区域渲染，分组列可能单独位于一个区域，此时其他区域也需要适配分组的高度
     // rowspan 需要空白的列头去占位, 需要补充额外的空白列头
 
@@ -258,6 +261,8 @@ export default function TableHeader(_ref2) {
       var _a, _b, _c;
 
       if (wrapped.type === 'normal') {
+        var _cx;
+
         var colIndex = wrapped.colIndex,
             colSpan = wrapped.colSpan,
             isLeaf = wrapped.isLeaf,
@@ -277,13 +282,7 @@ export default function TableHeader(_ref2) {
         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 || theaderPosition === 'left',
-            'lock-right': colIndex >= fullFlatCount - rightFlatCount || theaderPosition === 'right',
-            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({
@@ -314,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/html-table.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -31,17 +32,12 @@ export function HtmlTable(_ref) {
   }), /*#__PURE__*/React.createElement(tbodyHtmlTag, null, _mapInstanceProperty(data).call(data, renderRow)));
 
   function renderRow(record, i) {
-    var _context;
+    var _cx, _context;
 
     var rowIndex = verInfo.offset + i;
     spanManager.stripUpwards(rowIndex);
     var rowProps = getRowProps(record, rowIndex);
-    var rowClass = cx(Classes.tableRow, {
-      first: rowIndex === verInfo.first,
-      last: rowIndex === verInfo.last,
-      even: rowIndex % 2 === 0,
-      odd: rowIndex % 2 === 1
-    }, rowProps === null || rowProps === void 0 ? void 0 : rowProps.className);
+    var rowClass = cx(Classes.tableRow, (_cx = {}, _defineProperty(_cx, Classes.first, rowIndex === verInfo.first), _defineProperty(_cx, Classes.last, rowIndex === verInfo.last), _defineProperty(_cx, Classes.even, rowIndex % 2 === 0), _defineProperty(_cx, Classes.odd, rowIndex % 2 === 1), _cx), rowProps === null || rowProps === void 0 ? void 0 : rowProps.className);
 
     var visibleColumnDescriptor = _concatInstanceProperty(_context = hozInfo.visible).call(_context); // 左中右区域渲染，存在融合单元格时需要适配rowspan属性
     // 如果固定的列均存在融合单元格，需空白一列做占位,否则融合的单元格不会渲染，导致显示异常
@@ -77,6 +73,8 @@ export function HtmlTable(_ref) {
   }
 
   function renderBodyCell(record, rowIndex, column, colIndex) {
+    var _cx2;
+
     var _a, _b, _c;
 
     if (spanManager.testSkip(rowIndex, colIndex)) {
@@ -106,20 +104,20 @@ export function HtmlTable(_ref) {
       if (cellProps.rowSpan != null) {
         rowSpan = cellProps.rowSpan;
       }
+    }
+
+    var hasSpan = colSpan > 1 || rowSpan > 1;
+
+    if (hasSpan) {
+      spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
     } // rowSpan/colSpan 不能过大，避免 rowSpan/colSpan 影响因虚拟滚动而未渲染的单元格
 
 
     rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
-    colSpan = Math.min(colSpan, leftFlatCount + hoz.rightIndex + rightFlatCount - colIndex); // todo: 右侧有列固定的情况下colSpan计算不对，这里先限制一下
+    colSpan = Math.min(colSpan, hozInfo.visible.length - colIndex); // todo: 右侧有列固定的情况下colSpan计算不对，这里先限制一下
 
     rowSpan = Math.max(rowSpan, 1);
     colSpan = Math.max(colSpan, 1);
-    var hasSpan = colSpan > 1 || rowSpan > 1;
-
-    if (hasSpan) {
-      spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
-    }
-
     var positionStyle = {};
     var scrollbarWidth = hasScrollY ? getScrollbarSize().width : 0;
 
@@ -134,14 +132,7 @@ export function HtmlTable(_ref) {
     return /*#__PURE__*/React.createElement('td', _extends(_extends(_extends(_extends({
       key: colIndex
     }, cellProps), {
-      className: cx(Classes.tableCell, cellProps.className, {
-        // class
-        first: colIndex === 0,
-        last: colIndex + colSpan === fullFlatCount,
-        'lock-left': colIndex < leftFlatCount || tbodyPosition === 'left',
-        'lock-right': colIndex >= fullFlatCount - rightFlatCount,
-        'row-span': rowSpan > 1
-      })
+      className: cx(Classes.tableCell, cellProps.className, (_cx2 = {}, _defineProperty(_cx2, Classes.first, colIndex === 0), _defineProperty(_cx2, Classes.last, colIndex + colSpan === fullFlatCount), _defineProperty(_cx2, Classes.lockLeft, colIndex < leftFlatCount || tbodyPosition === 'left'), _defineProperty(_cx2, Classes.lockRight, colIndex >= fullFlatCount - rightFlatCount), _defineProperty(_cx2, Classes.rowSpan, rowSpan > 1), _cx2))
     }), hasSpan ? {
       colSpan: colSpan,
       rowSpan: rowSpan

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

@@ -50,6 +50,16 @@ export declare const Classes: {
     readonly rowDetailContainer: string;
     readonly rowDetailItem: string;
     readonly emptyColCell: string;
+    readonly first: string;
+    readonly last: string;
+    readonly even: string;
+    readonly odd: string;
+    readonly lockLeft: string;
+    readonly lockRight: string;
+    readonly rowSpan: string;
+    readonly leaf: string;
+    readonly expanded: string;
+    readonly collapsed: string;
 };
 export declare const MenuClasses: {
     menu: string;

package/es/table/base/styles.js

@@ -62,7 +62,17 @@ export var Classes = {
   fixedRight: "".concat(prefix, "fixed-right"),
   rowDetailContainer: "".concat(prefix, "row-detail-container"),
   rowDetailItem: "".concat(prefix, "row-detail-item"),
-  emptyColCell: "".concat(prefix, "empty-col-cell")
+  emptyColCell: "".concat(prefix, "empty-col-cell"),
+  first: "".concat(prefix, "first"),
+  last: "".concat(prefix, "last"),
+  even: "".concat(prefix, "even"),
+  odd: "".concat(prefix, "odd"),
+  lockLeft: "".concat(prefix, "lock-left"),
+  lockRight: "".concat(prefix, "lock-right"),
+  rowSpan: "".concat(prefix, "row-span"),
+  leaf: "".concat(prefix, "leaf"),
+  expanded: "".concat(prefix, "expanded"),
+  collapsed: "".concat(prefix, "collapsed")
 };
 export var MenuClasses = {
   menu: "".concat(prefix, "table-menu"),
@@ -81,7 +91,7 @@ var Z = {
   scrollItem: 30,
   loadingIndicator: 40
 };
-var outerBorderStyleMixin = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid #cccccc;\n  border-right: 1px solid #cccccc;\n  border-bottom: 1px solid #cccccc;\n  border-left: 1px solid #cccccc;\n\n  td.first,\n  th.first {\n    border-left: none;\n  }\n  td.last,\n  th.last {\n    --border-right: none;\n  }\n\n  thead tr.first th,\n  tbody tr.first td {\n    border-top: none;\n  }\n  &.has-footer tfoot tr.last td {\n    border-bottom: none;\n  }\n  &:not(.has-footer) tbody tr.last td {\n    border-bottom: none;\n  }\n  td.row-span:not(.first){\n    border-left: var(---cell-border-vertical);\n  }\n  td.row-span:not(.last){\n    border-right: var(---cell-border-vertical);\n  }\n"])));
+var outerBorderStyleMixin = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid #cccccc;\n  border-right: 1px solid #cccccc;\n  border-bottom: 1px solid #cccccc;\n  border-left: 1px solid #cccccc;\n\n  td.", ",\n  th.", " {\n    border-left: none;\n  }\n  td.", ",\n  th.", " {\n    --border-right: none;\n  }\n\n  thead tr.", " th,\n  tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tfoot tr.", " td {\n    border-bottom: none;\n  }\n  &:not(.has-footer) tbody tr.", " td {\n    border-bottom: none;\n  }\n  td.", ":not(.", "){\n    border-left: var(---cell-border-vertical);\n  }\n  td.", ":not(.", "){\n    border-right: var(---cell-border-vertical);\n  }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
 export var defaultCSSVariables = {
   '--row-height': '48px',
   '--color': '#333',
@@ -111,7 +121,7 @@ export var defaultCSSVariables = {
   '--header-cell-border-vertical': '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.leaf {\n    border-right: none;\n    border-bottom: none;\n  }\n\n  tr.first th {\n    border-top: var(--header-cell-border-horizontal);\n  }\n  th.first {\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.first {\n    border-left: var(--cell-border-vertical);\n  }\n  tr.first td {\n    border-top: var(--cell-border-horizontal);\n  }\n  &.has-header tbody tr.first td {\n    border-top: none;\n  }\n  &.has-footer tbody tr.last td {\n    border-bottom: none;\n  }\n\n  .lock-left,\n  .lock-right {\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, 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  // \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/common-views.js

@@ -5,9 +5,9 @@ var _templateObject, _templateObject2, _templateObject3;
 
 import React from 'react';
 import styled from 'styled-components';
-import { MenuClasses } from './base/styles';
+import { MenuClasses, Classes } from './base/styles';
 export var InlineFlexCell = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n"])));
-export var ExpansionCell = styled(InlineFlexCell)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.leaf {\n    cursor: default;\n  }\n\n  .expansion-icon {\n    fill: #999;\n    flex: 0 0 16px;\n    transition: transform 200ms;\n\n    &.expanded {\n      transform-origin: center center;\n      transform: rotate(90deg);\n    }\n  }\n"])));
+export var ExpansionCell = styled(InlineFlexCell)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.", " {\n    cursor: default;\n  }\n\n  .expansion-icon {\n    fill: #999;\n    flex: 0 0 16px;\n    transition: transform 200ms;\n\n    &.", " {\n      transform-origin: center center;\n      transform: rotate(90deg);\n    }\n  }\n"])), Classes.leaf, Classes.expanded);
 
 function CaretDownIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({

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

@@ -1,29 +1,41 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import { makeRecursiveMapper, mergeCellProps, collectNodes, isLeafNode } from '../../utils';
 import { FILL_COLUMN_CODE } from './autoFill';
 var stateKey = 'columnDrag';
+var SCROLL_SIZE = 30;
 
-function sortColumns(cloumns, sort) {
-  var res = new Array(cloumns.length);
+function sortColumns(columns, sort) {
+  var res = new Array(columns.length);
 
-  while (cloumns.length) {
-    var cloumn = cloumns.pop();
+  var lastColumns = _toConsumableArray(columns);
+
+  while (columns.length) {
+    var cloumn = columns.pop();
     res[sort[cloumn.code]] = cloumn;
   }
 
+  if (_filterInstanceProperty(res).call(res, Boolean).length !== lastColumns.length) {
+    return lastColumns;
+  }
+
   return res;
 }
 
+function stopClickPropagation(e) {
+  e.stopPropagation();
+}
+
 export function columnDrag() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function (pipeline) {
     var _pipeline$getStateAtK = pipeline.getStateAtKey(stateKey, {}),
-        cloumnsSortData = _pipeline$getStateAtK.cloumnsSortData,
         cloumnsTranslateData = _pipeline$getStateAtK.cloumnsTranslateData;
 
-    var columns = pipeline.getColumns(); // if (cloumnsSortData) {
+    var columns = pipeline.getColumns();
+    var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody; // if (cloumnsSortData) {
     //   columns = sortColumns(columns, cloumnsSortData)
     // }
 
@@ -65,28 +77,55 @@ export function columnDrag() {
             var columns = pipeline.getColumns();
 
             var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
-                cloumnsSortData = _pipeline$getStateAtK2.cloumnsSortData,
                 cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
 
-            if (cloumnsSortData) {
-              columns = sortColumns(columns, cloumnsSortData);
-            } else {
-              cloumnsSortData = {};
-              columns.forEach(function (item, index) {
-                cloumnsSortData[item.code] = index;
-              });
-            }
-
+            var cloumnsSortData = {};
+            columns.forEach(function (item, index) {
+              cloumnsSortData[item.code] = index;
+            });
             var currentTarget = e.currentTarget;
             var rect = e.currentTarget.parentElement.getClientRects()[0];
             var startX = rect.left;
             var moveData = [];
             var allColumns = collectNodes(columns);
+            var tableBodyClientRect = tableBody.getBoundingClientRect();
+            var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
+
+            var updateScrollPosition = function updateScrollPosition(client) {
+              var clientX = client.clientX;
+              var left = tableBodyClientRect.left,
+                  width = tableBodyClientRect.width;
+
+              if (clientX + SCROLL_SIZE >= left + width) {
+                pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
+              }
+
+              if (clientX - SCROLL_SIZE <= left) {
+                pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
+              }
+            };
+
+            var stopClickPropagationFlag = false;
 
             function handleMouseMove(e) {
-              if (e.clientX - startX < 20) {
+              var client = {
+                clientX: e.clientX,
+                clientY: e.clientY
+              };
+              var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
+              var leftPosition = startX - scrollDistance; // 表头最左边起点
+
+              updateScrollPosition(client);
+
+              if (e.clientX - leftPosition < 20) {
                 return;
               } else {
+                // 阻止列头点击事件，防止拖动后触发列头过滤事件
+                if (stopClickPropagationFlag === false) {
+                  stopClickPropagationFlag = true;
+                  currentTarget.addEventListener('click', stopClickPropagation);
+                }
+
                 e.stopPropagation();
               }
 
@@ -123,7 +162,7 @@ export function columnDrag() {
               var replaceIndex = 0;
               var totalWitdth = getColumnWidth(columns[replaceIndex]);
 
-              while (totalWitdth < e.clientX - startX && replaceIndex < columns.length - 1) {
+              while (totalWitdth < e.clientX - leftPosition && replaceIndex < columns.length - 1) {
                 replaceIndex++;
                 totalWitdth += getColumnWidth(columns[replaceIndex]);
               } // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex（因为map时还没添加选择列、充满列等后面use添加的列）
@@ -196,7 +235,6 @@ export function columnDrag() {
 
               window.requestAnimationFrame(function () {
                 pipeline.setStateAtKey(stateKey, {
-                  cloumnsSortData: cloumnsSortData,
                   cloumnsTranslateData: cloumnsTranslateData
                 });
                 moveData = [startIndex, replaceIndex];
@@ -208,6 +246,11 @@ export function columnDrag() {
               document.body.removeEventListener('mousemove', handleMouseMove);
               document.body.removeEventListener('mouseup', handleMouseUp);
               window.requestAnimationFrame(function () {
+                // 取消阻止列头点击事件
+                currentTarget.removeEventListener('click', stopClickPropagation);
+                stopClickPropagationFlag = false;
+                currentTarget = null;
+
                 var _moveData = moveData,
                     _moveData2 = _slicedToArray(_moveData, 2),
                     startIndex = _moveData2[0],
@@ -277,14 +320,12 @@ export function columnDrag() {
                 }
 
                 pipeline.setStateAtKey(stateKey, {
-                  cloumnsSortData: cloumnsSortData,
                   cloumnsTranslateData: null
                 });
               });
               document.body.style.userSelect = '';
               currentTarget.style.opacity = '';
               currentTarget.style.cursor = '';
-              currentTarget = null;
             }
 
             document.body.addEventListener('mousemove', handleMouseMove);

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

@@ -89,20 +89,25 @@ export function contextMenu() {
     };
 
     var showContextMenu = function showContextMenu(e) {
-      var dataSource = pipeline.getDataSource();
-      var cellEle = getCellEleForEvent(e);
+      var path = getEventPath(e);
+      var cellEle = getCellEleInEventPath(path);
       var code;
       var rowIndex;
+      var isInFooter;
 
       if (cellEle) {
-        code = cellEle.getAttribute('data-code'), rowIndex = cellEle.getAttribute('data-rowindex');
+        code = cellEle.getAttribute('data-code');
+        rowIndex = cellEle.getAttribute('data-rowindex');
+        isInFooter = isElementInsideTheFooter(cellEle);
       } else {
-        var rowEle = getRowEleForEvent(e, dataSource);
+        var rowEle = getRowEleInEventPath(path);
         rowIndex = rowEle === null || rowEle === void 0 ? void 0 : rowEle.getAttribute('data-rowindex');
+        isInFooter = isElementInsideTheFooter(rowEle);
       }
 
+      var dataSource = isInFooter ? pipeline.getFooterDataSource() || [] : pipeline.getDataSource();
       var record = dataSource[rowIndex];
-      var column = code !== undefined && findByTree(pipeline.getColumns(), function (item, index) {
+      var column = code !== undefined && findByTree(pipeline.getColumns(), function (item) {
         return item.code === code;
       });
       var value = column && record && internals.safeGetValue(column, record, rowIndex);
@@ -275,18 +280,6 @@ function isEventFromCurrentPopup(event, ele) {
 
   return false;
 }
-
-function getCellEleInEventPath(path) {
-  return getTargetEleInEventPath(path, function (ele) {
-    return ele && ele.getAttribute('data-role') === 'table-cell';
-  });
-}
-
-function getRowEleInEventPath(path) {
-  return getTargetEleInEventPath(path, function (ele) {
-    return ele && ele.getAttribute('data-role') === 'table-row';
-  });
-}
 /** 是否点击是外部 end */
 
 /** 计算位置 start */
@@ -363,15 +356,37 @@ function keepWithinBounds(popupParent, ePopup, x, y) {
 /** 获得点击的元素 start */
 
 
-function getCellEleForEvent(event) {
-  return getCellEleInEventPath(getEventPath(event));
+function getCellEleInEventPath(path) {
+  return getTargetEleInEventPath(path, function (ele) {
+    return ele && ele.getAttribute('data-role') === 'table-cell';
+  });
 }
 
-function getRowEleForEvent(event, dataSource) {
-  return getRowEleInEventPath(getEventPath(event));
+function getRowEleInEventPath(path) {
+  return getTargetEleInEventPath(path, function (ele) {
+    return ele && ele.getAttribute('data-role') === 'table-row';
+  });
 }
 /** 获得点击的元素 end */
-// 禁止弹出右键菜单
+
+
+function isElementInsideTheFooter(ele) {
+  var pointer = ele;
+
+  while (pointer) {
+    if (pointer.tagName === 'TFOOT') {
+      return true;
+    }
+
+    if (pointer.tagName === 'TABLE' || pointer.tagName === 'TBODY') {
+      return false;
+    }
+
+    pointer = pointer.parentElement;
+  }
+
+  return false;
+} // 禁止弹出右键菜单
 
 
 function suppressShowContextMenu(e) {