@kdcloudjs/table 1.2.0-canary.17 → 1.2.0-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 (19) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +48 -26
  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.d.ts +2 -1
  8. package/es/table/base/header.js +4 -2
  9. package/es/table/base/html-table.js +1 -1
  10. package/es/table/base/renderTemplates.js +24 -10
  11. package/es/table/base/styles.js +1 -1
  12. package/es/table/base/table.js +17 -11
  13. package/lib/table/base/header.d.ts +2 -1
  14. package/lib/table/base/header.js +4 -2
  15. package/lib/table/base/html-table.js +1 -1
  16. package/lib/table/base/renderTemplates.js +24 -10
  17. package/lib/table/base/styles.js +1 -1
  18. package/lib/table/base/table.js +17 -11
  19. package/package.json +1 -1
package/es/table/base/header.d.ts CHANGED
@@ -4,6 +4,7 @@ interface TableHeaderProps {
4
4
  info: RenderInfo;
5
5
  theaderPosition?: 'left' | 'center' | 'right';
6
6
  rowCount?: number;
7
+ stickyRightOffset?: number;
7
8
  }
8
- export default function TableHeader({ info, theaderPosition, rowCount: _rowCount }: TableHeaderProps): JSX.Element;
9
+ export default function TableHeader({ info, theaderPosition, rowCount: _rowCount, stickyRightOffset }: TableHeaderProps): JSX.Element;
9
10
  export {};
package/es/table/base/header.js CHANGED
@@ -228,7 +228,8 @@ export default function TableHeader(_ref2) {
228
228
 
229
229
  var info = _ref2.info,
230
230
  theaderPosition = _ref2.theaderPosition,
231
- _rowCount = _ref2.rowCount;
231
+ _rowCount = _ref2.rowCount,
232
+ stickyRightOffset = _ref2.stickyRightOffset;
232
233
 
233
234
  var nested = info.nested,
234
235
  flat = _flatInstanceProperty(info),
@@ -275,7 +276,8 @@ export default function TableHeader(_ref2) {
275
276
  positionStyle.left = stickyLeftMap.get(colIndex);
276
277
  } else if (colIndex >= fullFlatCount - rightFlatCount) {
277
278
  positionStyle.position = 'sticky';
278
- positionStyle.right = stickyRightMap.get(colIndex);
279
+ var stickyRightIndex = colSpan > 1 ? colIndex + colSpan - 1 : colIndex;
280
+ positionStyle.right = stickyRightMap.get(stickyRightIndex) + stickyRightOffset;
279
281
  }
280
282
 
281
283
  var justifyContent = col.align === 'right' ? 'flex-end' : col.align === 'center' ? 'center' : 'flex-start';
package/es/table/base/html-table.js CHANGED
@@ -124,7 +124,7 @@ export function HtmlTable(_ref) {
124
124
  positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
125
125
  } else if (colIndex >= fullFlatCount - rightFlatCount) {
126
126
  positionStyle.position = 'sticky';
127
- positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - (typeof stickyRightOffset === 'number' ? stickyRightOffset : 0);
127
+ positionStyle.right = hozInfo.stickyRightMap.get(colIndex) + (typeof stickyRightOffset === 'number' ? stickyRightOffset : 0);
128
128
  }
129
129
 
130
130
  return /*#__PURE__*/React.createElement('td', _extends(_extends(_extends(_extends({
package/es/table/base/renderTemplates.js CHANGED
@@ -19,7 +19,7 @@ import { getTreeDepth, browserType } from '../utils';
19
19
  import TableHeader from './header';
20
20
  var TEMPLATES = new _Map();
21
21
 
22
- function renderTableHeaderInIE(info, props) {
22
+ function renderTableHeaderInIE(info, props, extra) {
23
23
  var stickyTop = props.stickyTop,
24
24
  hasHeader = props.hasHeader;
25
25
 
@@ -34,6 +34,9 @@ function renderTableHeaderInIE(info, props) {
34
34
  rightNested = nested.right,
35
35
  full = nested.full;
36
36
  var rowCount = getTreeDepth(full) + 1;
37
+ var fixedRightTableStyle = {
38
+ right: (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) || 0
39
+ };
37
40
  return /*#__PURE__*/React.createElement("div", {
38
41
  className: cx(Classes.tableHeader)
39
42
  }, /*#__PURE__*/React.createElement("div", {
@@ -45,6 +48,11 @@ function renderTableHeaderInIE(info, props) {
45
48
  }, /*#__PURE__*/React.createElement(TableHeader, {
46
49
  info: info,
47
50
  theaderPosition: hasLockColumn ? 'center' : undefined
51
+ }), /*#__PURE__*/React.createElement("div", {
52
+ className: Classes.verticalScrollPlaceholder,
53
+ style: typeof (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) === 'number' ? {
54
+ width: extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset
55
+ } : undefined
48
56
  })), left.length > 0 ? /*#__PURE__*/React.createElement("div", {
49
57
  className: Classes.fixedLeft
50
58
  }, /*#__PURE__*/React.createElement(TableHeader, {
@@ -72,7 +80,8 @@ function renderTableHeaderInIE(info, props) {
72
80
  theaderPosition: "left",
73
81
  rowCount: rowCount
74
82
  })) : null, right.length > 0 ? /*#__PURE__*/React.createElement("div", {
75
- className: Classes.fixedRight
83
+ className: Classes.fixedRight,
84
+ style: fixedRightTableStyle
76
85
  }, /*#__PURE__*/React.createElement(TableHeader, {
77
86
  info: _extends(_extends({}, info), {
78
87
  flat: {
@@ -127,9 +136,6 @@ function renderTableBodyInIE(info, props, extra) {
127
136
  primaryKey: primaryKey,
128
137
  data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex)
129
138
  };
130
- var fixedRightTableStyle = {
131
- right: -extra.stickyRightOffset
132
- };
133
139
  return /*#__PURE__*/React.createElement("div", {
134
140
  className: cx(Classes.tableBody, Classes.horizontalScrollContainer)
135
141
  }, /*#__PURE__*/React.createElement("div", {
@@ -182,8 +188,7 @@ function renderTableBodyInIE(info, props, extra) {
182
188
  height: bottomBlank
183
189
  }
184
190
  })) : null, right.length > 0 ? /*#__PURE__*/React.createElement("div", {
185
- className: Classes.fixedRight,
186
- style: fixedRightTableStyle
191
+ className: Classes.fixedRight
187
192
  }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
188
193
  key: "top-blank",
189
194
  className: cx(Classes.virtualBlank, 'top'),
@@ -194,7 +199,6 @@ function renderTableBodyInIE(info, props, extra) {
194
199
  tbodyHtmlTag: "tbody"
195
200
  }, commonProps, {
196
201
  tbodyPosition: "right",
197
- stickyRightOffset: extra.stickyRightOffset,
198
202
  horizontalRenderInfo: _extends(_extends({}, info), {
199
203
  flat: {
200
204
  center: right,
@@ -243,6 +247,9 @@ function renderTableFooterInIE(info, props, extra) {
243
247
  primaryKey: primaryKey,
244
248
  verticalRenderInfo: verticalRenderInfo
245
249
  };
250
+ var fixedRightTableStyle = {
251
+ right: (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) || 0
252
+ };
246
253
  return /*#__PURE__*/React.createElement("div", {
247
254
  className: cx(Classes.tableFooter),
248
255
  style: {
@@ -255,7 +262,13 @@ function renderTableFooterInIE(info, props, extra) {
255
262
  }, commonProps, {
256
263
  tbodyPosition: hasLockColumn ? 'center' : undefined,
257
264
  horizontalRenderInfo: info
258
- }))), left.length > 0 ? /*#__PURE__*/React.createElement("div", {
265
+ })), footerDataSource.length > 0 ? /*#__PURE__*/React.createElement("div", {
266
+ className: Classes.verticalScrollPlaceholder,
267
+ style: typeof (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) === 'number' ? {
268
+ width: extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset,
269
+ visibility: 'initial'
270
+ } : undefined
271
+ }) : null), left.length > 0 ? /*#__PURE__*/React.createElement("div", {
259
272
  className: Classes.fixedLeft
260
273
  }, /*#__PURE__*/React.createElement(HtmlTable, _extends({
261
274
  tbodyHtmlTag: "tfoot"
@@ -271,7 +284,8 @@ function renderTableFooterInIE(info, props, extra) {
271
284
  visible: _sliceInstanceProperty(visible).call(visible, 0, left.length)
272
285
  })
273
286
  }))) : null, right.length > 0 ? /*#__PURE__*/React.createElement("div", {
274
- className: Classes.fixedRight
287
+ className: Classes.fixedRight,
288
+ style: fixedRightTableStyle
275
289
  }, /*#__PURE__*/React.createElement(HtmlTable, _extends({
276
290
  tbodyHtmlTag: "tfoot"
277
291
  }, commonProps, {
package/es/table/base/styles.js CHANGED
@@ -141,7 +141,7 @@ export var defaultCSSVariables = {
141
141
  export var variableConst = getCssVariableText(defaultCSSVariables);
142
142
  var notBorderedStyleMixin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
143
143
  var borderedStyleMixin = css(_templateObject3 || (_templateObject3 = _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);
144
- export var StyledArtTableWrapper = styled.div(_templateObject4 || (_templateObject4 = _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 background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n 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\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n }\n\n .", " td{\n border-bottom: 1px solid var(--primary-color) !important;\n \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: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: 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-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region IE\u517C\u5BB9\n &.ie-polyfill-wrapper {\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n 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 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 right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndToTop, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
144
+ export var StyledArtTableWrapper = styled.div(_templateObject4 || (_templateObject4 = _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 background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n 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\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n }\n\n .", " td{\n border-bottom: 1px solid var(--primary-color) !important;\n \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: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: 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-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region IE\u517C\u5BB9\n &.ie-polyfill-wrapper {\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n 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 left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n 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 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 right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndToTop, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
145
145
  export var ButtonCSS = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", "\n //#region \u6309\u94AE\n .", "{\n color: var(--color);\n background:#ffffff;\n border:1px solid var(--strong-border-color);\n border-radius: 2px;\n cursor: pointer;\n &:hover{\n color: var(--primary-color);\n border:1px solid var(--primary-color);\n }\n }\n .", " {\n color:#ffffff;\n background-color: var(--primary-color);\n border:none;\n &:hover{\n color:#ffffff;\n background-color: var(--primary-color-level2);\n border:none;\n }\n }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
146
146
 
147
147
  function getCssVariableText(obj) {
package/es/table/base/table.js CHANGED
@@ -130,7 +130,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
130
130
  bottomBlank = _info$verticalRenderR.bottomBlank,
131
131
  topBlank = _info$verticalRenderR.topBlank,
132
132
  bottomIndex = _info$verticalRenderR.bottomIndex;
133
- var stickyRightOffset = _this.hasScrollY ? _this.getScrollBarWidth() : 0;
134
133
  var renderBody = getTableRenderTemplate('body');
135
134
 
136
135
  if (typeof renderBody === 'function') {
@@ -138,8 +137,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
138
137
  rowProps: {
139
138
  onMouseEnter: _this.handleRowMouseEnter,
140
139
  onMouseLeave: _this.handleRowMouseLeave
141
- },
142
- stickyRightOffset: stickyRightOffset
140
+ }
143
141
  });
144
142
  }
145
143
 
@@ -160,7 +158,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
160
158
  getRowProps: getRowProps,
161
159
  primaryKey: primaryKey,
162
160
  data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex),
163
- stickyRightOffset: stickyRightOffset,
164
161
  horizontalRenderInfo: info,
165
162
  verticalRenderInfo: {
166
163
  first: 0,
@@ -266,9 +263,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
266
263
  var _this$lastInfo = this.lastInfo,
267
264
  leftLockTotalWidth = _this$lastInfo.leftLockTotalWidth,
268
265
  rightLockTotalWidth = _this$lastInfo.rightLockTotalWidth;
269
- var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth; // 设置子节点宽度
266
+ var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth;
267
+ var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0; // 设置子节点宽度
270
268
 
271
- stickyScrollItem.style.width = "".concat(innerTableWidth - lockTotalWidth, "px");
269
+ stickyScrollItem.style.width = "".concat(innerTableWidth - lockTotalWidth + stickyRightOffset, "px");
272
270
  }
273
271
  }, {
274
272
  key: "renderTableHeader",
@@ -277,9 +275,12 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
277
275
  stickyTop = _this$props3.stickyTop,
278
276
  hasHeader = _this$props3.hasHeader;
279
277
  var renderHeader = getTableRenderTemplate('header');
278
+ var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
280
279
 
281
280
  if (typeof renderHeader === 'function') {
282
- return renderHeader(info, this.props);
281
+ return renderHeader(info, this.props, {
282
+ stickyRightOffset: stickyRightOffset
283
+ });
283
284
  }
284
285
 
285
286
  return /*#__PURE__*/React.createElement("div", {
@@ -289,7 +290,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
289
290
  display: hasHeader ? undefined : 'none'
290
291
  }
291
292
  }, /*#__PURE__*/React.createElement(TableHeader, {
292
- info: info
293
+ info: info,
294
+ stickyRightOffset: stickyRightOffset
293
295
  }), /*#__PURE__*/React.createElement("div", {
294
296
  className: Classes.verticalScrollPlaceholder,
295
297
  style: this.hasScrollY ? {
@@ -371,6 +373,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
371
373
  getRowProps = _this$props4.getRowProps,
372
374
  primaryKey = _this$props4.primaryKey,
373
375
  stickyBottom = _this$props4.stickyBottom;
376
+ var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
374
377
  var renderFooter = getTableRenderTemplate('footer');
375
378
 
376
379
  if (typeof renderFooter === 'function') {
@@ -378,7 +381,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
378
381
  rowProps: {
379
382
  onMouseEnter: this.handleRowMouseEnter,
380
383
  onMouseLeave: this.handleRowMouseLeave
381
- }
384
+ },
385
+ stickyRightOffset: stickyRightOffset
382
386
  });
383
387
  }
384
388
 
@@ -392,6 +396,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
392
396
  data: footerDataSource,
393
397
  horizontalRenderInfo: info,
394
398
  getRowProps: getRowProps,
399
+ stickyRightOffset: stickyRightOffset,
395
400
  primaryKey: primaryKey,
396
401
  verticalRenderInfo: {
397
402
  offset: 0,
@@ -410,7 +415,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
410
415
  }, {
411
416
  key: "renderLockShadows",
412
417
  value: function renderLockShadows(info) {
413
- // console.log('render LockShadows')
418
+ var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0; // console.log('render LockShadows')
419
+
414
420
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
415
421
  className: Classes.lockShadowMask,
416
422
  style: {
@@ -423,7 +429,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
423
429
  className: Classes.lockShadowMask,
424
430
  style: {
425
431
  right: 0,
426
- width: info.rightLockTotalWidth + LOCK_SHADOW_PADDING
432
+ width: info.rightLockTotalWidth + LOCK_SHADOW_PADDING + stickyRightOffset
427
433
  }
428
434
  }, /*#__PURE__*/React.createElement("div", {
429
435
  className: cx(Classes.lockShadow, Classes.rightLockShadow)
package/lib/table/base/header.d.ts CHANGED
@@ -4,6 +4,7 @@ interface TableHeaderProps {
4
4
  info: RenderInfo;
5
5
  theaderPosition?: 'left' | 'center' | 'right';
6
6
  rowCount?: number;
7
+ stickyRightOffset?: number;
7
8
  }
8
- export default function TableHeader({ info, theaderPosition, rowCount: _rowCount }: TableHeaderProps): JSX.Element;
9
+ export default function TableHeader({ info, theaderPosition, rowCount: _rowCount, stickyRightOffset }: TableHeaderProps): JSX.Element;
9
10
  export {};
package/lib/table/base/header.js CHANGED
@@ -249,7 +249,8 @@ function TableHeader(_ref2) {
249
249
 
250
250
  var info = _ref2.info,
251
251
  theaderPosition = _ref2.theaderPosition,
252
- _rowCount = _ref2.rowCount;
252
+ _rowCount = _ref2.rowCount,
253
+ stickyRightOffset = _ref2.stickyRightOffset;
253
254
  var nested = info.nested,
254
255
  flat = (0, _flat.default)(info),
255
256
  stickyLeftMap = info.stickyLeftMap,
@@ -293,7 +294,8 @@ function TableHeader(_ref2) {
293
294
  positionStyle.left = stickyLeftMap.get(colIndex);
294
295
  } else if (colIndex >= fullFlatCount - rightFlatCount) {
295
296
  positionStyle.position = 'sticky';
296
- positionStyle.right = stickyRightMap.get(colIndex);
297
+ var stickyRightIndex = colSpan > 1 ? colIndex + colSpan - 1 : colIndex;
298
+ positionStyle.right = stickyRightMap.get(stickyRightIndex) + stickyRightOffset;
297
299
  }
298
300
 
299
301
  var justifyContent = col.align === 'right' ? 'flex-end' : col.align === 'center' ? 'center' : 'flex-start';
package/lib/table/base/html-table.js CHANGED
@@ -141,7 +141,7 @@ function HtmlTable(_ref) {
141
141
  positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
142
142
  } else if (colIndex >= fullFlatCount - rightFlatCount) {
143
143
  positionStyle.position = 'sticky';
144
- positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - (typeof stickyRightOffset === 'number' ? stickyRightOffset : 0);
144
+ positionStyle.right = hozInfo.stickyRightMap.get(colIndex) + (typeof stickyRightOffset === 'number' ? stickyRightOffset : 0);
145
145
  }
146
146
 
147
147
  return /*#__PURE__*/_react.default.createElement('td', (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
package/lib/table/base/renderTemplates.js CHANGED
@@ -50,7 +50,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
50
50
  */
51
51
  var TEMPLATES = new _map.default();
52
52
 
53
- function renderTableHeaderInIE(info, props) {
53
+ function renderTableHeaderInIE(info, props, extra) {
54
54
  var stickyTop = props.stickyTop,
55
55
  hasHeader = props.hasHeader;
56
56
  var flat = (0, _flat.default)(info),
@@ -63,6 +63,9 @@ function renderTableHeaderInIE(info, props) {
63
63
  rightNested = nested.right,
64
64
  full = nested.full;
65
65
  var rowCount = (0, _utils2.getTreeDepth)(full) + 1;
66
+ var fixedRightTableStyle = {
67
+ right: (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) || 0
68
+ };
66
69
  return /*#__PURE__*/_react.default.createElement("div", {
67
70
  className: (0, _classnames.default)(_styles.Classes.tableHeader)
68
71
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -74,6 +77,11 @@ function renderTableHeaderInIE(info, props) {
74
77
  }, /*#__PURE__*/_react.default.createElement(_header.default, {
75
78
  info: info,
76
79
  theaderPosition: hasLockColumn ? 'center' : undefined
80
+ }), /*#__PURE__*/_react.default.createElement("div", {
81
+ className: _styles.Classes.verticalScrollPlaceholder,
82
+ style: typeof (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) === 'number' ? {
83
+ width: extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset
84
+ } : undefined
77
85
  })), left.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
78
86
  className: _styles.Classes.fixedLeft
79
87
  }, /*#__PURE__*/_react.default.createElement(_header.default, {
@@ -101,7 +109,8 @@ function renderTableHeaderInIE(info, props) {
101
109
  theaderPosition: "left",
102
110
  rowCount: rowCount
103
111
  })) : null, right.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
104
- className: _styles.Classes.fixedRight
112
+ className: _styles.Classes.fixedRight,
113
+ style: fixedRightTableStyle
105
114
  }, /*#__PURE__*/_react.default.createElement(_header.default, {
106
115
  info: (0, _extends2.default)((0, _extends2.default)({}, info), {
107
116
  flat: {
@@ -154,9 +163,6 @@ function renderTableBodyInIE(info, props, extra) {
154
163
  primaryKey: primaryKey,
155
164
  data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex)
156
165
  };
157
- var fixedRightTableStyle = {
158
- right: -extra.stickyRightOffset
159
- };
160
166
  return /*#__PURE__*/_react.default.createElement("div", {
161
167
  className: (0, _classnames.default)(_styles.Classes.tableBody, _styles.Classes.horizontalScrollContainer)
162
168
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -209,8 +215,7 @@ function renderTableBodyInIE(info, props, extra) {
209
215
  height: bottomBlank
210
216
  }
211
217
  })) : null, right.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
212
- className: _styles.Classes.fixedRight,
213
- style: fixedRightTableStyle
218
+ className: _styles.Classes.fixedRight
214
219
  }, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
215
220
  key: "top-blank",
216
221
  className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'top'),
@@ -221,7 +226,6 @@ function renderTableBodyInIE(info, props, extra) {
221
226
  tbodyHtmlTag: "tbody"
222
227
  }, commonProps, {
223
228
  tbodyPosition: "right",
224
- stickyRightOffset: extra.stickyRightOffset,
225
229
  horizontalRenderInfo: (0, _extends2.default)((0, _extends2.default)({}, info), {
226
230
  flat: {
227
231
  center: right,
@@ -269,6 +273,9 @@ function renderTableFooterInIE(info, props, extra) {
269
273
  primaryKey: primaryKey,
270
274
  verticalRenderInfo: verticalRenderInfo
271
275
  };
276
+ var fixedRightTableStyle = {
277
+ right: (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) || 0
278
+ };
272
279
  return /*#__PURE__*/_react.default.createElement("div", {
273
280
  className: (0, _classnames.default)(_styles.Classes.tableFooter),
274
281
  style: {
@@ -281,7 +288,13 @@ function renderTableFooterInIE(info, props, extra) {
281
288
  }, commonProps, {
282
289
  tbodyPosition: hasLockColumn ? 'center' : undefined,
283
290
  horizontalRenderInfo: info
284
- }))), left.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
291
+ })), footerDataSource.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
292
+ className: _styles.Classes.verticalScrollPlaceholder,
293
+ style: typeof (extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset) === 'number' ? {
294
+ width: extra === null || extra === void 0 ? void 0 : extra.stickyRightOffset,
295
+ visibility: 'initial'
296
+ } : undefined
297
+ }) : null), left.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
285
298
  className: _styles.Classes.fixedLeft
286
299
  }, /*#__PURE__*/_react.default.createElement(_htmlTable.HtmlTable, (0, _extends2.default)({
287
300
  tbodyHtmlTag: "tfoot"
@@ -297,7 +310,8 @@ function renderTableFooterInIE(info, props, extra) {
297
310
  visible: (0, _slice.default)(visible).call(visible, 0, left.length)
298
311
  })
299
312
  }))) : null, right.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
300
- className: _styles.Classes.fixedRight
313
+ className: _styles.Classes.fixedRight,
314
+ style: fixedRightTableStyle
301
315
  }, /*#__PURE__*/_react.default.createElement(_htmlTable.HtmlTable, (0, _extends2.default)({
302
316
  tbodyHtmlTag: "tfoot"
303
317
  }, commonProps, {
package/lib/table/base/styles.js CHANGED
@@ -169,7 +169,7 @@ exports.variableConst = variableConst;
169
169
  var notBorderedStyleMixin = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
170
170
  var borderedStyleMixin = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (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);
171
171
 
172
- var StyledArtTableWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (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 background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n 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\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n }\n\n .", " td{\n border-bottom: 1px solid var(--primary-color) !important;\n \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: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: 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-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region IE\u517C\u5BB9\n &.ie-polyfill-wrapper {\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n 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 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 right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndToTop, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
172
+ var StyledArtTableWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (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 background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n 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\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n }\n\n .", " td{\n border-bottom: 1px solid var(--primary-color) !important;\n \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: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: 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-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region IE\u517C\u5BB9\n &.ie-polyfill-wrapper {\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n 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 left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n 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 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 right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndToTop, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
173
173
 
174
174
  exports.StyledArtTableWrapper = StyledArtTableWrapper;
175
175
  var ButtonCSS = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n //#region \u6309\u94AE\n .", "{\n color: var(--color);\n background:#ffffff;\n border:1px solid var(--strong-border-color);\n border-radius: 2px;\n cursor: pointer;\n &:hover{\n color: var(--primary-color);\n border:1px solid var(--primary-color);\n }\n }\n .", " {\n color:#ffffff;\n background-color: var(--primary-color);\n border:none;\n &:hover{\n color:#ffffff;\n background-color: var(--primary-color-level2);\n border:none;\n }\n }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
package/lib/table/base/table.js CHANGED
@@ -180,7 +180,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
180
180
  bottomBlank = _info$verticalRenderR.bottomBlank,
181
181
  topBlank = _info$verticalRenderR.topBlank,
182
182
  bottomIndex = _info$verticalRenderR.bottomIndex;
183
- var stickyRightOffset = _this.hasScrollY ? _this.getScrollBarWidth() : 0;
184
183
  var renderBody = (0, _renderTemplates.default)('body');
185
184
 
186
185
  if (typeof renderBody === 'function') {
@@ -188,8 +187,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
188
187
  rowProps: {
189
188
  onMouseEnter: _this.handleRowMouseEnter,
190
189
  onMouseLeave: _this.handleRowMouseLeave
191
- },
192
- stickyRightOffset: stickyRightOffset
190
+ }
193
191
  });
194
192
  }
195
193
 
@@ -210,7 +208,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
210
208
  getRowProps: getRowProps,
211
209
  primaryKey: primaryKey,
212
210
  data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex),
213
- stickyRightOffset: stickyRightOffset,
214
211
  horizontalRenderInfo: info,
215
212
  verticalRenderInfo: {
216
213
  first: 0,
@@ -317,9 +314,10 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
317
314
  var _this$lastInfo = this.lastInfo,
318
315
  leftLockTotalWidth = _this$lastInfo.leftLockTotalWidth,
319
316
  rightLockTotalWidth = _this$lastInfo.rightLockTotalWidth;
320
- var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth; // 设置子节点宽度
317
+ var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth;
318
+ var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0; // 设置子节点宽度
321
319
 
322
- stickyScrollItem.style.width = "".concat(innerTableWidth - lockTotalWidth, "px");
320
+ stickyScrollItem.style.width = "".concat(innerTableWidth - lockTotalWidth + stickyRightOffset, "px");
323
321
  }
324
322
  }, {
325
323
  key: "renderTableHeader",
@@ -328,9 +326,12 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
328
326
  stickyTop = _this$props3.stickyTop,
329
327
  hasHeader = _this$props3.hasHeader;
330
328
  var renderHeader = (0, _renderTemplates.default)('header');
329
+ var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
331
330
 
332
331
  if (typeof renderHeader === 'function') {
333
- return renderHeader(info, this.props);
332
+ return renderHeader(info, this.props, {
333
+ stickyRightOffset: stickyRightOffset
334
+ });
334
335
  }
335
336
 
336
337
  return /*#__PURE__*/_react.default.createElement("div", {
@@ -340,7 +341,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
340
341
  display: hasHeader ? undefined : 'none'
341
342
  }
342
343
  }, /*#__PURE__*/_react.default.createElement(_header.default, {
343
- info: info
344
+ info: info,
345
+ stickyRightOffset: stickyRightOffset
344
346
  }), /*#__PURE__*/_react.default.createElement("div", {
345
347
  className: _styles.Classes.verticalScrollPlaceholder,
346
348
  style: this.hasScrollY ? {
@@ -420,6 +422,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
420
422
  getRowProps = _this$props4.getRowProps,
421
423
  primaryKey = _this$props4.primaryKey,
422
424
  stickyBottom = _this$props4.stickyBottom;
425
+ var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
423
426
  var renderFooter = (0, _renderTemplates.default)('footer');
424
427
 
425
428
  if (typeof renderFooter === 'function') {
@@ -427,7 +430,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
427
430
  rowProps: {
428
431
  onMouseEnter: this.handleRowMouseEnter,
429
432
  onMouseLeave: this.handleRowMouseLeave
430
- }
433
+ },
434
+ stickyRightOffset: stickyRightOffset
431
435
  });
432
436
  }
433
437
 
@@ -441,6 +445,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
441
445
  data: footerDataSource,
442
446
  horizontalRenderInfo: info,
443
447
  getRowProps: getRowProps,
448
+ stickyRightOffset: stickyRightOffset,
444
449
  primaryKey: primaryKey,
445
450
  verticalRenderInfo: {
446
451
  offset: 0,
@@ -459,7 +464,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
459
464
  }, {
460
465
  key: "renderLockShadows",
461
466
  value: function renderLockShadows(info) {
462
- // console.log('render LockShadows')
467
+ var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0; // console.log('render LockShadows')
468
+
463
469
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
464
470
  className: _styles.Classes.lockShadowMask,
465
471
  style: {
@@ -472,7 +478,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
472
478
  className: _styles.Classes.lockShadowMask,
473
479
  style: {
474
480
  right: 0,
475
- width: info.rightLockTotalWidth + _styles.LOCK_SHADOW_PADDING
481
+ width: info.rightLockTotalWidth + _styles.LOCK_SHADOW_PADDING + stickyRightOffset
476
482
  }
477
483
  }, /*#__PURE__*/_react.default.createElement("div", {
478
484
  className: (0, _classnames.default)(_styles.Classes.lockShadow, _styles.Classes.rightLockShadow)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kdcloudjs/table",
3
- "version": "1.2.0-canary.17",
3
+ "version": "1.2.0-canary.18",
4
4
  "description": "金蝶 react table 组件",
5
5
  "title": "table",
6
6
  "keywords": [