@hi-ui/table 5.0.0-canary.13 → 5.0.0-canary.15

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 (12) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/lib/cjs/BaseTable.js +20 -13
  3. package/lib/cjs/TbodyContent.js +33 -2
  4. package/lib/cjs/hooks/use-col-width.js +8 -9
  5. package/lib/cjs/styles/index.scss.js +1 -1
  6. package/lib/esm/BaseTable.js +20 -13
  7. package/lib/esm/TbodyContent.js +36 -5
  8. package/lib/esm/hooks/use-col-width.js +8 -9
  9. package/lib/esm/styles/index.scss.js +1 -1
  10. package/lib/types/BaseTable.d.ts +8 -1
  11. package/lib/types/context.d.ts +15 -7
  12. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @hi-ui/table
2
2
 
3
+ ## 5.0.0-canary.15
4
+
5
+ ### Patch Changes
6
+
7
+ - 6e274310f: fix(table): 优化列宽设置逻辑，确保在列变化时准确计算并更新列宽 (#3327)
8
+ - df353062b: fix(table): 修复设置 scrollbar 后冻结列失效问题 (#3329)
9
+ - Updated dependencies [75a3d93a9]
10
+ - @hi-ui/drawer@5.0.0-canary.6
11
+
12
+ ## 5.0.0-canary.14
13
+
14
+ ### Minor Changes
15
+
16
+ - 6316a318e: feat(table): 添加 fixedToRow 功能，支持设置行固定到顶部或底部 (#3304)
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies [4dc72a186]
21
+ - @hi-ui/popper@5.0.0-canary.7
22
+
3
23
  ## 5.0.0-canary.13
4
24
 
5
25
  ### Patch Changes
package/lib/cjs/BaseTable.js CHANGED
@@ -76,7 +76,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
76
76
  virtual = _a.virtual,
77
77
  needDoubleTable = _a.needDoubleTable,
78
78
  onResizeStop = _a.onResizeStop,
79
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual", "needDoubleTable", "onResizeStop"]);
79
+ fixedToRow = _a.fixedToRow,
80
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual", "needDoubleTable", "onResizeStop", "fixedToRow"]);
80
81
  // ********************** 内嵌式面板 *********************** //
81
82
  var _useEmbedExpand = useEmbedExpand.useEmbedExpand({
82
83
  defaultExpandedEmbedRowKeys: defaultExpandedEmbedRowKeys,
@@ -217,22 +218,27 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
217
218
  var extraFooter = extra && extra.footer;
218
219
  var alwaysFixedColumn = fixedColumnTrigger === 'always';
219
220
  var renderTable = function renderTable() {
220
- var singleTableContent = /*#__PURE__*/React__default["default"].createElement("div", {
221
- ref: scrollBodyElementRef,
222
- className: prefixCls + "-content",
223
- onScroll: onTableBodyScroll,
224
- style: {
225
- // 表格宽度大于div宽度才出现横向滚动条
226
- overflowX: canScroll ? 'scroll' : undefined
227
- }
228
- }, /*#__PURE__*/React__default["default"].createElement("table", {
221
+ var tableContent = /*#__PURE__*/React__default["default"].createElement("table", {
229
222
  ref: bodyTableRef,
230
223
  style: {
231
224
  width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
232
225
  }
233
226
  }, /*#__PURE__*/React__default["default"].createElement(ColGroupContent.ColGroupContent, null), /*#__PURE__*/React__default["default"].createElement(TheadContent.TheadContent, null), /*#__PURE__*/React__default["default"].createElement(TbodyContent.TbodyContent, {
234
227
  emptyContent: emptyContent
235
- })));
228
+ }));
229
+ var singleTableContent = /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
230
+ className: prefixCls + "-content"
231
+ }, !scrollbar ? {
232
+ ref: scrollBodyElementRef,
233
+ onScroll: onTableBodyScroll,
234
+ style: {
235
+ // 表格宽度大于div宽度才出现横向滚动条
236
+ overflowX: canScroll ? 'scroll' : undefined
237
+ }
238
+ } : {}), !scrollbar ? tableContent : ( /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], Object.assign({
239
+ ref: scrollBodyElementRef,
240
+ onScroll: onTableBodyScroll
241
+ }, typeAssertion.isObject(scrollbar) ? scrollbar : null), tableContent)));
236
242
  var _a = getTableHeaderProps(),
237
243
  style = _a.style,
238
244
  restTableHeaderProps = tslib.__rest(_a, ["style"]);
@@ -251,7 +257,7 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
251
257
  }, extraHeader)) : null), /*#__PURE__*/React__default["default"].createElement(TableBody.TableBody, {
252
258
  emptyContent: emptyContent
253
259
  }));
254
- return needDoubleTable ? doubleTableContent : !scrollbar ? singleTableContent : ( /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], Object.assign({}, typeAssertion.isObject(scrollbar) ? scrollbar : null), singleTableContent));
260
+ return needDoubleTable ? doubleTableContent : singleTableContent;
255
261
  };
256
262
  var renderFreezeShadow = function renderFreezeShadow() {
257
263
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? ( /*#__PURE__*/React__default["default"].createElement("div", {
@@ -295,7 +301,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
295
301
  sumRow: sumRow,
296
302
  hasSumColumn: hasSumColumn,
297
303
  virtual: virtual,
298
- onResizeStop: onResizeStop
304
+ onResizeStop: onResizeStop,
305
+ fixedToRow: fixedToRow
299
306
  })
300
307
  }, renderTable()), renderFreezeShadow()), tableFooter);
301
308
  });
package/lib/cjs/TbodyContent.js CHANGED
@@ -28,6 +28,7 @@ function _interopDefaultCompat(e) {
28
28
  }
29
29
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
30
30
  var _prefix = classname.getPrefixCls('table-body');
31
+ var _prefixRow = classname.getPrefixCls('table-row');
31
32
  var TbodyContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
32
33
  var _ref$prefixCls = _ref.prefixCls,
33
34
  prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
@@ -42,7 +43,8 @@ var TbodyContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
42
43
  hasSumColumn = _useTableContext.hasSumColumn,
43
44
  sumRow = _useTableContext.sumRow,
44
45
  measureRowElementRef = _useTableContext.measureRowElementRef,
45
- rowClassName = _useTableContext.rowClassName;
46
+ rowClassName = _useTableContext.rowClassName,
47
+ fixedToRow = _useTableContext.fixedToRow;
46
48
  var getRequiredProps = useLatest.useLatestCallback(function (id) {
47
49
  return {
48
50
  // @ts-ignore
@@ -54,13 +56,42 @@ var TbodyContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
54
56
  // focused: focusedId === id,
55
57
  };
56
58
  });
59
+
60
+ var fixedToRowTopClassName = React.useCallback(function (row, index) {
61
+ var classNames = [];
62
+ if (!typeAssertion.isNullish(fixedToRow) && !typeAssertion.isNullish(fixedToRow.top)) {
63
+ if (typeof fixedToRow.top === 'function') {
64
+ if (fixedToRow.top(row, index)) {
65
+ classNames.push(_prefixRow + "--fixed-top");
66
+ }
67
+ }
68
+ if (typeof fixedToRow.top === 'number') {
69
+ if (index === fixedToRow.top) {
70
+ classNames.push(_prefixRow + "--fixed-top");
71
+ }
72
+ }
73
+ }
74
+ if (!typeAssertion.isNullish(fixedToRow) && !typeAssertion.isNullish(fixedToRow.bottom)) {
75
+ if (typeof fixedToRow.bottom === 'function') {
76
+ if (fixedToRow.bottom(row, index)) {
77
+ classNames.push(_prefixRow + "--fixed-bottom");
78
+ }
79
+ }
80
+ if (typeof fixedToRow.bottom === 'number') {
81
+ if (index === fixedToRow.bottom) {
82
+ classNames.push(_prefixRow + "--fixed-bottom");
83
+ }
84
+ }
85
+ }
86
+ return classNames;
87
+ }, [fixedToRow]);
57
88
  // 外层增加 div 作为滚动容器
58
89
  return /*#__PURE__*/React__default["default"].createElement("tbody", null, typeAssertion.isArrayNonEmpty(transitionData) ? ( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, transitionData.map(function (row, index) {
59
90
  return /*#__PURE__*/React__default["default"].createElement(TableRow.TableRow, Object.assign({
60
91
  ref: index === 0 ? measureRowElementRef : null,
61
92
  // key={depth + index}
62
93
  key: row.id,
63
- className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index),
94
+ className: classname.cx.apply(void 0, [rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index)].concat(fixedToRowTopClassName(row, index))),
64
95
  // @ts-ignore
65
96
  rowIndex: index,
66
97
  rowData: row
package/lib/cjs/hooks/use-col-width.js CHANGED
@@ -35,6 +35,9 @@ var useColWidth = function useColWidth(_ref) {
35
35
  }),
36
36
  colWidths = _React$useState[0],
37
37
  setColWidths = _React$useState[1];
38
+ /**
39
+ * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
40
+ */
38
41
  var getWidths = React.useCallback(function (measureRowElement) {
39
42
  if (measureRowElement && measureRowElement.childNodes) {
40
43
  // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
@@ -105,16 +108,12 @@ var useColWidth = function useColWidth(_ref) {
105
108
  }
106
109
  }, [getVirtualWidths, virtual]);
107
110
  useUpdateEffect.useUpdateEffect(function () {
111
+ // 当列变化时，重新设置列宽
108
112
  setColWidths(index.getGroupItemWidth(columns).colWidths);
109
- // setColWidths((prev) => {
110
- // // resizable 模式下通过 measureRowElementRef.current 去更新列宽，防止拖拽后宽度被重置
111
- // // 例如同时设置了 resizable 和 rowSelection，当拖拽某列宽度后再选中某行时，该列宽度会被重置
112
- // return resizable && measureRowElementRef.current?.childNodes.length === prev.length
113
- // ? // 走更新逻辑
114
- // getWidths(measureRowElementRef.current)
115
- // : // 当列数变化时重新走初始化逻辑
116
- // getGroupItemWidth(columns)
117
- // })
113
+ // 重新设置列宽后，真实的宽度会发生变化，基于真实的宽度再次重新计算出合适的列宽
114
+ requestAnimationFrame(function () {
115
+ setColWidths(getWidths(measureRowElementRef.current));
116
+ });
118
117
  }, [columns]);
119
118
  /**
120
119
  * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v5-table table {width: 100%;text-align: left;background-color: var(--hi-v5-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {border-left: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);border-right: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {border-left: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-row:last-child .hi-v5-table-cell {border-bottom: none;}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {border-left: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-virtual-row:last-child .hi-v5-table-row .hi-v5-table-cell {border-bottom: none;}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header__resizable:hover .hi-v5-table-header__resizable-handle {border-left-color: var(--hi-v5-color-gray-200, #e6e8eb);border-right-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;margin-right: -2px;border-left: 2px solid transparent;border-right: 2px solid transparent;cursor: col-resize;z-index: 1;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-left-color: var(--hi-v5-color-gray-200, #e6e8eb);border-right-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-500, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1d1e26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {border-top: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {border-bottom: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: 14px;height: 100%;margin-right: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {margin-right: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-500, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {margin-left: 4px;}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-4, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {margin-top: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v5-color-gray-700, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v5-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v5-color-gray-500, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-50, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-500, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-setting-item {position: relative;padding-top: var(--hi-v5-spacing-1, 2px);padding-bottom: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));left: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v5-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v5-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v5-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty th:first-child {border-left: none !important;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;padding-top: var(--hi-v5-spacing-1, 2px);padding-bottom: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));left: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v5-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v5-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v5-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
15
+ var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v5-table table {width: 100%;text-align: left;background-color: var(--hi-v5-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {border-left: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);border-right: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {border-left: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-row:last-child .hi-v5-table-cell {border-bottom: none;}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {border-left: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-virtual-row:last-child .hi-v5-table-row .hi-v5-table-cell {border-bottom: none;}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header__resizable:hover .hi-v5-table-header__resizable-handle {border-left-color: var(--hi-v5-color-gray-200, #e6e8eb);border-right-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;margin-right: -2px;border-left: 2px solid transparent;border-right: 2px solid transparent;cursor: col-resize;z-index: 1;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-left-color: var(--hi-v5-color-gray-200, #e6e8eb);border-right-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-500, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-row--fixed-top, .hi-v5-table-row--fixed-bottom {position: sticky;z-index: 6;}.hi-v5-table-row--fixed-top {top: 0;}.hi-v5-table-row--fixed-bottom {bottom: 0;}.hi-v5-table-row--fixed-bottom .hi-v5-table-cell {border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-table-row:has(+ .hi-v5-table-row--fixed-bottom) .hi-v5-table-cell {border-bottom: none;}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1d1e26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {border-top: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {border-bottom: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: 14px;height: 100%;margin-right: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {margin-right: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-500, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {margin-left: 4px;}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-4, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {margin-top: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v5-color-gray-700, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v5-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v5-color-gray-500, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-50, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-500, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-setting-item {position: relative;padding-top: var(--hi-v5-spacing-1, 2px);padding-bottom: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));left: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v5-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v5-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v5-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty th:first-child {border-left: none !important;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;padding-top: var(--hi-v5-spacing-1, 2px);padding-bottom: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));left: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v5-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v5-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v5-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/esm/BaseTable.js CHANGED
@@ -63,7 +63,8 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
63
63
  virtual = _a.virtual,
64
64
  needDoubleTable = _a.needDoubleTable,
65
65
  onResizeStop = _a.onResizeStop,
66
- rest = __rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual", "needDoubleTable", "onResizeStop"]);
66
+ fixedToRow = _a.fixedToRow,
67
+ rest = __rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual", "needDoubleTable", "onResizeStop", "fixedToRow"]);
67
68
  // ********************** 内嵌式面板 *********************** //
68
69
  var _useEmbedExpand = useEmbedExpand({
69
70
  defaultExpandedEmbedRowKeys: defaultExpandedEmbedRowKeys,
@@ -204,22 +205,27 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
204
205
  var extraFooter = extra && extra.footer;
205
206
  var alwaysFixedColumn = fixedColumnTrigger === 'always';
206
207
  var renderTable = function renderTable() {
207
- var singleTableContent = /*#__PURE__*/React__default.createElement("div", {
208
- ref: scrollBodyElementRef,
209
- className: prefixCls + "-content",
210
- onScroll: onTableBodyScroll,
211
- style: {
212
- // 表格宽度大于div宽度才出现横向滚动条
213
- overflowX: canScroll ? 'scroll' : undefined
214
- }
215
- }, /*#__PURE__*/React__default.createElement("table", {
208
+ var tableContent = /*#__PURE__*/React__default.createElement("table", {
216
209
  ref: bodyTableRef,
217
210
  style: {
218
211
  width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
219
212
  }
220
213
  }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TheadContent, null), /*#__PURE__*/React__default.createElement(TbodyContent, {
221
214
  emptyContent: emptyContent
222
- })));
215
+ }));
216
+ var singleTableContent = /*#__PURE__*/React__default.createElement("div", Object.assign({
217
+ className: prefixCls + "-content"
218
+ }, !scrollbar ? {
219
+ ref: scrollBodyElementRef,
220
+ onScroll: onTableBodyScroll,
221
+ style: {
222
+ // 表格宽度大于div宽度才出现横向滚动条
223
+ overflowX: canScroll ? 'scroll' : undefined
224
+ }
225
+ } : {}), !scrollbar ? tableContent : ( /*#__PURE__*/React__default.createElement(Scrollbar, Object.assign({
226
+ ref: scrollBodyElementRef,
227
+ onScroll: onTableBodyScroll
228
+ }, isObject(scrollbar) ? scrollbar : null), tableContent)));
223
229
  var _a = getTableHeaderProps(),
224
230
  style = _a.style,
225
231
  restTableHeaderProps = __rest(_a, ["style"]);
@@ -238,7 +244,7 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
238
244
  }, extraHeader)) : null), /*#__PURE__*/React__default.createElement(TableBody, {
239
245
  emptyContent: emptyContent
240
246
  }));
241
- return needDoubleTable ? doubleTableContent : !scrollbar ? singleTableContent : ( /*#__PURE__*/React__default.createElement(Scrollbar, Object.assign({}, isObject(scrollbar) ? scrollbar : null), singleTableContent));
247
+ return needDoubleTable ? doubleTableContent : singleTableContent;
242
248
  };
243
249
  var renderFreezeShadow = function renderFreezeShadow() {
244
250
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? ( /*#__PURE__*/React__default.createElement("div", {
@@ -282,7 +288,8 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
282
288
  sumRow: sumRow,
283
289
  hasSumColumn: hasSumColumn,
284
290
  virtual: virtual,
285
- onResizeStop: onResizeStop
291
+ onResizeStop: onResizeStop,
292
+ fixedToRow: fixedToRow
286
293
  })
287
294
  }, renderTable()), renderFreezeShadow()), tableFooter);
288
295
  });
package/lib/esm/TbodyContent.js CHANGED
@@ -7,15 +7,16 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import React__default, { forwardRef } from 'react';
11
- import { getPrefixCls } from '@hi-ui/classname';
10
+ import React__default, { forwardRef, useCallback } from 'react';
11
+ import { getPrefixCls, cx } from '@hi-ui/classname';
12
12
  import { __DEV__ } from '@hi-ui/env';
13
13
  import { useLatestCallback } from '@hi-ui/use-latest';
14
- import { isArrayNonEmpty } from '@hi-ui/type-assertion';
14
+ import { isNullish, isArrayNonEmpty } from '@hi-ui/type-assertion';
15
15
  import { EmptyState } from '@hi-ui/empty-state';
16
16
  import { TableRow } from './TableRow.js';
17
17
  import { useTableContext } from './context.js';
18
18
  var _prefix = getPrefixCls('table-body');
19
+ var _prefixRow = getPrefixCls('table-row');
19
20
  var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
20
21
  var _ref$prefixCls = _ref.prefixCls,
21
22
  prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
@@ -30,7 +31,8 @@ var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
30
31
  hasSumColumn = _useTableContext.hasSumColumn,
31
32
  sumRow = _useTableContext.sumRow,
32
33
  measureRowElementRef = _useTableContext.measureRowElementRef,
33
- rowClassName = _useTableContext.rowClassName;
34
+ rowClassName = _useTableContext.rowClassName,
35
+ fixedToRow = _useTableContext.fixedToRow;
34
36
  var getRequiredProps = useLatestCallback(function (id) {
35
37
  return {
36
38
  // @ts-ignore
@@ -42,13 +44,42 @@ var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
42
44
  // focused: focusedId === id,
43
45
  };
44
46
  });
47
+
48
+ var fixedToRowTopClassName = useCallback(function (row, index) {
49
+ var classNames = [];
50
+ if (!isNullish(fixedToRow) && !isNullish(fixedToRow.top)) {
51
+ if (typeof fixedToRow.top === 'function') {
52
+ if (fixedToRow.top(row, index)) {
53
+ classNames.push(_prefixRow + "--fixed-top");
54
+ }
55
+ }
56
+ if (typeof fixedToRow.top === 'number') {
57
+ if (index === fixedToRow.top) {
58
+ classNames.push(_prefixRow + "--fixed-top");
59
+ }
60
+ }
61
+ }
62
+ if (!isNullish(fixedToRow) && !isNullish(fixedToRow.bottom)) {
63
+ if (typeof fixedToRow.bottom === 'function') {
64
+ if (fixedToRow.bottom(row, index)) {
65
+ classNames.push(_prefixRow + "--fixed-bottom");
66
+ }
67
+ }
68
+ if (typeof fixedToRow.bottom === 'number') {
69
+ if (index === fixedToRow.bottom) {
70
+ classNames.push(_prefixRow + "--fixed-bottom");
71
+ }
72
+ }
73
+ }
74
+ return classNames;
75
+ }, [fixedToRow]);
45
76
  // 外层增加 div 作为滚动容器
46
77
  return /*#__PURE__*/React__default.createElement("tbody", null, isArrayNonEmpty(transitionData) ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, transitionData.map(function (row, index) {
47
78
  return /*#__PURE__*/React__default.createElement(TableRow, Object.assign({
48
79
  ref: index === 0 ? measureRowElementRef : null,
49
80
  // key={depth + index}
50
81
  key: row.id,
51
- className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index),
82
+ className: cx.apply(void 0, [rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index)].concat(fixedToRowTopClassName(row, index))),
52
83
  // @ts-ignore
53
84
  rowIndex: index,
54
85
  rowData: row
package/lib/esm/hooks/use-col-width.js CHANGED
@@ -23,6 +23,9 @@ var useColWidth = function useColWidth(_ref) {
23
23
  }),
24
24
  colWidths = _React$useState[0],
25
25
  setColWidths = _React$useState[1];
26
+ /**
27
+ * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
28
+ */
26
29
  var getWidths = useCallback(function (measureRowElement) {
27
30
  if (measureRowElement && measureRowElement.childNodes) {
28
31
  // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
@@ -93,16 +96,12 @@ var useColWidth = function useColWidth(_ref) {
93
96
  }
94
97
  }, [getVirtualWidths, virtual]);
95
98
  useUpdateEffect(function () {
99
+ // 当列变化时，重新设置列宽
96
100
  setColWidths(getGroupItemWidth(columns).colWidths);
97
- // setColWidths((prev) => {
98
- // // resizable 模式下通过 measureRowElementRef.current 去更新列宽，防止拖拽后宽度被重置
99
- // // 例如同时设置了 resizable 和 rowSelection，当拖拽某列宽度后再选中某行时，该列宽度会被重置
100
- // return resizable && measureRowElementRef.current?.childNodes.length === prev.length
101
- // ? // 走更新逻辑
102
- // getWidths(measureRowElementRef.current)
103
- // : // 当列数变化时重新走初始化逻辑
104
- // getGroupItemWidth(columns)
105
- // })
101
+ // 重新设置列宽后，真实的宽度会发生变化，基于真实的宽度再次重新计算出合适的列宽
102
+ requestAnimationFrame(function () {
103
+ setColWidths(getWidths(measureRowElementRef.current));
104
+ });
106
105
  }, [columns]);
107
106
  /**
108
107
  * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,6 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from '@hi-ui/style-inject';
11
- var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v5-table table {width: 100%;text-align: left;background-color: var(--hi-v5-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {border-left: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);border-right: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {border-left: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-row:last-child .hi-v5-table-cell {border-bottom: none;}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {border-left: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-virtual-row:last-child .hi-v5-table-row .hi-v5-table-cell {border-bottom: none;}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header__resizable:hover .hi-v5-table-header__resizable-handle {border-left-color: var(--hi-v5-color-gray-200, #e6e8eb);border-right-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;margin-right: -2px;border-left: 2px solid transparent;border-right: 2px solid transparent;cursor: col-resize;z-index: 1;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-left-color: var(--hi-v5-color-gray-200, #e6e8eb);border-right-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-500, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1d1e26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {border-top: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {border-bottom: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: 14px;height: 100%;margin-right: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {margin-right: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-500, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {margin-left: 4px;}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-4, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {margin-top: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v5-color-gray-700, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v5-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v5-color-gray-500, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-50, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-500, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-setting-item {position: relative;padding-top: var(--hi-v5-spacing-1, 2px);padding-bottom: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));left: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v5-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v5-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v5-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty th:first-child {border-left: none !important;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;padding-top: var(--hi-v5-spacing-1, 2px);padding-bottom: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));left: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v5-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v5-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v5-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
11
+ var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v5-table table {width: 100%;text-align: left;background-color: var(--hi-v5-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {border-left: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);border-right: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {border-left: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-row:last-child .hi-v5-table-cell {border-bottom: none;}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {border-left: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-virtual-row:last-child .hi-v5-table-row .hi-v5-table-cell {border-bottom: none;}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header__resizable:hover .hi-v5-table-header__resizable-handle {border-left-color: var(--hi-v5-color-gray-200, #e6e8eb);border-right-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;margin-right: -2px;border-left: 2px solid transparent;border-right: 2px solid transparent;cursor: col-resize;z-index: 1;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-left-color: var(--hi-v5-color-gray-200, #e6e8eb);border-right-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-500, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-row--fixed-top, .hi-v5-table-row--fixed-bottom {position: sticky;z-index: 6;}.hi-v5-table-row--fixed-top {top: 0;}.hi-v5-table-row--fixed-bottom {bottom: 0;}.hi-v5-table-row--fixed-bottom .hi-v5-table-cell {border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-table-row:has(+ .hi-v5-table-row--fixed-bottom) .hi-v5-table-cell {border-bottom: none;}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1d1e26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {border-top: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {border-bottom: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: 14px;height: 100%;margin-right: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {margin-right: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-500, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {margin-left: 4px;}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-4, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {margin-top: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v5-color-gray-700, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v5-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v5-color-gray-500, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-50, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-500, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-setting-item {position: relative;padding-top: var(--hi-v5-spacing-1, 2px);padding-bottom: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));left: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v5-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v5-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v5-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty th:first-child {border-left: none !important;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;padding-top: var(--hi-v5-spacing-1, 2px);padding-bottom: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));left: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v5-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v5-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v5-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
package/lib/types/BaseTable.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
3
- import { TableExtra, TableColumnItem, TableOnRowReturn } from './types';
3
+ import { TableExtra, TableColumnItem, TableOnRowReturn, TableRowEventData } from './types';
4
4
  import { UseTableProps } from './use-table';
5
5
  import { UseEmbedExpandProps } from './hooks/use-embed-expand';
6
6
  import { ResizeCallbackData } from 'react-resizable';
@@ -53,4 +53,11 @@ export interface BaseTableProps extends Omit<HiBaseHTMLProps<'div'>, 'onDrop' |
53
53
  * resizable 模式下，列宽变化后触发的回调
54
54
  */
55
55
  onResizeStop?: (evt: React.SyntheticEvent, size: ResizeCallbackData['size'], index: number, columnsWidth: number[]) => void;
56
+ /**
57
+ * 固定行，只有设置 maxHeight 时才生效
58
+ */
59
+ fixedToRow?: {
60
+ top?: number | ((rowData: TableRowEventData, index: number) => boolean);
61
+ bottom?: number | ((rowData: TableRowEventData, index: number) => boolean);
62
+ };
56
63
  }
package/lib/types/context.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { SyntheticEvent } from 'react';
2
- import { TableOnRowReturn } from './types';
2
+ import { TableOnRowReturn, TableRowEventData } from './types';
3
3
  import { ResizeCallbackData } from 'react-resizable';
4
4
  export declare const TableProvider: import("react").Provider<(Omit<{
5
5
  getColgroupProps: (column: import("./types").FlattedTableColumnItemData, index: number) => {
@@ -32,10 +32,10 @@ export declare const TableProvider: import("react").Provider<(Omit<{
32
32
  }) => void) | undefined;
33
33
  onDrop: (evt: any, sourceId: any, targetId: any, dragDirection: any) => void;
34
34
  groupedColumns: import("./types").FlattedTableColumnItemData[][];
35
- onExpandTreeRowsChange: (expandedNode: import("./types").TableRowEventData, shouldExpanded: boolean) => void;
35
+ onExpandTreeRowsChange: (expandedNode: TableRowEventData, shouldExpanded: boolean) => void;
36
36
  isExpandTreeRows: (id: import("react").ReactText) => boolean;
37
37
  isLoadingTreeNodeId: (id: import("react").ReactText) => boolean;
38
- onTreeNodeSwitch: (node: import("./types").TableRowEventData, onlyExpand?: any) => Promise<void>;
38
+ onTreeNodeSwitch: (node: TableRowEventData, onlyExpand?: any) => Promise<void>;
39
39
  resizable: boolean;
40
40
  colWidths: number[];
41
41
  onColumnResizable: (evt: any, { size }: any, index: number) => void;
@@ -43,7 +43,7 @@ export declare const TableProvider: import("react").Provider<(Omit<{
43
43
  cellRender: ((text: any) => import("react").ReactNode) | undefined;
44
44
  footerRender: ((...nodes: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[]) => import("react").ReactNode) | undefined;
45
45
  showColMenu: boolean | undefined;
46
- onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
46
+ onLoadChildren: ((item: TableRowEventData) => void | Promise<void | any[]>) | undefined;
47
47
  setHeaderTableElement: import("react").Dispatch<import("react").SetStateAction<HTMLTableRowElement | null>>;
48
48
  scrollbar: boolean | import("packages/ui/scrollbar/lib/types").ScrollbarProps | undefined;
49
49
  rowClassName: ((record: Record<string, any>, index: number) => string) | undefined;
@@ -129,6 +129,10 @@ export declare const TableProvider: import("react").Provider<(Omit<{
129
129
  } | undefined) => void) | undefined;
130
130
  } | undefined;
131
131
  onResizeStop?: ((evt: SyntheticEvent, size: ResizeCallbackData['size'], index: number, columnsWidth: number[]) => void) | undefined;
132
+ fixedToRow?: {
133
+ top?: number | ((rowData: TableRowEventData, index: number) => boolean) | undefined;
134
+ bottom?: number | ((rowData: TableRowEventData, index: number) => boolean) | undefined;
135
+ } | undefined;
132
136
  }) | null>;
133
137
  export declare const useTableContext: () => Omit<{
134
138
  getColgroupProps: (column: import("./types").FlattedTableColumnItemData, index: number) => {
@@ -161,10 +165,10 @@ export declare const useTableContext: () => Omit<{
161
165
  }) => void) | undefined;
162
166
  onDrop: (evt: any, sourceId: any, targetId: any, dragDirection: any) => void;
163
167
  groupedColumns: import("./types").FlattedTableColumnItemData[][];
164
- onExpandTreeRowsChange: (expandedNode: import("./types").TableRowEventData, shouldExpanded: boolean) => void;
168
+ onExpandTreeRowsChange: (expandedNode: TableRowEventData, shouldExpanded: boolean) => void;
165
169
  isExpandTreeRows: (id: import("react").ReactText) => boolean;
166
170
  isLoadingTreeNodeId: (id: import("react").ReactText) => boolean;
167
- onTreeNodeSwitch: (node: import("./types").TableRowEventData, onlyExpand?: any) => Promise<void>;
171
+ onTreeNodeSwitch: (node: TableRowEventData, onlyExpand?: any) => Promise<void>;
168
172
  resizable: boolean;
169
173
  colWidths: number[];
170
174
  onColumnResizable: (evt: any, { size }: any, index: number) => void;
@@ -172,7 +176,7 @@ export declare const useTableContext: () => Omit<{
172
176
  cellRender: ((text: any) => import("react").ReactNode) | undefined;
173
177
  footerRender: ((...nodes: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[]) => import("react").ReactNode) | undefined;
174
178
  showColMenu: boolean | undefined;
175
- onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
179
+ onLoadChildren: ((item: TableRowEventData) => void | Promise<void | any[]>) | undefined;
176
180
  setHeaderTableElement: import("react").Dispatch<import("react").SetStateAction<HTMLTableRowElement | null>>;
177
181
  scrollbar: boolean | import("packages/ui/scrollbar/lib/types").ScrollbarProps | undefined;
178
182
  rowClassName: ((record: Record<string, any>, index: number) => string) | undefined;
@@ -258,4 +262,8 @@ export declare const useTableContext: () => Omit<{
258
262
  } | undefined) => void) | undefined;
259
263
  } | undefined;
260
264
  onResizeStop?: ((evt: SyntheticEvent, size: ResizeCallbackData['size'], index: number, columnsWidth: number[]) => void) | undefined;
265
+ fixedToRow?: {
266
+ top?: number | ((rowData: TableRowEventData, index: number) => boolean) | undefined;
267
+ bottom?: number | ((rowData: TableRowEventData, index: number) => boolean) | undefined;
268
+ } | undefined;
261
269
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/table",
3
- "version": "5.0.0-canary.13",
3
+ "version": "5.0.0-canary.15",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -49,7 +49,7 @@
49
49
  "@hi-ui/checkbox": "^5.0.0-canary.3",
50
50
  "@hi-ui/classname": "^5.0.0-canary.2",
51
51
  "@hi-ui/dom-utils": "^5.0.0-canary.2",
52
- "@hi-ui/drawer": "^5.0.0-canary.5",
52
+ "@hi-ui/drawer": "^5.0.0-canary.6",
53
53
  "@hi-ui/empty-state": "^5.0.0-canary.3",
54
54
  "@hi-ui/env": "^5.0.0-canary.2",
55
55
  "@hi-ui/func-utils": "^5.0.0-canary.2",
@@ -58,7 +58,7 @@
58
58
  "@hi-ui/loading": "^5.0.0-canary.3",
59
59
  "@hi-ui/object-utils": "^5.0.0-canary.2",
60
60
  "@hi-ui/pagination": "^5.0.0-canary.5",
61
- "@hi-ui/popper": "^5.0.0-canary.6",
61
+ "@hi-ui/popper": "^5.0.0-canary.7",
62
62
  "@hi-ui/radio": "^5.0.0-canary.4",
63
63
  "@hi-ui/react-utils": "^5.0.0-canary.2",
64
64
  "@hi-ui/scrollbar": "^5.0.0-canary.4",
@@ -85,7 +85,7 @@
85
85
  },
86
86
  "devDependencies": {
87
87
  "@hi-ui/core": "^5.0.0-canary.3",
88
- "@hi-ui/core-css": "^5.0.0-canary.6",
88
+ "@hi-ui/core-css": "^5.0.0-canary.8",
89
89
  "@types/react-resizable": "^1.7.4",
90
90
  "react": "^17.0.1",
91
91
  "react-dom": "^17.0.1"