@kdcloudjs/table 1.2.2-canary.16 → 1.2.2-canary.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +104 -44
  3. package/dist/@kdcloudjs/table.js.map +1 -1
  4. package/dist/@kdcloudjs/table.min.css +1 -1
  5. package/dist/@kdcloudjs/table.min.js +2 -2
  6. package/dist/@kdcloudjs/table.min.js.map +1 -1
  7. package/es/table/base/BlankComponent.d.ts +0 -1
  8. package/es/table/base/BlankComponent.js +16 -9
  9. package/es/table/base/header.js +11 -7
  10. package/es/table/base/styles.js +1 -1
  11. package/es/table/interfaces.d.ts +19 -0
  12. package/es/table/pipeline/features/multiSelect.d.ts +3 -1
  13. package/es/table/pipeline/features/multiSelect.js +38 -15
  14. package/es/table/pipeline/features/singleSelect.d.ts +3 -1
  15. package/es/table/pipeline/features/singleSelect.js +35 -11
  16. package/es/table/utils/getTreeDepth.js +4 -1
  17. package/lib/table/base/BlankComponent.d.ts +0 -1
  18. package/lib/table/base/BlankComponent.js +15 -8
  19. package/lib/table/base/header.js +11 -7
  20. package/lib/table/base/styles.js +1 -1
  21. package/lib/table/interfaces.d.ts +19 -0
  22. package/lib/table/pipeline/features/multiSelect.d.ts +3 -1
  23. package/lib/table/pipeline/features/multiSelect.js +38 -15
  24. package/lib/table/pipeline/features/singleSelect.d.ts +3 -1
  25. package/lib/table/pipeline/features/singleSelect.js +35 -11
  26. package/lib/table/utils/getTreeDepth.js +4 -1
  27. package/package.json +2 -1
package/es/table/base/BlankComponent.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  interface BlankProps {
3
3
  height: number;
4
- className?: string;
5
4
  }
6
5
  export interface BlankRef {
7
6
  updateHeight: (newHeight: number) => void;
package/es/table/base/BlankComponent.js CHANGED
@@ -1,10 +1,13 @@
1
1
  import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
2
- import React, { useState, useImperativeHandle, forwardRef, memo } from 'react';
2
+ import React, { useState, useImperativeHandle, forwardRef, memo, useEffect } from 'react';
3
3
  import cx from 'classnames';
4
4
  import { Classes } from './styles';
5
5
  var TopBlankComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
6
- var initialHeight = _ref.height;
7
- var _useState = useState(initialHeight),
6
+ var heightFromProps = _ref.height;
7
+ useEffect(function () {
8
+ setHeight(heightFromProps);
9
+ }, [heightFromProps]);
10
+ var _useState = useState(heightFromProps),
8
11
  _useState2 = _slicedToArray(_useState, 2),
9
12
  height = _useState2[0],
10
13
  setHeight = _useState2[1];
@@ -18,6 +21,8 @@ var TopBlankComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
18
21
  };
19
22
  }, [height]);
20
23
  return /*#__PURE__*/React.createElement("div", {
24
+ key: "top-blank",
25
+ className: cx(Classes.virtualBlank, 'bottom'),
21
26
  style: {
22
27
  height: height
23
28
  }
@@ -25,12 +30,14 @@ var TopBlankComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
25
30
  });
26
31
  TopBlankComponent.displayName = 'TopBlank';
27
32
  var BottomBlankComponent = /*#__PURE__*/forwardRef(function (_ref2, ref) {
28
- var initialHeight = _ref2.height,
29
- className = _ref2.className;
30
- var _useState3 = useState(initialHeight),
33
+ var heightFromProps = _ref2.height;
34
+ var _useState3 = useState(heightFromProps),
31
35
  _useState4 = _slicedToArray(_useState3, 2),
32
36
  height = _useState4[0],
33
37
  setHeight = _useState4[1];
38
+ useEffect(function () {
39
+ setHeight(heightFromProps);
40
+ }, [heightFromProps]);
34
41
  useImperativeHandle(ref, function () {
35
42
  return {
36
43
  updateHeight: function updateHeight(newHeight) {
@@ -45,7 +52,7 @@ var BottomBlankComponent = /*#__PURE__*/forwardRef(function (_ref2, ref) {
45
52
  }
46
53
  return /*#__PURE__*/React.createElement("div", {
47
54
  key: "bottom-blank",
48
- className: cx(Classes.virtualBlank, 'bottom', className),
55
+ className: cx(Classes.virtualBlank, 'bottom'),
49
56
  style: {
50
57
  height: height
51
58
  }
@@ -54,8 +61,8 @@ var BottomBlankComponent = /*#__PURE__*/forwardRef(function (_ref2, ref) {
54
61
  BottomBlankComponent.displayName = 'BottomBlank';
55
62
  // 使用 memo 优化，只有当 height 或 className 改变时才重新渲染
56
63
  export var TopBlank = /*#__PURE__*/memo(TopBlankComponent, function (prevProps, nextProps) {
57
- return prevProps.height === nextProps.height && prevProps.className === nextProps.className;
64
+ return prevProps.height === nextProps.height;
58
65
  });
59
66
  export var BottomBlank = /*#__PURE__*/memo(BottomBlankComponent, function (prevProps, nextProps) {
60
- return prevProps.height === nextProps.height && prevProps.className === nextProps.className;
67
+ return prevProps.height === nextProps.height;
61
68
  });
package/es/table/base/header.js CHANGED
@@ -72,12 +72,13 @@ function calculateLeveledAndFlat(inputNested, rowCount) {
72
72
  leveled.push([]);
73
73
  }
74
74
  var flat = [];
75
- dfs(inputNested, 0);
75
+ dfs(inputNested, 0, false);
76
76
  return {
77
77
  flat: flat,
78
78
  leveled: leveled
79
79
  };
80
- function dfs(input, depth) {
80
+ function dfs(input, depth, suppressLeveled) {
81
+ var _a;
81
82
  var leafCount = 0;
82
83
  for (var i = 0; i < input.length; i++) {
83
84
  var indexedCol = input[i];
@@ -91,12 +92,15 @@ function calculateLeveledAndFlat(inputNested, rowCount) {
91
92
  colSpan: 1,
92
93
  isLeaf: true
93
94
  };
94
- leveled[depth].push(wrapped);
95
+ if (!suppressLeveled) {
96
+ leveled[depth].push(wrapped);
97
+ }
95
98
  flat.push(wrapped);
96
99
  } else {
97
- var dfsRes = dfs(indexedCol.children, depth + 1);
100
+ var mergeHeader = Boolean((_a = indexedCol.col) === null || _a === void 0 ? void 0 : _a.isHeaderMerge);
101
+ var dfsRes = dfs(indexedCol.children, depth + 1, suppressLeveled || mergeHeader);
98
102
  leafCount += dfsRes.leafCount;
99
- if (dfsRes.leafCount > 0) {
103
+ if (dfsRes.leafCount > 0 && !suppressLeveled) {
100
104
  leveled[depth].push({
101
105
  type: 'normal',
102
106
  width: indexedCol.col.width,
@@ -243,9 +247,9 @@ export default function TableHeader(_ref2) {
243
247
  var cell = /*#__PURE__*/React.createElement("th", _extends({
244
248
  key: colIndex
245
249
  }, headerCellProps, {
246
- 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)),
250
+ 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 || col.isHeaderMerge), _cx)),
247
251
  colSpan: colSpan,
248
- rowSpan: isLeaf ? rowCount - level : undefined,
252
+ rowSpan: isLeaf || col.isHeaderMerge ? rowCount - level : undefined,
249
253
  style: _extends(_extends({
250
254
  textAlign: col.align,
251
255
  verticalAlign: (_b = col.verticalAlign) !== null && _b !== void 0 ? _b : 'middle'
package/es/table/base/styles.js CHANGED
@@ -156,7 +156,7 @@ export var defaultCSSVariables = {
156
156
  export var variableConst = getCssVariableText(defaultCSSVariables);
157
157
  var notBorderedStyleMixin = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
158
158
  var borderedStyleMixin = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n //th\u9690\u85CF\u5217\u5BBD\u62D6\u62FD\u7684\u80CC\u666F\u8272\uFF0C\u4F7F\u7528th\u7684\u53F3\u8FB9\u6846\u4EE3\u66FF\n .", "::after{\n background-color: inherit;\n }\n"])), Classes.tableHeaderCellResize);
159
- export var StyledArtTableWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\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 }\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 flex-grow:1;\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-", ": 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-", ": 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n user-select:none;\n }\n\n .", " {\n user-select:none;\n // .", " .", " >td{\n // cursor:move;\n // }\n\n // .", " .", " >td{\n // cursor:no-drop;\n // }\n \n }\n\n .", "{\n opacity: 0.5;\n }\n .", "{\n border: 1px solid var(--primary-color)\n }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n \n }\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n\n\n // .", " td{\n // border-top: 1px solid var(--primary-color) !important;\n // }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n }\n\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n // .", " td{\n // border-bottom: 1px solid var(--primary-color) !important;\n // }\n\n .", " {\n cursor:pointer;\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: ", ";\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-", ": var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-", ": var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-", ": var(--header-cell-border-vertical);\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-", ": 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-", ": var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-", ": 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-", ": ", "px;\n \n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-", ": ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": 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 sticky\u517C\u5BB9\n &.sticky-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 display: flex;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n display: flex;\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 ", ":0;\n }\n .", "{\n rig", "ht: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 sticky\u517C\u5BB9\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n display:flex;\n background: var(--bgcolor);\n }\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 1;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\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: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\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 padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\n }\n &:focus {\n outline: none\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 .", " {\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 background: var(--header-bgcolor);\n position:sticky;\n z-index:5;\n ", ":0px;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n\n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n .", " th.", " .", "{\n ", ": 0;\n width: 5px;\n &::after{\n ", ": 4px;\n }\n }\n"])), function (_ref) {
159
+ export var StyledArtTableWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\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 }\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 flex-grow:1;\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-", ": 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-", ": 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n user-select:none;\n }\n\n .", " {\n user-select:none;\n // .", " .", " >td{\n // cursor:move;\n // }\n\n // .", " .", " >td{\n // cursor:no-drop;\n // }\n \n }\n\n .", "{\n opacity: 0.5;\n }\n .", "{\n border: 1px solid var(--primary-color)\n }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n \n }\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n\n\n // .", " td{\n // border-top: 1px solid var(--primary-color) !important;\n // }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n }\n\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n // .", " td{\n // border-bottom: 1px solid var(--primary-color) !important;\n // }\n\n .", " {\n cursor:pointer;\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: ", ";\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-", ": var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-", ": var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-", ": var(--header-cell-border-vertical);\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-", ": 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-", ": var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-", ": 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-", ": ", "px;\n \n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-", ": ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": 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 sticky\u517C\u5BB9\n &.sticky-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 display: flex;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n display: flex;\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 ", ":0;\n }\n .", "{\n ", ":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 sticky\u517C\u5BB9\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n display:flex;\n background: var(--bgcolor);\n }\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 1;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\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: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\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 padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\n }\n &:focus {\n outline: none\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 .", " {\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 background: var(--header-bgcolor);\n position:sticky;\n z-index:5;\n ", ":0px;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n\n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n .", " th.", " .", "{\n ", ": 0;\n width: 5px;\n &::after{\n ", ": 4px;\n }\n }\n"])), function (_ref) {
160
160
  var _context, _context2, _context3;
161
161
  var prefixCls = _ref.prefixCls;
162
162
  return prefixCls ? _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "&.".concat(prefixCls, "-table {:root {")).call(_context2, variableConst, "} ")).call(_context, variableConst, "}") : _concatInstanceProperty(_context3 = ":root {".concat(variableConst, "} ")).call(_context3, variableConst);
package/es/table/interfaces.d.ts CHANGED
@@ -2,6 +2,21 @@ import React, { ReactNode } from 'react';
2
2
  export declare type ArtColumnAlign = 'left' | 'center' | 'right';
3
3
  export declare type ArtColumnVerticalAlign = 'top' | 'bottom' | 'middle';
4
4
  export declare type CellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
5
+ export interface selectRenderProps {
6
+ type: 'multi' | 'single';
7
+ row: any;
8
+ rowIndex: number;
9
+ rowKey: string;
10
+ checked: boolean;
11
+ disabled: boolean;
12
+ defaultElement: React.ReactNode;
13
+ actions: {
14
+ /** 将当前行设置为选中（若已选中则不操作） */
15
+ select: () => void;
16
+ /** 切换当前行选中状态 */
17
+ toggle: (batch?: boolean) => void;
18
+ };
19
+ }
5
20
  export interface ArtColumnStaticPart {
6
21
  /** 列的名称 */
7
22
  name: string;
@@ -29,6 +44,10 @@ export interface ArtColumnStaticPart {
29
44
  };
30
45
  /** 表头设置操作项到自定义操作区 */
31
46
  renderHeader?: (title: ReactNode, opr: ReactNode) => ReactNode;
47
+ /** 自定义选择列渲染 **/
48
+ customRender?: selectRenderProps;
49
+ /** 在分组情况下是否需要合并表头 默认不合并 */
50
+ isHeaderMerge?: boolean;
32
51
  }
33
52
  export interface Features {
34
53
  /** 是否开启排序功能 */
package/es/table/pipeline/features/multiSelect.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { ArtColumn } from '../../interfaces';
1
+ import React from 'react';
2
+ import { ArtColumn, selectRenderProps } from '../../interfaces';
2
3
  import { TablePipeline } from '../pipeline';
3
4
  export interface MultiSelectFeatureOptions {
4
5
  /** 非受控用法：默认选中的值 */
@@ -23,5 +24,6 @@ export interface MultiSelectFeatureOptions {
23
24
  clickArea?: 'checkbox' | 'cell' | 'row';
24
25
  /** 是否对触发 onChange 的 click 事件调用 event.stopPropagation() */
25
26
  stopClickEventPropagation?: boolean;
27
+ customRender?: (ctx: selectRenderProps) => React.ReactNode;
26
28
  }
27
29
  export declare function multiSelect(opts?: MultiSelectFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
package/es/table/pipeline/features/multiSelect.js CHANGED
@@ -112,23 +112,46 @@ export function multiSelect() {
112
112
  var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
113
113
  var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
114
114
  var checked = selectValueSet.has(key);
115
- return /*#__PURE__*/React.createElement(Checkbox, {
116
- checked: checked,
117
- disabled: isDisabled(row, rowIndex),
118
- onChange: clickArea === 'checkbox' ? function (arg1, arg2) {
119
- var _a;
120
- // 这里要同时兼容 antd 和 fusion 的用法
121
- // fusion: arg2?.nativeEvent
122
- // antd: arg1.nativeEvent
123
- var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1.nativeEvent;
124
- if (nativeEvent) {
125
- if (opts.stopClickEventPropagation) {
126
- nativeEvent.stopPropagation();
127
- }
128
- onCheckboxChange(checked, key, nativeEvent.shiftKey);
115
+ var disabled = isDisabled(row, rowIndex);
116
+ var defaultOnChange = clickArea === 'checkbox' ? function (arg1, arg2) {
117
+ var _a;
118
+ // 这里要同时兼容 antd 和 fusion 的用法
119
+ // fusion: arg2?.nativeEvent
120
+ // antd: arg1.nativeEvent
121
+ var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1.nativeEvent;
122
+ if (nativeEvent) {
123
+ if (opts.stopClickEventPropagation) {
124
+ nativeEvent.stopPropagation();
129
125
  }
130
- } : undefined
126
+ onCheckboxChange(checked, key, nativeEvent.shiftKey);
127
+ }
128
+ } : undefined;
129
+ var defaultElement = /*#__PURE__*/React.createElement(Checkbox, {
130
+ checked: checked,
131
+ disabled: disabled,
132
+ onChange: defaultOnChange
131
133
  });
134
+ var ctx = {
135
+ type: 'multi',
136
+ row: row,
137
+ rowIndex: rowIndex,
138
+ rowKey: key,
139
+ checked: checked,
140
+ disabled: disabled,
141
+ defaultElement: defaultElement,
142
+ actions: {
143
+ select: function select() {
144
+ if (!checked) onCheckboxChange(false, key, false);
145
+ },
146
+ toggle: function toggle(batch) {
147
+ return onCheckboxChange(checked, key, !!batch);
148
+ }
149
+ }
150
+ };
151
+ if (opts.customRender) {
152
+ return opts.customRender(ctx);
153
+ }
154
+ return defaultElement;
132
155
  },
133
156
  features: _extends(_extends({}, (_l = opts.checkboxColumn) === null || _l === void 0 ? void 0 : _l.features), _defineProperty({}, MULTI_SELECT_MARK_PROPNAME, true))
134
157
  });
package/es/table/pipeline/features/singleSelect.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { ArtColumn } from '../../interfaces';
1
+ import React from 'react';
2
+ import { ArtColumn, selectRenderProps } from '../../interfaces';
2
3
  import { TablePipeline } from '../pipeline';
3
4
  export interface SingleSelectFeatureOptions {
4
5
  /** 是否高亮被选中的行 */
@@ -19,5 +20,6 @@ export interface SingleSelectFeatureOptions {
19
20
  radioPlacement?: 'start' | 'end';
20
21
  /** 是否对触发 onChange 的 click 事件调用 event.stopPropagation() */
21
22
  stopClickEventPropagation?: boolean;
23
+ customRender?: (ctx: selectRenderProps) => React.ReactNode;
22
24
  }
23
25
  export declare function singleSelect(opts?: SingleSelectFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
package/es/table/pipeline/features/singleSelect.js CHANGED
@@ -54,18 +54,42 @@ export function singleSelect() {
54
54
  return null;
55
55
  }
56
56
  var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
57
- return /*#__PURE__*/React.createElement(Radio, {
58
- checked: value === rowKey,
59
- disabled: isDisabled(row, rowIndex),
60
- onChange: clickArea === 'radio' ? function (arg1, arg2) {
61
- var _a;
62
- var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1 === null || arg1 === void 0 ? void 0 : arg1.nativeEvent;
63
- if (nativeEvent && opts.stopClickEventPropagation) {
64
- nativeEvent.stopPropagation();
65
- }
66
- onChange(rowKey);
67
- } : undefined
57
+ var checked = value === rowKey;
58
+ var disabled = isDisabled(row, rowIndex);
59
+ var defaultOnChange = clickArea === 'radio' ? function (arg1, arg2) {
60
+ var _a;
61
+ var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1 === null || arg1 === void 0 ? void 0 : arg1.nativeEvent;
62
+ if (nativeEvent && opts.stopClickEventPropagation) {
63
+ nativeEvent.stopPropagation();
64
+ }
65
+ onChange(rowKey);
66
+ } : undefined;
67
+ var defaultElement = /*#__PURE__*/React.createElement(Radio, {
68
+ checked: checked,
69
+ disabled: disabled,
70
+ onChange: defaultOnChange
68
71
  });
72
+ var ctx = {
73
+ type: 'single',
74
+ row: row,
75
+ rowIndex: rowIndex,
76
+ rowKey: rowKey,
77
+ checked: checked,
78
+ disabled: disabled,
79
+ defaultElement: defaultElement,
80
+ actions: {
81
+ select: function select() {
82
+ return onChange(rowKey);
83
+ },
84
+ toggle: function toggle() {
85
+ return onChange(rowKey);
86
+ }
87
+ }
88
+ };
89
+ if (opts.customRender) {
90
+ return opts.customRender(ctx);
91
+ }
92
+ return defaultElement;
69
93
  },
70
94
  features: _extends(_extends({}, (_e = opts.radioColumn) === null || _e === void 0 ? void 0 : _e.features), _defineProperty({}, SINGLE_SELECT_MARK_PROPNAME, true))
71
95
  });
package/es/table/utils/getTreeDepth.js CHANGED
@@ -12,12 +12,15 @@ export default function getTreeDepth(nodes) {
12
12
  dfs(nodes, 0);
13
13
  return maxDepth;
14
14
  function dfs(columns, depth) {
15
+ var _a;
15
16
  var _iterator = _createForOfIteratorHelper(columns),
16
17
  _step;
17
18
  try {
18
19
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
19
20
  var column = _step.value;
20
- if (isLeafNode(column)) {
21
+ var isHeaderMerge = ((_a = column) === null || _a === void 0 ? void 0 : _a.isHeaderMerge) === true;
22
+ // 当列配置了 isHeaderMerge 时，将其视作“可视叶子”，不再深入子层计算深度
23
+ if (isLeafNode(column) || isHeaderMerge) {
21
24
  maxDepth = Math.max(maxDepth, depth);
22
25
  } else {
23
26
  dfs(column.children, depth + 1);
package/lib/table/base/BlankComponent.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  interface BlankProps {
3
3
  height: number;
4
- className?: string;
5
4
  }
6
5
  export interface BlankRef {
7
6
  updateHeight: (newHeight: number) => void;
package/lib/table/base/BlankComponent.js CHANGED
@@ -15,8 +15,11 @@ var _styles = require("./styles");
15
15
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
17
  var TopBlankComponent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
18
- var initialHeight = _ref.height;
19
- var _useState = (0, _react.useState)(initialHeight),
18
+ var heightFromProps = _ref.height;
19
+ (0, _react.useEffect)(function () {
20
+ setHeight(heightFromProps);
21
+ }, [heightFromProps]);
22
+ var _useState = (0, _react.useState)(heightFromProps),
20
23
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
21
24
  height = _useState2[0],
22
25
  setHeight = _useState2[1];
@@ -30,6 +33,8 @@ var TopBlankComponent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
30
33
  };
31
34
  }, [height]);
32
35
  return /*#__PURE__*/_react.default.createElement("div", {
36
+ key: "top-blank",
37
+ className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'bottom'),
33
38
  style: {
34
39
  height: height
35
40
  }
@@ -37,12 +42,14 @@ var TopBlankComponent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
37
42
  });
38
43
  TopBlankComponent.displayName = 'TopBlank';
39
44
  var BottomBlankComponent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
40
- var initialHeight = _ref2.height,
41
- className = _ref2.className;
42
- var _useState3 = (0, _react.useState)(initialHeight),
45
+ var heightFromProps = _ref2.height;
46
+ var _useState3 = (0, _react.useState)(heightFromProps),
43
47
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
44
48
  height = _useState4[0],
45
49
  setHeight = _useState4[1];
50
+ (0, _react.useEffect)(function () {
51
+ setHeight(heightFromProps);
52
+ }, [heightFromProps]);
46
53
  (0, _react.useImperativeHandle)(ref, function () {
47
54
  return {
48
55
  updateHeight: function updateHeight(newHeight) {
@@ -57,7 +64,7 @@ var BottomBlankComponent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2,
57
64
  }
58
65
  return /*#__PURE__*/_react.default.createElement("div", {
59
66
  key: "bottom-blank",
60
- className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'bottom', className),
67
+ className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'bottom'),
61
68
  style: {
62
69
  height: height
63
70
  }
@@ -66,10 +73,10 @@ var BottomBlankComponent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2,
66
73
  BottomBlankComponent.displayName = 'BottomBlank';
67
74
  // 使用 memo 优化，只有当 height 或 className 改变时才重新渲染
68
75
  var TopBlank = /*#__PURE__*/(0, _react.memo)(TopBlankComponent, function (prevProps, nextProps) {
69
- return prevProps.height === nextProps.height && prevProps.className === nextProps.className;
76
+ return prevProps.height === nextProps.height;
70
77
  });
71
78
  exports.TopBlank = TopBlank;
72
79
  var BottomBlank = /*#__PURE__*/(0, _react.memo)(BottomBlankComponent, function (prevProps, nextProps) {
73
- return prevProps.height === nextProps.height && prevProps.className === nextProps.className;
80
+ return prevProps.height === nextProps.height;
74
81
  });
75
82
  exports.BottomBlank = BottomBlank;
package/lib/table/base/header.js CHANGED
@@ -79,12 +79,13 @@ function calculateLeveledAndFlat(inputNested, rowCount) {
79
79
  leveled.push([]);
80
80
  }
81
81
  var flat = [];
82
- dfs(inputNested, 0);
82
+ dfs(inputNested, 0, false);
83
83
  return {
84
84
  flat: flat,
85
85
  leveled: leveled
86
86
  };
87
- function dfs(input, depth) {
87
+ function dfs(input, depth, suppressLeveled) {
88
+ var _a;
88
89
  var leafCount = 0;
89
90
  for (var i = 0; i < input.length; i++) {
90
91
  var indexedCol = input[i];
@@ -98,12 +99,15 @@ function calculateLeveledAndFlat(inputNested, rowCount) {
98
99
  colSpan: 1,
99
100
  isLeaf: true
100
101
  };
101
- leveled[depth].push(wrapped);
102
+ if (!suppressLeveled) {
103
+ leveled[depth].push(wrapped);
104
+ }
102
105
  flat.push(wrapped);
103
106
  } else {
104
- var dfsRes = dfs(indexedCol.children, depth + 1);
107
+ var mergeHeader = Boolean((_a = indexedCol.col) === null || _a === void 0 ? void 0 : _a.isHeaderMerge);
108
+ var dfsRes = dfs(indexedCol.children, depth + 1, suppressLeveled || mergeHeader);
105
109
  leafCount += dfsRes.leafCount;
106
- if (dfsRes.leafCount > 0) {
110
+ if (dfsRes.leafCount > 0 && !suppressLeveled) {
107
111
  leveled[depth].push({
108
112
  type: 'normal',
109
113
  width: indexedCol.col.width,
@@ -250,9 +254,9 @@ function TableHeader(_ref2) {
250
254
  var cell = /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
251
255
  key: colIndex
252
256
  }, headerCellProps, {
253
- className: (0, _classnames.default)(_styles.Classes.tableHeaderCell, headerCellProps.className, (_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.first, colIndex === 0), (0, _defineProperty2.default)(_cx, _styles.Classes.last, colIndex + colSpan === fullFlatCount), (0, _defineProperty2.default)(_cx, _styles.Classes.lockLeft, colIndex < leftFlatCount || theaderPosition === 'left'), (0, _defineProperty2.default)(_cx, _styles.Classes.lockRight, colIndex >= fullFlatCount - rightFlatCount || theaderPosition === 'right'), (0, _defineProperty2.default)(_cx, _styles.Classes.leaf, wrapped.isLeaf), _cx)),
257
+ className: (0, _classnames.default)(_styles.Classes.tableHeaderCell, headerCellProps.className, (_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.first, colIndex === 0), (0, _defineProperty2.default)(_cx, _styles.Classes.last, colIndex + colSpan === fullFlatCount), (0, _defineProperty2.default)(_cx, _styles.Classes.lockLeft, colIndex < leftFlatCount || theaderPosition === 'left'), (0, _defineProperty2.default)(_cx, _styles.Classes.lockRight, colIndex >= fullFlatCount - rightFlatCount || theaderPosition === 'right'), (0, _defineProperty2.default)(_cx, _styles.Classes.leaf, wrapped.isLeaf || col.isHeaderMerge), _cx)),
254
258
  colSpan: colSpan,
255
- rowSpan: isLeaf ? rowCount - level : undefined,
259
+ rowSpan: isLeaf || col.isHeaderMerge ? rowCount - level : undefined,
256
260
  style: (0, _extends2.default)((0, _extends2.default)({
257
261
  textAlign: col.align,
258
262
  verticalAlign: (_b = col.verticalAlign) !== null && _b !== void 0 ? _b : 'middle'
package/lib/table/base/styles.js CHANGED
@@ -174,7 +174,7 @@ var variableConst = getCssVariableText(defaultCSSVariables);
174
174
  exports.variableConst = variableConst;
175
175
  var notBorderedStyleMixin = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
176
176
  var borderedStyleMixin = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n //th\u9690\u85CF\u5217\u5BBD\u62D6\u62FD\u7684\u80CC\u666F\u8272\uFF0C\u4F7F\u7528th\u7684\u53F3\u8FB9\u6846\u4EE3\u66FF\n .", "::after{\n background-color: inherit;\n }\n"])), Classes.tableHeaderCellResize);
177
- var StyledArtTableWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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 // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\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 }\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 flex-grow:1;\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-", ": 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-", ": 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n user-select:none;\n }\n\n .", " {\n user-select:none;\n // .", " .", " >td{\n // cursor:move;\n // }\n\n // .", " .", " >td{\n // cursor:no-drop;\n // }\n \n }\n\n .", "{\n opacity: 0.5;\n }\n .", "{\n border: 1px solid var(--primary-color)\n }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n \n }\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n\n\n // .", " td{\n // border-top: 1px solid var(--primary-color) !important;\n // }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n }\n\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n // .", " td{\n // border-bottom: 1px solid var(--primary-color) !important;\n // }\n\n .", " {\n cursor:pointer;\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: ", ";\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-", ": var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-", ": var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-", ": var(--header-cell-border-vertical);\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-", ": 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-", ": var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-", ": 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-", ": ", "px;\n \n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-", ": ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": 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 sticky\u517C\u5BB9\n &.sticky-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 display: flex;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n display: flex;\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 ", ":0;\n }\n .", "{\n rig", "ht: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 sticky\u517C\u5BB9\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n display:flex;\n background: var(--bgcolor);\n }\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 1;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\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: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\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 padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\n }\n &:focus {\n outline: none\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 .", " {\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 background: var(--header-bgcolor);\n position:sticky;\n z-index:5;\n ", ":0px;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n\n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n .", " th.", " .", "{\n ", ": 0;\n width: 5px;\n &::after{\n ", ": 4px;\n }\n }\n"])), function (_ref) {
177
+ var StyledArtTableWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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 // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\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 }\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 flex-grow:1;\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-", ": 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-", ": 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n user-select:none;\n }\n\n .", " {\n user-select:none;\n // .", " .", " >td{\n // cursor:move;\n // }\n\n // .", " .", " >td{\n // cursor:no-drop;\n // }\n \n }\n\n .", "{\n opacity: 0.5;\n }\n .", "{\n border: 1px solid var(--primary-color)\n }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n \n }\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n\n\n // .", " td{\n // border-top: 1px solid var(--primary-color) !important;\n // }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n }\n\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n // .", " td{\n // border-bottom: 1px solid var(--primary-color) !important;\n // }\n\n .", " {\n cursor:pointer;\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: ", ";\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-", ": var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-", ": var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-", ": var(--header-cell-border-vertical);\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-", ": 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-", ": var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-", ": 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-", ": ", "px;\n \n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-", ": ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": 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 sticky\u517C\u5BB9\n &.sticky-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 display: flex;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n display: flex;\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 ", ":0;\n }\n .", "{\n ", ":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 sticky\u517C\u5BB9\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n display:flex;\n background: var(--bgcolor);\n }\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 1;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\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: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\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 padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\n }\n &:focus {\n outline: none\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 .", " {\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 background: var(--header-bgcolor);\n position:sticky;\n z-index:5;\n ", ":0px;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n\n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n .", " th.", " .", "{\n ", ": 0;\n width: 5px;\n &::after{\n ", ": 4px;\n }\n }\n"])), function (_ref) {
178
178
  var _context, _context2, _context3;
179
179
  var prefixCls = _ref.prefixCls;
180
180
  return prefixCls ? (0, _concat.default)(_context = (0, _concat.default)(_context2 = "&.".concat(prefixCls, "-table {:root {")).call(_context2, variableConst, "} ")).call(_context, variableConst, "}") : (0, _concat.default)(_context3 = ":root {".concat(variableConst, "} ")).call(_context3, variableConst);
package/lib/table/interfaces.d.ts CHANGED
@@ -2,6 +2,21 @@ import React, { ReactNode } from 'react';
2
2
  export declare type ArtColumnAlign = 'left' | 'center' | 'right';
3
3
  export declare type ArtColumnVerticalAlign = 'top' | 'bottom' | 'middle';
4
4
  export declare type CellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
5
+ export interface selectRenderProps {
6
+ type: 'multi' | 'single';
7
+ row: any;
8
+ rowIndex: number;
9
+ rowKey: string;
10
+ checked: boolean;
11
+ disabled: boolean;
12
+ defaultElement: React.ReactNode;
13
+ actions: {
14
+ /** 将当前行设置为选中（若已选中则不操作） */
15
+ select: () => void;
16
+ /** 切换当前行选中状态 */
17
+ toggle: (batch?: boolean) => void;
18
+ };
19
+ }
5
20
  export interface ArtColumnStaticPart {
6
21
  /** 列的名称 */
7
22
  name: string;
@@ -29,6 +44,10 @@ export interface ArtColumnStaticPart {
29
44
  };
30
45
  /** 表头设置操作项到自定义操作区 */
31
46
  renderHeader?: (title: ReactNode, opr: ReactNode) => ReactNode;
47
+ /** 自定义选择列渲染 **/
48
+ customRender?: selectRenderProps;
49
+ /** 在分组情况下是否需要合并表头 默认不合并 */
50
+ isHeaderMerge?: boolean;
32
51
  }
33
52
  export interface Features {
34
53
  /** 是否开启排序功能 */
package/lib/table/pipeline/features/multiSelect.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { ArtColumn } from '../../interfaces';
1
+ import React from 'react';
2
+ import { ArtColumn, selectRenderProps } from '../../interfaces';
2
3
  import { TablePipeline } from '../pipeline';
3
4
  export interface MultiSelectFeatureOptions {
4
5
  /** 非受控用法：默认选中的值 */
@@ -23,5 +24,6 @@ export interface MultiSelectFeatureOptions {
23
24
  clickArea?: 'checkbox' | 'cell' | 'row';
24
25
  /** 是否对触发 onChange 的 click 事件调用 event.stopPropagation() */
25
26
  stopClickEventPropagation?: boolean;
27
+ customRender?: (ctx: selectRenderProps) => React.ReactNode;
26
28
  }
27
29
  export declare function multiSelect(opts?: MultiSelectFeatureOptions): (pipeline: TablePipeline) => TablePipeline;