@kdcloudjs/table 1.2.2-canary.17 → 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 (30) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +105 -48
  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/header.js +11 -7
  8. package/es/table/base/renderTemplates.js +1 -3
  9. package/es/table/base/styles.js +8 -4
  10. package/es/table/base/table.d.ts +1 -0
  11. package/es/table/base/table.js +6 -3
  12. package/es/table/interfaces.d.ts +19 -0
  13. package/es/table/pipeline/features/multiSelect.d.ts +3 -1
  14. package/es/table/pipeline/features/multiSelect.js +38 -15
  15. package/es/table/pipeline/features/singleSelect.d.ts +3 -1
  16. package/es/table/pipeline/features/singleSelect.js +35 -11
  17. package/es/table/utils/getTreeDepth.js +4 -1
  18. package/lib/table/base/header.js +11 -7
  19. package/lib/table/base/renderTemplates.js +1 -3
  20. package/lib/table/base/styles.js +8 -4
  21. package/lib/table/base/table.d.ts +1 -0
  22. package/lib/table/base/table.js +6 -3
  23. package/lib/table/interfaces.d.ts +19 -0
  24. package/lib/table/pipeline/features/multiSelect.d.ts +3 -1
  25. package/lib/table/pipeline/features/multiSelect.js +38 -15
  26. package/lib/table/pipeline/features/singleSelect.d.ts +3 -1
  27. package/lib/table/pipeline/features/singleSelect.js +35 -11
  28. package/lib/table/utils/getTreeDepth.js +4 -1
  29. package/package.json +1 -1
  30. package/CHANGELOG.md +0 -0
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/renderTemplates.js CHANGED
@@ -322,9 +322,7 @@ function RowDetail(props) {
322
322
  useEffect(function () {
323
323
  // 这时候行才渲染完，只能在这里设置偏移量
324
324
  var offsetTop = domHelper.getRowTop(rowIndex) || 0;
325
- setTimeout(function () {
326
- detailRef.current.style.transform = "translateY(".concat(offsetTop + 'px', ")");
327
- }, 0);
325
+ detailRef.current.style.transform = "translateY(".concat(offsetTop + 'px', ")");
328
326
  });
329
327
  return /*#__PURE__*/React.createElement("div", {
330
328
  ref: detailRef,
package/es/table/base/styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
2
2
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
3
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
4
3
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
4
+ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
5
5
  import styled, { css, createGlobalStyle } from 'styled-components';
6
6
  import { swapRTLDirection } from './utils';
7
7
  export var LOCK_SHADOW_PADDING = 20;
@@ -156,7 +156,11 @@ 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 :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 // \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"])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, function (props) {
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
+ var _context, _context2, _context3;
161
+ var prefixCls = _ref.prefixCls;
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);
163
+ }, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, function (props) {
160
164
  return swapRTLDirection(props.direction, 'left');
161
165
  }, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, function (props) {
162
166
  return swapRTLDirection(props.direction, 'right');
@@ -204,8 +208,8 @@ export var StyledArtTableWrapper = styled.div(_templateObject5 || (_templateObje
204
208
  export var ButtonCSS = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\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"])), variableConst, Classes.button, Classes.buttonPrimary);
205
209
  function getCssVariableText(obj) {
206
210
  return _Object$keys(obj).reduce(function (acc, key) {
207
- var _context;
208
- acc += _concatInstanceProperty(_context = "".concat(key, ":")).call(_context, obj[key], ";");
211
+ var _context4;
212
+ acc += _concatInstanceProperty(_context4 = "".concat(key, ":")).call(_context4, obj[key], ";");
209
213
  return acc;
210
214
  }, '');
211
215
  }
package/es/table/base/table.d.ts CHANGED
@@ -91,6 +91,7 @@ export interface BaseTableProps {
91
91
  blockSize?: number;
92
92
  };
93
93
  direction?: string;
94
+ prefixCls?: string;
94
95
  }
95
96
  export interface BaseTableState {
96
97
  /** 是否要展示自定义滚动条(stickyScroll) */
package/es/table/base/table.js CHANGED
@@ -489,7 +489,9 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
489
489
  footerDataSource = _this$props8.footerDataSource,
490
490
  components = _this$props8.components,
491
491
  bordered = _this$props8.bordered,
492
- direction = _this$props8.direction;
492
+ direction = _this$props8.direction,
493
+ _prefixCls = _this$props8.prefixCls;
494
+ var prefixCls = _prefixCls === 'kd' || !_prefixCls ? undefined : _prefixCls; // 不生效上层传的prefix为kd，只有传除'kd'外的前缀才生效，kui默认传kd，避免对之前的样式层级有影响
493
495
  info.direction = direction;
494
496
  var artTableWrapperClassName = cx(Classes.artTableWrapper, (_cx = {
495
497
  'use-outer-border': useOuterBorder,
@@ -499,7 +501,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
499
501
  'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
500
502
  'has-footer': footerDataSource.length > 0,
501
503
  'sticky-footer': isStickyFooter
502
- }, _defineProperty(_cx, Classes.artTableBordered, bordered), _defineProperty(_cx, 'ie-polyfill-wrapper', browserType.isIE), _defineProperty(_cx, 'sticky-polyfill-wrapper', isStickyUIDegrade()), _cx), className);
504
+ }, _defineProperty(_cx, Classes.artTableBordered, bordered), _defineProperty(_cx, 'ie-polyfill-wrapper', browserType.isIE), _defineProperty(_cx, 'sticky-polyfill-wrapper', isStickyUIDegrade()), _defineProperty(_cx, "".concat(prefixCls, "-table"), prefixCls), _cx), className);
503
505
  var artTableWrapperProps = _defineProperty({
504
506
  className: artTableWrapperClassName,
505
507
  style: _extends(_extends({}, style), {
@@ -510,7 +512,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
510
512
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyleComponent, {
511
513
  direction: info.direction
512
514
  }), /*#__PURE__*/React.createElement(StyledArtTableWrapper, _extends({}, artTableWrapperProps, {
513
- direction: info.direction
515
+ direction: info.direction,
516
+ prefixCls: this.props.prefixCls
514
517
  }), /*#__PURE__*/React.createElement(Loading, {
515
518
  visible: isLoading,
516
519
  LoadingIcon: components.LoadingIcon,
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/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/renderTemplates.js CHANGED
@@ -335,9 +335,7 @@ function RowDetail(props) {
335
335
  (0, _react.useEffect)(function () {
336
336
  // 这时候行才渲染完，只能在这里设置偏移量
337
337
  var offsetTop = domHelper.getRowTop(rowIndex) || 0;
338
- setTimeout(function () {
339
- detailRef.current.style.transform = "translateY(".concat(offsetTop + 'px', ")");
340
- }, 0);
338
+ detailRef.current.style.transform = "translateY(".concat(offsetTop + 'px', ")");
341
339
  });
342
340
  return /*#__PURE__*/_react.default.createElement("div", {
343
341
  ref: detailRef,
package/lib/table/base/styles.js CHANGED
@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
10
  exports.variableConst = exports.defaultCSSVariables = exports.StyledArtTableWrapper = exports.MenuClasses = exports.LOCK_SHADOW_PADDING = exports.GlobalStyle = exports.Classes = exports.ButtonCSS = void 0;
11
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
12
11
  var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
12
+ var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
13
13
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
14
14
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
15
15
  var _utils = require("./utils");
@@ -174,7 +174,11 @@ 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 :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 // \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"])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, function (props) {
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
+ var _context, _context2, _context3;
179
+ var prefixCls = _ref.prefixCls;
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);
181
+ }, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, function (props) {
178
182
  return (0, _utils.swapRTLDirection)(props.direction, 'left');
179
183
  }, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, function (props) {
180
184
  return (0, _utils.swapRTLDirection)(props.direction, 'right');
@@ -224,8 +228,8 @@ var ButtonCSS = (0, _styledComponents.css)(_templateObject6 || (_templateObject6
224
228
  exports.ButtonCSS = ButtonCSS;
225
229
  function getCssVariableText(obj) {
226
230
  return (0, _keys.default)(obj).reduce(function (acc, key) {
227
- var _context;
228
- acc += (0, _concat.default)(_context = "".concat(key, ":")).call(_context, obj[key], ";");
231
+ var _context4;
232
+ acc += (0, _concat.default)(_context4 = "".concat(key, ":")).call(_context4, obj[key], ";");
229
233
  return acc;
230
234
  }, '');
231
235
  }
package/lib/table/base/table.d.ts CHANGED
@@ -91,6 +91,7 @@ export interface BaseTableProps {
91
91
  blockSize?: number;
92
92
  };
93
93
  direction?: string;
94
+ prefixCls?: string;
94
95
  }
95
96
  export interface BaseTableState {
96
97
  /** 是否要展示自定义滚动条(stickyScroll) */
package/lib/table/base/table.js CHANGED
@@ -502,7 +502,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
502
502
  footerDataSource = _this$props8.footerDataSource,
503
503
  components = _this$props8.components,
504
504
  bordered = _this$props8.bordered,
505
- direction = _this$props8.direction;
505
+ direction = _this$props8.direction,
506
+ _prefixCls = _this$props8.prefixCls;
507
+ var prefixCls = _prefixCls === 'kd' || !_prefixCls ? undefined : _prefixCls; // 不生效上层传的prefix为kd，只有传除'kd'外的前缀才生效，kui默认传kd，避免对之前的样式层级有影响
506
508
  info.direction = direction;
507
509
  var artTableWrapperClassName = (0, _classnames.default)(_styles.Classes.artTableWrapper, (_cx = {
508
510
  'use-outer-border': useOuterBorder,
@@ -512,7 +514,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
512
514
  'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
513
515
  'has-footer': footerDataSource.length > 0,
514
516
  'sticky-footer': isStickyFooter
515
- }, (0, _defineProperty2.default)(_cx, _styles.Classes.artTableBordered, bordered), (0, _defineProperty2.default)(_cx, 'ie-polyfill-wrapper', _utils2.browserType.isIE), (0, _defineProperty2.default)(_cx, 'sticky-polyfill-wrapper', (0, _utils2.isStickyUIDegrade)()), _cx), className);
517
+ }, (0, _defineProperty2.default)(_cx, _styles.Classes.artTableBordered, bordered), (0, _defineProperty2.default)(_cx, 'ie-polyfill-wrapper', _utils2.browserType.isIE), (0, _defineProperty2.default)(_cx, 'sticky-polyfill-wrapper', (0, _utils2.isStickyUIDegrade)()), (0, _defineProperty2.default)(_cx, "".concat(prefixCls, "-table"), prefixCls), _cx), className);
516
518
  var artTableWrapperProps = (0, _defineProperty2.default)({
517
519
  className: artTableWrapperClassName,
518
520
  style: (0, _extends2.default)((0, _extends2.default)({}, style), {
@@ -523,7 +525,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
523
525
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_globalStyleComponent.default, {
524
526
  direction: info.direction
525
527
  }), /*#__PURE__*/_react.default.createElement(_styles.StyledArtTableWrapper, (0, _extends2.default)({}, artTableWrapperProps, {
526
- direction: info.direction
528
+ direction: info.direction,
529
+ prefixCls: this.props.prefixCls
527
530
  }), /*#__PURE__*/_react.default.createElement(_loading.default, {
528
531
  visible: isLoading,
529
532
  LoadingIcon: components.LoadingIcon,
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
  /** 是否开启排序功能 */