@hi-ui/table 4.10.0 → 4.12.0

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 (36) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/lib/cjs/BaseTable.js +4 -2
  3. package/lib/cjs/Table.js +3 -2
  4. package/lib/cjs/TbodyContent.js +33 -2
  5. package/lib/cjs/hooks/use-col-width.js +24 -22
  6. package/lib/cjs/styles/index.scss.js +1 -1
  7. package/lib/cjs/use-table.js +11 -1
  8. package/lib/cjs/utils/index.js +11 -4
  9. package/lib/esm/BaseTable.js +4 -2
  10. package/lib/esm/Table.js +1 -1
  11. package/lib/esm/TbodyContent.js +36 -5
  12. package/lib/esm/hooks/use-col-width.js +22 -20
  13. package/lib/esm/styles/index.scss.js +1 -1
  14. package/lib/esm/use-table.js +11 -1
  15. package/lib/esm/utils/index.js +11 -4
  16. package/lib/types/BaseTable.d.ts +8 -1
  17. package/lib/types/context.d.ts +15 -7
  18. package/lib/types/types.d.ts +5 -1
  19. package/lib/types/utils/index.d.ts +4 -1
  20. package/package.json +2 -1
  21. package/lib/cjs/packages/ui/radio/lib/esm/Radio.js +0 -100
  22. package/lib/cjs/packages/ui/radio/lib/esm/RadioGroup.js +0 -104
  23. package/lib/cjs/packages/ui/radio/lib/esm/context.js +0 -37
  24. package/lib/cjs/packages/ui/radio/lib/esm/index.js +0 -33
  25. package/lib/cjs/packages/ui/radio/lib/esm/styles/index.scss.js +0 -35
  26. package/lib/cjs/packages/ui/radio/lib/esm/types.js +0 -34
  27. package/lib/cjs/packages/ui/radio/lib/esm/use-radio-group.js +0 -61
  28. package/lib/cjs/packages/ui/radio/lib/esm/use-radio.js +0 -88
  29. package/lib/esm/packages/ui/radio/lib/esm/Radio.js +0 -88
  30. package/lib/esm/packages/ui/radio/lib/esm/RadioGroup.js +0 -92
  31. package/lib/esm/packages/ui/radio/lib/esm/context.js +0 -31
  32. package/lib/esm/packages/ui/radio/lib/esm/index.js +0 -26
  33. package/lib/esm/packages/ui/radio/lib/esm/styles/index.scss.js +0 -23
  34. package/lib/esm/packages/ui/radio/lib/esm/types.js +0 -27
  35. package/lib/esm/packages/ui/radio/lib/esm/use-radio-group.js +0 -56
  36. package/lib/esm/packages/ui/radio/lib/esm/use-radio.js +0 -83
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @hi-ui/table
2
2
 
3
+ ## 4.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#3305](https://github.com/XiaoMi/hiui/pull/3305) [`6316a318e`](https://github.com/XiaoMi/hiui/commit/6316a318efe728b2b9fe21097a5c262ec83bea93) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(table): 添加 fixedToRow 功能，支持设置行固定到顶部或底部 (#3304)
8
+
9
+ ## 4.11.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#3219](https://github.com/XiaoMi/hiui/pull/3219) [`ca7a945fe`](https://github.com/XiaoMi/hiui/commit/ca7a945fe1eeaf14b3ffb34375ff613781d7bebd) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(table): TableColumnItem 类型增加 minWidth 参数 (#3216)
14
+
15
+ ### Patch Changes
16
+
17
+ - [#3254](https://github.com/XiaoMi/hiui/pull/3254) [`fc1360986`](https://github.com/XiaoMi/hiui/commit/fc136098659d111d5df8a369a5b305e4be71d46e) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(table): 更新 useTable 逻辑以确保滚动位置不超出表格宽度，并添加 @hi-ui/radio 依赖
18
+
3
19
  ## 4.10.0
4
20
 
5
21
  ### Minor 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,
@@ -287,7 +288,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
287
288
  sumRow: sumRow,
288
289
  hasSumColumn: hasSumColumn,
289
290
  virtual: virtual,
290
- onResizeStop: onResizeStop
291
+ onResizeStop: onResizeStop,
292
+ fixedToRow: fixedToRow
291
293
  })
292
294
  }, renderTable()), renderFreezeShadow()), tableFooter);
293
295
  });
package/lib/cjs/Table.js CHANGED
@@ -25,7 +25,7 @@ var reactUtils = require('@hi-ui/react-utils');
25
25
  var TableSettingMenu = require('./TableSettingMenu.js');
26
26
  var Loading = require('@hi-ui/loading');
27
27
  var Checkbox = require('@hi-ui/checkbox');
28
- var index$1 = require('./packages/ui/radio/lib/esm/index.js');
28
+ var Radio = require('@hi-ui/radio');
29
29
  var useCheck = require('./hooks/use-check.js');
30
30
  var typeAssertion = require('@hi-ui/type-assertion');
31
31
  var treeUtils = require('@hi-ui/tree-utils');
@@ -41,6 +41,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
41
41
  var Pagination__default = /*#__PURE__*/_interopDefaultCompat(Pagination);
42
42
  var Loading__default = /*#__PURE__*/_interopDefaultCompat(Loading);
43
43
  var Checkbox__default = /*#__PURE__*/_interopDefaultCompat(Checkbox);
44
+ var Radio__default = /*#__PURE__*/_interopDefaultCompat(Radio);
44
45
  var _prefix = classname.getPrefixCls('table');
45
46
  /**
46
47
  * 需要使用双表格的场景对应的 API
@@ -215,7 +216,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
215
216
  onClick: function onClick(evt) {
216
217
  evt.stopPropagation();
217
218
  }
218
- })) : ( /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
219
+ })) : ( /*#__PURE__*/React__default["default"].createElement(Radio__default["default"], {
219
220
  checked: checked,
220
221
  disabled: disabledCheckbox,
221
222
  onChange: function onChange(evt) {
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
@@ -31,7 +31,7 @@ var useColWidth = function useColWidth(_ref) {
31
31
  // 是否重新设置过表格每列宽度
32
32
  var hasResetWidths = React__default["default"].useRef(false);
33
33
  var _React$useState = React__default["default"].useState(function () {
34
- return index.getGroupItemWidth(columns);
34
+ return index.getGroupItemWidth(columns).colWidths;
35
35
  }),
36
36
  colWidths = _React$useState[0],
37
37
  setColWidths = _React$useState[1];
@@ -39,12 +39,12 @@ var useColWidth = function useColWidth(_ref) {
39
39
  if (measureRowElement && measureRowElement.childNodes) {
40
40
  // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
41
41
  var exceedWidth = 0;
42
- var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index) {
42
+ var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index$1) {
43
43
  var _a;
44
- var realWidth = node.getBoundingClientRect().width || 0;
45
- var _ref2 = (_a = columns[index]) !== null && _a !== void 0 ? _a : {},
46
- width = _ref2.width,
44
+ var realWidth = node.getBoundingClientRect().width || 60;
45
+ var _ref2 = (_a = columns[index$1]) !== null && _a !== void 0 ? _a : {},
47
46
  fixed = _ref2.fixed;
47
+ var width = index.getGroupItemWidth(columns).colWidths[index$1];
48
48
  // 如果该列设置了 fixed 并且真实宽度大于设置的 width 则设置为 width
49
49
  if (fixed && width && width < realWidth) {
50
50
  exceedWidth += realWidth - width;
@@ -71,12 +71,12 @@ var useColWidth = function useColWidth(_ref) {
71
71
  return _realColumnsWidth;
72
72
  }
73
73
  }
74
- return index.getGroupItemWidth(columns);
74
+ return index.getGroupItemWidth(columns).colWidths;
75
75
  }, [columns]);
76
76
  var getVirtualWidths = React.useCallback(function () {
77
77
  var measureRowElement = measureRowElementRef.current;
78
78
  if (!measureRowElement) {
79
- return index.getGroupItemWidth(columns);
79
+ return index.getGroupItemWidth(columns).colWidths;
80
80
  }
81
81
  /** 虚拟滚动时，内容宽度不能用以前table自动渲染的方式获取，需要手动计算 */
82
82
  var columnDefaultWidth = 200;
@@ -105,7 +105,7 @@ var useColWidth = function useColWidth(_ref) {
105
105
  }
106
106
  }, [getVirtualWidths, virtual]);
107
107
  useUpdateEffect.useUpdateEffect(function () {
108
- setColWidths(index.getGroupItemWidth(columns));
108
+ setColWidths(index.getGroupItemWidth(columns).colWidths);
109
109
  // setColWidths((prev) => {
110
110
  // // resizable 模式下通过 measureRowElementRef.current 去更新列宽，防止拖拽后宽度被重置
111
111
  // // 例如同时设置了 resizable 和 rowSelection，当拖拽某列宽度后再选中某行时，该列宽度会被重置
@@ -147,33 +147,35 @@ var useColWidth = function useColWidth(_ref) {
147
147
  setHeaderTableElement = _React$useState2[1];
148
148
  // 控制列最小可调整宽度
149
149
  var _React$useState3 = React__default["default"].useState([]),
150
- minColWidth = _React$useState3[0],
151
- setMinColWidth = _React$useState3[1];
152
- // 当列变化时同步更新 minColWidth
150
+ minColWidths = _React$useState3[0],
151
+ setMinColWidths = _React$useState3[1];
152
+ // 当列变化时同步更新 minColWidths
153
153
  React__default["default"].useEffect(function () {
154
154
  var resizeObserver;
155
155
  if (headerTableElement) {
156
156
  resizeObserver = new ResizeObserver(function () {
157
157
  var resizableHandlerWidth = 4;
158
- var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
158
+ var calcMinColWidths = Array.from(headerTableElement.childNodes).map(function (th, index$1) {
159
+ var minColWidth = index.getGroupItemWidth(columns).minColWidths[index$1];
159
160
  var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
160
161
  var childNodes = Array.from(th.childNodes);
161
- return childNodes.map(function (child) {
162
+ var childNodesWidth = childNodes.map(function (child) {
162
163
  return child.offsetWidth;
163
164
  }).reduce(function (prev, next) {
164
165
  return prev + next;
165
166
  }, 0) + thPaddingLeft * 2 + resizableHandlerWidth;
167
+ return childNodesWidth > minColWidth ? minColWidth : childNodesWidth;
166
168
  });
167
- setMinColWidth(_minColWidth);
169
+ setMinColWidths(calcMinColWidths);
168
170
  });
169
171
  resizeObserver.observe(headerTableElement);
170
172
  } else {
171
- setMinColWidth(Array(columns.length).fill(0));
173
+ setMinColWidths(Array(columns.length).fill(0));
172
174
  }
173
175
  return function () {
174
176
  resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
175
177
  };
176
- }, [columns.length, headerTableElement, resizable]);
178
+ }, [columns, columns.length, headerTableElement, resizable]);
177
179
  /**
178
180
  * 控制列最小可调整宽度
179
181
  */
@@ -198,8 +200,8 @@ var useColWidth = function useColWidth(_ref) {
198
200
  */
199
201
  var onColumnResizable = React__default["default"].useCallback(function (evt, _ref3, index) {
200
202
  var size = _ref3.size;
201
- var minWidth = minColWidth[index];
202
- var anotherMinWidth = minColWidth[index + 1];
203
+ var minWidth = minColWidths[index];
204
+ var anotherMinWidth = minColWidths[index + 1];
203
205
  var nextWidth = size.width > minWidth ? size.width : minWidth;
204
206
  setColWidths(function (prev) {
205
207
  var nextColWidths = [].concat(prev);
@@ -216,18 +218,18 @@ var useColWidth = function useColWidth(_ref) {
216
218
  nextColWidths[index + 1] = anotherWidth;
217
219
  return nextColWidths;
218
220
  });
219
- }, [minColWidth, tableWidthAdjustOnResize]);
221
+ }, [minColWidths, tableWidthAdjustOnResize]);
220
222
  var getColgroupProps = React__default["default"].useCallback(function (column, index) {
221
223
  var width = colWidths[index] || undefined;
224
+ var minWidth = minColWidths[index] || undefined;
222
225
  return {
223
226
  style: {
224
227
  width: width,
225
- // TODO（疑惑）: minWidth 所要解决的问题
226
- minWidth: width
228
+ minWidth: minWidth || width
227
229
  }
228
230
  // 'data-hover-highlight': setAttrStatus(isHoveredCol(column.dataKey)),
229
231
  };
230
- }, [colWidths]);
232
+ }, [colWidths, minColWidths]);
231
233
  return {
232
234
  measureRowElementRef: measureRowElementRef,
233
235
  onColumnResizable: onColumnResizable,
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-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v4-table__wrapper {position: relative;z-index: 0;}.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff));}.hi-v4-table--size-md .hi-v4-table-header-cell {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm .hi-v4-table-header-cell {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg .hi-v4-table-header-cell {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered > .hi-v4-table__wrapper {border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered > .hi-v4-table__wrapper .hi-v4-table-header-cell, .hi-v4-table--bordered > .hi-v4-table__wrapper .hi-v4-table-cell {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered > .hi-v4-table__wrapper .hi-v4-table-row:last-child .hi-v4-table-cell {border-bottom: none;}.hi-v4-table--bordered.hi-v4-table--bordered-left-none > .hi-v4-table__wrapper {border-left: none;}.hi-v4-table--bordered.hi-v4-table--virtual > .hi-v4-table__wrapper .hi-v4-table-row .hi-v4-table-cell {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered.hi-v4-table--virtual > .hi-v4-table__wrapper .hi-v4-table-virtual-row:last-child .hi-v4-table-row .hi-v4-table-cell {border-bottom: none;}.hi-v4-table--sticky {position: sticky;top: 0;}.hi-v4-table--virtual {width: 100%;overflow: hidden;}.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v4-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v4-table-header__resizable:hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {border-left-color: var(--hi-v4-color-gray-200, #ebedf0);border-right-color: var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-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-v4-table__selection-col > .hi-v4-table-header__resizable-handle {display: none;}.hi-v4-table-header__resizable-handle:hover {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-left-color: var(--hi-v4-color-gray-200, #ebedf0);border-right-color: var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937);}.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-body, .hi-v4-table-content {position: relative;overflow: auto;}.hi-v4-table-body--virtual-holder {overflow: hidden;}.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-cell__indent {display: inline-block;vertical-align: middle;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px);}.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6);vertical-align: middle;}.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px;}.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);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-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-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-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-table-header-filter-custom__content {padding: 12px 8px;}.hi-v4-table-embed-row {position: relative;z-index: 0;}.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px);}.hi-v4-table-setting {position: absolute;height: 100%;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;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-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-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-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-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6;}.hi-v4-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-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-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-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-table-body-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-body-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-setting-drawer .hi-v4-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-setting-drawer .hi-v4-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-setting-item:not(.hi-v4-setting-item--drag-disabled) .hi-v4-setting-item__wrap {cursor: move;}.hi-v4-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-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6;}.hi-v4-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-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-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-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
15
+ var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v4-table__wrapper {position: relative;z-index: 0;}.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff));}.hi-v4-table--size-md .hi-v4-table-header-cell {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm .hi-v4-table-header-cell {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg .hi-v4-table-header-cell {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg .hi-v4-table-row:not(.hi-v4-table-body-empty-content) .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered > .hi-v4-table__wrapper {border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered > .hi-v4-table__wrapper .hi-v4-table-header-cell, .hi-v4-table--bordered > .hi-v4-table__wrapper .hi-v4-table-cell {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered > .hi-v4-table__wrapper .hi-v4-table-row:last-child .hi-v4-table-cell {border-bottom: none;}.hi-v4-table--bordered.hi-v4-table--bordered-left-none > .hi-v4-table__wrapper {border-left: none;}.hi-v4-table--bordered.hi-v4-table--virtual > .hi-v4-table__wrapper .hi-v4-table-row .hi-v4-table-cell {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered.hi-v4-table--virtual > .hi-v4-table__wrapper .hi-v4-table-virtual-row:last-child .hi-v4-table-row .hi-v4-table-cell {border-bottom: none;}.hi-v4-table--sticky {position: sticky;top: 0;}.hi-v4-table--virtual {width: 100%;overflow: hidden;}.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v4-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v4-table-header__resizable:hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {border-left-color: var(--hi-v4-color-gray-200, #ebedf0);border-right-color: var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-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-v4-table__selection-col > .hi-v4-table-header__resizable-handle {display: none;}.hi-v4-table-header__resizable-handle:hover {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-left-color: var(--hi-v4-color-gray-200, #ebedf0);border-right-color: var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-row--fixed-top, .hi-v4-table-row--fixed-bottom {position: sticky;z-index: 6;}.hi-v4-table-row--fixed-top {top: 0;}.hi-v4-table-row--fixed-bottom {bottom: 0;}.hi-v4-table-row--fixed-bottom .hi-v4-table-cell {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-row:has(+ .hi-v4-table-row--fixed-bottom) .hi-v4-table-cell {border-bottom: none;}.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937);}.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-body, .hi-v4-table-content {position: relative;overflow: auto;}.hi-v4-table-body--virtual-holder {overflow: hidden;}.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-cell__indent {display: inline-block;vertical-align: middle;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px);}.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6);vertical-align: middle;}.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px;}.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);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-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-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-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-table-header-filter-custom__content {padding: 12px 8px;}.hi-v4-table-embed-row {position: relative;z-index: 0;}.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px);}.hi-v4-table-setting {position: absolute;height: 100%;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;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-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-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-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-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6;}.hi-v4-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-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-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-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-table-body-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-body-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-setting-drawer .hi-v4-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-setting-drawer .hi-v4-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-setting-item:not(.hi-v4-setting-item--drag-disabled) .hi-v4-setting-item__wrap {cursor: move;}.hi-v4-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-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6;}.hi-v4-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-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-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-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-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/cjs/use-table.js CHANGED
@@ -402,8 +402,18 @@ var useTable = function useTable(_a) {
402
402
  right = _scrollBodyElementRef.right;
403
403
  scrollRight = tableTefRight - right;
404
404
  }
405
+ var _scrollLeft = scrollLeft;
406
+ if (bodyTableRef.current && scrollBodyElementRef.current) {
407
+ var _bodyTableRef$current2 = bodyTableRef.current.getBoundingClientRect(),
408
+ tableWidth = _bodyTableRef$current2.width;
409
+ var _scrollBodyElementRef2 = scrollBodyElementRef.current.getBoundingClientRect(),
410
+ scrollBodyWidth = _scrollBodyElementRef2.width;
411
+ if (scrollLeft + scrollBodyWidth > tableWidth) {
412
+ _scrollLeft = tableWidth - scrollBodyWidth;
413
+ }
414
+ }
405
415
  setScrollSize({
406
- scrollLeft: scrollLeft,
416
+ scrollLeft: _scrollLeft,
407
417
  scrollRight: scrollRight
408
418
  });
409
419
  }, [rightFrozenColKeys, scrollSize]);
package/lib/cjs/utils/index.js CHANGED
@@ -66,22 +66,29 @@ var setColumnsDefaultWidth = function setColumnsDefaultWidth(columns, defaultWid
66
66
  * 如果是多级表头，将会递归 children 得到叶子结点层每项的宽度
67
67
  */
68
68
  var getGroupItemWidth = function getGroupItemWidth(columns) {
69
- var baseColWidths = [];
69
+ var colWidths = [];
70
+ var minColWidths = [];
70
71
  var dig = function dig(column) {
71
72
  column.forEach(function (_ref) {
72
73
  var children = _ref.children,
73
- width = _ref.width;
74
+ width = _ref.width,
75
+ minWidth = _ref.minWidth;
74
76
  if (Array.isArray(children)) {
75
77
  dig(children);
76
78
  return;
77
79
  }
78
80
  // 如果没有设置列宽度，css 宽度默认是 `auto`，这里对于非数字 width 均设置为 0
79
81
  var colWidth = typeAssertion.isNumeric(width) ? Number(width) : 0;
80
- baseColWidths.push(colWidth);
82
+ var minColWidth = typeAssertion.isNumeric(minWidth) ? Number(minWidth) : colWidth || 60;
83
+ colWidths.push(colWidth < minColWidth ? minColWidth : colWidth);
84
+ minColWidths.push(minColWidth);
81
85
  });
82
86
  };
83
87
  dig(columns);
84
- return baseColWidths;
88
+ return {
89
+ colWidths: colWidths,
90
+ minColWidths: minColWidths
91
+ };
85
92
  };
86
93
  var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, key, parentStickyWidth) {
87
94
  if (parentStickyWidth === void 0) {
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,
@@ -274,7 +275,8 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
274
275
  sumRow: sumRow,
275
276
  hasSumColumn: hasSumColumn,
276
277
  virtual: virtual,
277
- onResizeStop: onResizeStop
278
+ onResizeStop: onResizeStop,
279
+ fixedToRow: fixedToRow
278
280
  })
279
281
  }, renderTable()), renderFreezeShadow()), tableFooter);
280
282
  });
package/lib/esm/Table.js CHANGED
@@ -20,7 +20,7 @@ import { withDefaultProps } from '@hi-ui/react-utils';
20
20
  import { TableSettingMenu } from './TableSettingMenu.js';
21
21
  import Loading from '@hi-ui/loading';
22
22
  import Checkbox from '@hi-ui/checkbox';
23
- import Radio from './packages/ui/radio/lib/esm/index.js';
23
+ import Radio from '@hi-ui/radio';
24
24
  import { useTableCheck } from './hooks/use-check.js';
25
25
  import { isNullish } from '@hi-ui/type-assertion';
26
26
  import { cloneTree, flattenTree } from '@hi-ui/tree-utils';
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
@@ -19,7 +19,7 @@ var useColWidth = function useColWidth(_ref) {
19
19
  // 是否重新设置过表格每列宽度
20
20
  var hasResetWidths = React__default.useRef(false);
21
21
  var _React$useState = React__default.useState(function () {
22
- return getGroupItemWidth(columns);
22
+ return getGroupItemWidth(columns).colWidths;
23
23
  }),
24
24
  colWidths = _React$useState[0],
25
25
  setColWidths = _React$useState[1];
@@ -29,10 +29,10 @@ var useColWidth = function useColWidth(_ref) {
29
29
  var exceedWidth = 0;
30
30
  var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index) {
31
31
  var _a;
32
- var realWidth = node.getBoundingClientRect().width || 0;
32
+ var realWidth = node.getBoundingClientRect().width || 60;
33
33
  var _ref2 = (_a = columns[index]) !== null && _a !== void 0 ? _a : {},
34
- width = _ref2.width,
35
34
  fixed = _ref2.fixed;
35
+ var width = getGroupItemWidth(columns).colWidths[index];
36
36
  // 如果该列设置了 fixed 并且真实宽度大于设置的 width 则设置为 width
37
37
  if (fixed && width && width < realWidth) {
38
38
  exceedWidth += realWidth - width;
@@ -59,12 +59,12 @@ var useColWidth = function useColWidth(_ref) {
59
59
  return _realColumnsWidth;
60
60
  }
61
61
  }
62
- return getGroupItemWidth(columns);
62
+ return getGroupItemWidth(columns).colWidths;
63
63
  }, [columns]);
64
64
  var getVirtualWidths = useCallback(function () {
65
65
  var measureRowElement = measureRowElementRef.current;
66
66
  if (!measureRowElement) {
67
- return getGroupItemWidth(columns);
67
+ return getGroupItemWidth(columns).colWidths;
68
68
  }
69
69
  /** 虚拟滚动时，内容宽度不能用以前table自动渲染的方式获取，需要手动计算 */
70
70
  var columnDefaultWidth = 200;
@@ -93,7 +93,7 @@ var useColWidth = function useColWidth(_ref) {
93
93
  }
94
94
  }, [getVirtualWidths, virtual]);
95
95
  useUpdateEffect(function () {
96
- setColWidths(getGroupItemWidth(columns));
96
+ setColWidths(getGroupItemWidth(columns).colWidths);
97
97
  // setColWidths((prev) => {
98
98
  // // resizable 模式下通过 measureRowElementRef.current 去更新列宽，防止拖拽后宽度被重置
99
99
  // // 例如同时设置了 resizable 和 rowSelection，当拖拽某列宽度后再选中某行时，该列宽度会被重置
@@ -135,33 +135,35 @@ var useColWidth = function useColWidth(_ref) {
135
135
  setHeaderTableElement = _React$useState2[1];
136
136
  // 控制列最小可调整宽度
137
137
  var _React$useState3 = React__default.useState([]),
138
- minColWidth = _React$useState3[0],
139
- setMinColWidth = _React$useState3[1];
140
- // 当列变化时同步更新 minColWidth
138
+ minColWidths = _React$useState3[0],
139
+ setMinColWidths = _React$useState3[1];
140
+ // 当列变化时同步更新 minColWidths
141
141
  React__default.useEffect(function () {
142
142
  var resizeObserver;
143
143
  if (headerTableElement) {
144
144
  resizeObserver = new ResizeObserver(function () {
145
145
  var resizableHandlerWidth = 4;
146
- var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
146
+ var calcMinColWidths = Array.from(headerTableElement.childNodes).map(function (th, index) {
147
+ var minColWidth = getGroupItemWidth(columns).minColWidths[index];
147
148
  var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
148
149
  var childNodes = Array.from(th.childNodes);
149
- return childNodes.map(function (child) {
150
+ var childNodesWidth = childNodes.map(function (child) {
150
151
  return child.offsetWidth;
151
152
  }).reduce(function (prev, next) {
152
153
  return prev + next;
153
154
  }, 0) + thPaddingLeft * 2 + resizableHandlerWidth;
155
+ return childNodesWidth > minColWidth ? minColWidth : childNodesWidth;
154
156
  });
155
- setMinColWidth(_minColWidth);
157
+ setMinColWidths(calcMinColWidths);
156
158
  });
157
159
  resizeObserver.observe(headerTableElement);
158
160
  } else {
159
- setMinColWidth(Array(columns.length).fill(0));
161
+ setMinColWidths(Array(columns.length).fill(0));
160
162
  }
161
163
  return function () {
162
164
  resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
163
165
  };
164
- }, [columns.length, headerTableElement, resizable]);
166
+ }, [columns, columns.length, headerTableElement, resizable]);
165
167
  /**
166
168
  * 控制列最小可调整宽度
167
169
  */
@@ -186,8 +188,8 @@ var useColWidth = function useColWidth(_ref) {
186
188
  */
187
189
  var onColumnResizable = React__default.useCallback(function (evt, _ref3, index) {
188
190
  var size = _ref3.size;
189
- var minWidth = minColWidth[index];
190
- var anotherMinWidth = minColWidth[index + 1];
191
+ var minWidth = minColWidths[index];
192
+ var anotherMinWidth = minColWidths[index + 1];
191
193
  var nextWidth = size.width > minWidth ? size.width : minWidth;
192
194
  setColWidths(function (prev) {
193
195
  var nextColWidths = [].concat(prev);
@@ -204,18 +206,18 @@ var useColWidth = function useColWidth(_ref) {
204
206
  nextColWidths[index + 1] = anotherWidth;
205
207
  return nextColWidths;
206
208
  });
207
- }, [minColWidth, tableWidthAdjustOnResize]);
209
+ }, [minColWidths, tableWidthAdjustOnResize]);
208
210
  var getColgroupProps = React__default.useCallback(function (column, index) {
209
211
  var width = colWidths[index] || undefined;
212
+ var minWidth = minColWidths[index] || undefined;
210
213
  return {
211
214
  style: {
212
215
  width: width,
213
- // TODO（疑惑）: minWidth 所要解决的问题
214
- minWidth: width
216
+ minWidth: minWidth || width
215
217
  }
216
218
  // 'data-hover-highlight': setAttrStatus(isHoveredCol(column.dataKey)),
217
219
  };
218
- }, [colWidths]);
220
+ }, [colWidths, minColWidths]);
219
221
  return {
220
222
  measureRowElementRef: measureRowElementRef,
221
223
  onColumnResizable: onColumnResizable,