@hi-ui/table 4.3.3 → 4.4.0-alpha.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 (18) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/lib/cjs/TableRow.js +5 -2
  3. package/lib/cjs/TbodyContent.js +3 -1
  4. package/lib/cjs/hooks/use-col-width.js +44 -15
  5. package/lib/cjs/packages/ui/scrollbar/lib/esm/Scrollbar.js +5 -2
  6. package/lib/cjs/packages/ui/scrollbar/lib/esm/styles/index.scss.js +1 -1
  7. package/lib/cjs/use-table.js +6 -2
  8. package/lib/esm/TableRow.js +5 -2
  9. package/lib/esm/TbodyContent.js +3 -1
  10. package/lib/esm/hooks/use-col-width.js +44 -15
  11. package/lib/esm/packages/ui/scrollbar/lib/esm/Scrollbar.js +5 -2
  12. package/lib/esm/packages/ui/scrollbar/lib/esm/styles/index.scss.js +1 -1
  13. package/lib/esm/use-table.js +6 -2
  14. package/lib/types/TableRow.d.ts +4 -0
  15. package/lib/types/context.d.ts +4 -0
  16. package/lib/types/types.d.ts +4 -0
  17. package/lib/types/use-table.d.ts +11 -1
  18. package/package.json +33 -33
package/CHANGELOG.md CHANGED
@@ -1,5 +1,48 @@
1
1
  # @hi-ui/table
2
2
 
3
+ ## 4.4.0-alpha.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 02ef793ee: feat: add fixed and rowClassName api
8
+
9
+ ## 4.3.4
10
+
11
+ ### Patch Changes
12
+
13
+ - build: rollup2 构建
14
+ - Updated dependencies
15
+ - @hi-ui/core@4.0.8
16
+ - @hi-ui/use-cache@4.0.4
17
+ - @hi-ui/use-check@4.0.5
18
+ - @hi-ui/use-check-state@4.0.4
19
+ - @hi-ui/use-drag-sorter@4.0.4
20
+ - @hi-ui/use-latest@4.0.4
21
+ - @hi-ui/use-toggle@4.0.4
22
+ - @hi-ui/use-uncontrolled-state@4.0.4
23
+ - @hi-ui/use-update-effect@4.0.4
24
+ - @hi-ui/icons@4.0.18
25
+ - @hi-ui/button@4.0.9
26
+ - @hi-ui/checkbox@4.0.8
27
+ - @hi-ui/drawer@4.1.3
28
+ - @hi-ui/empty-state@4.0.7
29
+ - @hi-ui/icon-button@4.0.8
30
+ - @hi-ui/loading@4.1.3
31
+ - @hi-ui/pagination@4.0.14
32
+ - @hi-ui/popper@4.1.3
33
+ - @hi-ui/select@4.2.5
34
+ - @hi-ui/spinner@4.0.8
35
+ - @hi-ui/array-utils@4.0.4
36
+ - @hi-ui/classname@4.0.4
37
+ - @hi-ui/dom-utils@4.0.7
38
+ - @hi-ui/env@4.0.4
39
+ - @hi-ui/func-utils@4.0.4
40
+ - @hi-ui/object-utils@4.0.4
41
+ - @hi-ui/react-utils@4.0.4
42
+ - @hi-ui/times@4.0.4
43
+ - @hi-ui/tree-utils@4.1.4
44
+ - @hi-ui/type-assertion@4.0.4
45
+
3
46
  ## 4.3.3
4
47
 
5
48
  ### Patch Changes
package/lib/cjs/TableRow.js CHANGED
@@ -36,6 +36,7 @@ var EMBED_ON_ROW_PROPS = {};
36
36
  var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
37
37
  var _ref$prefixCls = _ref.prefixCls,
38
38
  prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
39
+ className = _ref.className,
39
40
  rowDataProp = _ref.rowData,
40
41
  rowIndex = _ref.rowIndex,
41
42
  expandedTree = _ref.expandedTree,
@@ -58,7 +59,8 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
58
59
  dragRowRef = _useTableContext.dragRowRef,
59
60
  onRow = _useTableContext.onRow,
60
61
  colWidths = _useTableContext.colWidths,
61
- virtual = _useTableContext.virtual;
62
+ virtual = _useTableContext.virtual,
63
+ cellClassName = _useTableContext.cellClassName;
62
64
  var rowData = rowDataProp.raw,
63
65
  rowId = rowDataProp.id;
64
66
  // ** ************** 拖拽管理 *************** *//
@@ -144,7 +146,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
144
146
  // ** ************** 行状态管理 *************** *//
145
147
  var highlighted = isHighlightedRow(rowId);
146
148
  var hasError = isErrorRow(rowId);
147
- var cls = classname.cx(prefixCls + "-row", showRowHighlight && prefixCls + "-row--hover", striped && (rowIndex & 1) === 1 && prefixCls + "-row--striped", hasError && prefixCls + "-row--error", highlighted && prefixCls + "-row--highlight", draggable && prefixCls + "-row--draggable", draggable && dragging && prefixCls + "-row--dragging", draggable && dragDirection && prefixCls + "-row--drag-" + dragDirection, isSumRow && prefixCls + "-row--total", isAvgRow && prefixCls + "-row--avg", virtual && prefixCls + "-row--virtual");
149
+ var cls = classname.cx(prefixCls + "-row", showRowHighlight && prefixCls + "-row--hover", striped && (rowIndex & 1) === 1 && prefixCls + "-row--striped", hasError && prefixCls + "-row--error", highlighted && prefixCls + "-row--highlight", draggable && prefixCls + "-row--draggable", draggable && dragging && prefixCls + "-row--dragging", draggable && dragDirection && prefixCls + "-row--drag-" + dragDirection, isSumRow && prefixCls + "-row--total", isAvgRow && prefixCls + "-row--avg", virtual && prefixCls + "-row--virtual", className);
148
150
  var firstColumn = flattedColumnsWithoutChildren.find(function (item) {
149
151
  return item.dataKey !== Table.SELECTION_DATA_KEY && item.dataKey !== BaseTable.EMBED_DATA_KEY;
150
152
  });
@@ -203,6 +205,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
203
205
  }), flattedColumnsWithoutChildren.map(function (column, idx) {
204
206
  return /*#__PURE__*/React__default["default"].createElement(TableCell.TableCell, {
205
207
  key: idx,
208
+ className: cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(rowDataProp, column, idx),
206
209
  column: column,
207
210
  isSwitcherCol: firstColumn ? firstColumn.id === column.id : false,
208
211
  rowData: rowDataProp,
package/lib/cjs/TbodyContent.js CHANGED
@@ -41,7 +41,8 @@ var TbodyContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
41
41
  avgRow = _useTableContext.avgRow,
42
42
  hasSumColumn = _useTableContext.hasSumColumn,
43
43
  sumRow = _useTableContext.sumRow,
44
- measureRowElementRef = _useTableContext.measureRowElementRef;
44
+ measureRowElementRef = _useTableContext.measureRowElementRef,
45
+ rowClassName = _useTableContext.rowClassName;
45
46
  var getRequiredProps = useLatest.useLatestCallback(function (id) {
46
47
  return {
47
48
  // @ts-ignore
@@ -59,6 +60,7 @@ var TbodyContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
59
60
  ref: index === 0 ? measureRowElementRef : null,
60
61
  // key={depth + index}
61
62
  key: row.id,
63
+ className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index),
62
64
  // @ts-ignore
63
65
  rowIndex: index,
64
66
  rowData: row
package/lib/cjs/hooks/use-col-width.js CHANGED
@@ -27,6 +27,8 @@ var useColWidth = function useColWidth(_ref) {
27
27
  columns = _ref.columns,
28
28
  virtual = _ref.virtual;
29
29
  var measureRowElementRef = React__default["default"].useRef(null);
30
+ // 是否重新设置过表格每列宽度
31
+ var hasResetWidths = React__default["default"].useRef(false);
30
32
  var _React$useState = React__default["default"].useState(function () {
31
33
  return index.getGroupItemWidth(columns);
32
34
  }),
@@ -59,7 +61,7 @@ var useColWidth = function useColWidth(_ref) {
59
61
  }, [columns]);
60
62
  useUpdateEffect.useUpdateEffect(function () {
61
63
  if (virtual) {
62
- // 虚拟滚动的计算需要根据容器来做分配，不能使用没有witdh默认设置为0的方式来做表格平均分配
64
+ // 虚拟滚动的计算需要根据容器来做分配，不能使用没有width默认设置为0的方式来做表格平均分配
63
65
  setColWidths(getVirtualWidths());
64
66
  }
65
67
  }, [getVirtualWidths, virtual]);
@@ -75,24 +77,51 @@ var useColWidth = function useColWidth(_ref) {
75
77
  var _resizeObserver = new ResizeObserver(function () {
76
78
  if (virtual) {
77
79
  setColWidths(getVirtualWidths());
80
+ } else {
81
+ // 当第一行有内容时并且没有重新设置列宽时，在去设置列宽
82
+ // todo 临时方案：hasResetWidths.current 作用是防止某些浏览器下，下面逻辑死循环
83
+ if ((measureRowElement === null || measureRowElement === void 0 ? void 0 : measureRowElement.childNodes) && hasResetWidths.current === false) {
84
+ hasResetWidths.current = true;
85
+ // 超出的宽度，真实的表格宽度超出的每列总和的宽度
86
+ var exceedWidth = 0;
87
+ var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index) {
88
+ var _a;
89
+ var realWidth = node.getBoundingClientRect().width || 0;
90
+ var _ref2 = (_a = columns[index]) !== null && _a !== void 0 ? _a : {},
91
+ width = _ref2.width,
92
+ fixed = _ref2.fixed;
93
+ // 如果该列设置了 fixed 并且真实宽度大于设置的 width 则设置为 width
94
+ if (fixed && width && width < realWidth) {
95
+ exceedWidth += realWidth - width;
96
+ return width;
97
+ }
98
+ return realWidth;
99
+ });
100
+ // 如果有多余的宽度，则将多余的宽度平分到没有设置 maxWidth 的列上
101
+ if (exceedWidth > 0) {
102
+ var noFixedColumns = columns.filter(function (item) {
103
+ return !item.fixed;
104
+ });
105
+ _realColumnsWidth.map(function (item, index) {
106
+ if (!columns[index].fixed) {
107
+ return item + Math.floor(exceedWidth / noFixedColumns.length);
108
+ }
109
+ return item;
110
+ });
111
+ }
112
+ if (_realColumnsWidth.some(function (width) {
113
+ return width && width > 0;
114
+ })) {
115
+ setColWidths(_realColumnsWidth);
116
+ }
117
+ }
78
118
  }
79
- // else {
80
- // if (measureRowElement.childNodes) {
81
- // const _realColumnsWidth = Array.from(measureRowElement.childNodes).map((node) => {
82
- // return (node as HTMLElement).getBoundingClientRect().width || 0
83
- // })
84
- // if (_realColumnsWidth.some((width) => width && width > 0)) {
85
- // setColWidths(_realColumnsWidth)
86
- // }
87
- // }
88
- // }
89
119
  });
90
-
91
120
  _resizeObserver.observe(measureRowElement);
92
121
  }
93
122
  return function () {};
94
123
  // 测量元素在内容列为空时会是空，切换会使测量元素变化，导致后续的resize时间无法响应,此处测量元素变化时需要重新绑定
95
- }, [getVirtualWidths, virtual]);
124
+ }, [columns, getVirtualWidths, virtual]);
96
125
  var _React$useState2 = React__default["default"].useState(null),
97
126
  headerTableElement = _React$useState2[0],
98
127
  setHeaderTableElement = _React$useState2[1];
@@ -118,8 +147,8 @@ var useColWidth = function useColWidth(_ref) {
118
147
  /**
119
148
  * 列宽拖拽 resize，只处理拖拽线两边的列宽度
120
149
  */
121
- var onColumnResizable = React__default["default"].useCallback(function (_, _ref2, index) {
122
- var size = _ref2.size;
150
+ var onColumnResizable = React__default["default"].useCallback(function (_, _ref3, index) {
151
+ var size = _ref3.size;
123
152
  var minWidth = minColWidth[index];
124
153
  var anotherMinWidth = minColWidth[index + 1];
125
154
  var nextWidth = size.width > minWidth ? size.width : minWidth;
package/lib/cjs/packages/ui/scrollbar/lib/esm/Scrollbar.js CHANGED
@@ -54,8 +54,9 @@ var Scrollbar = /*#__PURE__*/React.forwardRef(function (_a, ref) {
54
54
  className = _a.className,
55
55
  children = _a.children,
56
56
  style = _a.style,
57
+ zIndex = _a.zIndex,
57
58
  innerRef = _a.innerRef,
58
- rest = tslib.__rest(_a, ["prefixCls", "role", "position", "axes", "keepVisible", "onlyScrollVisible", "className", "children", "style", "innerRef"]);
59
+ rest = tslib.__rest(_a, ["prefixCls", "role", "position", "axes", "keepVisible", "onlyScrollVisible", "className", "children", "style", "zIndex", "innerRef"]);
59
60
  var cls = classname.cx(prefixCls, className, 'priority', (_cx = {}, _cx[prefixCls + "--keep-visible"] = keepVisible, _cx[prefixCls + "--only-scroll-visible"] = !keepVisible && onlyScrollVisible, _cx));
60
61
  var _useState = React.useState(undefined),
61
62
  ps = _useState[0],
@@ -70,8 +71,10 @@ var Scrollbar = /*#__PURE__*/React.forwardRef(function (_a, ref) {
70
71
  React.useEffect(function () {
71
72
  if (containerElement) {
72
73
  setPs(new perfectScrollbar_esm["default"](containerElement));
74
+ // 动态设置滚动条 z-index
75
+ zIndex && containerElement.style.setProperty('--scrollbar-zIndex', String(zIndex));
73
76
  }
74
- }, [containerElement]);
77
+ }, [containerElement, zIndex]);
75
78
  // 轴定制
76
79
  React.useEffect(function () {
77
80
  if (ps) {
package/lib/cjs/packages/ui/scrollbar/lib/esm/styles/index.scss.js CHANGED
@@ -30,6 +30,6 @@ var __styleInject____default = /*#__PURE__*/_interopDefaultCompat(__styleInject_
30
30
  * This source code is licensed under the MIT license found in the
31
31
  * LICENSE file in the root directory of this source tree.
32
32
  */
33
- var css_248z = "/** Container style*/.ps {overflow: hidden !important;overflow-anchor: none;-ms-overflow-style: none;touch-action: auto;-ms-touch-action: auto;}/** Scrollbar rail styles*/.ps__rail-x {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;height: 15px;/* there must be 'bottom' or 'top' for ps__rail-x */bottom: 0px;/* please don't change 'position' */position: absolute;}.ps__rail-y {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;width: 15px;/* there must be 'right' or 'left' for ps__rail-y */right: 0;/* please don't change 'position' */position: absolute;}.ps--active-x > .ps__rail-x,.ps--active-y > .ps__rail-y {display: block;background-color: transparent;}.ps:hover > .ps__rail-x,.ps:hover > .ps__rail-y,.ps--focus > .ps__rail-x,.ps--focus > .ps__rail-y,.ps--scrolling-x > .ps__rail-x,.ps--scrolling-y > .ps__rail-y {opacity: 0.6;}.ps .ps__rail-x:hover,.ps .ps__rail-y:hover,.ps .ps__rail-x:focus,.ps .ps__rail-y:focus,.ps .ps__rail-x.ps--clicking,.ps .ps__rail-y.ps--clicking {background-color: #eee;opacity: 0.9;}/** Scrollbar thumb styles*/.ps__thumb-x {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, height 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;height: 6px;/* there must be 'bottom' for ps__thumb-x */bottom: 2px;/* please don't change 'position' */position: absolute;}.ps__thumb-y {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, width 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;width: 6px;/* there must be 'right' for ps__thumb-y */right: 2px;/* please don't change 'position' */position: absolute;}.ps__rail-x:hover > .ps__thumb-x,.ps__rail-x:focus > .ps__thumb-x,.ps__rail-x.ps--clicking .ps__thumb-x {background-color: #999;height: 11px;}.ps__rail-y:hover > .ps__thumb-y,.ps__rail-y:focus > .ps__thumb-y,.ps__rail-y.ps--clicking .ps__thumb-y {background-color: #999;width: 11px;}/* MS supports */@supports (-ms-overflow-style: none) {.ps {overflow: auto !important;}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {.ps {overflow: auto !important;}}.hi-v4-scrollbar {overflow: hidden;width: 100%;height: 100%;}.hi-v4-scrollbar__wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;min-width: 100%;min-height: 100%;}.hi-v4-scrollbar--keep-visible.priority > .ps__rail-y, .hi-v4-scrollbar--keep-visible.priority > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar--keep-visible.priority .ps__thumb-y,.hi-v4-scrollbar--keep-visible.priority .ps__thumb-x {background-color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-scrollbar.priority:hover > .ps__rail-y, .hi-v4-scrollbar.priority:hover > .ps__rail-x, .hi-v4-scrollbar.priority:focus > .ps__rail-y, .hi-v4-scrollbar.priority:focus > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y,.hi-v4-scrollbar.priority .ps__thumb-y {width: 8px;border-radius: 4px;right: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-y:hover, .hi-v4-scrollbar.priority > .ps__rail-y:focus, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking {width: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y:hover .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y:focus .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking .ps__thumb-y {width: 8px;right: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar.priority > .ps__rail-x,.hi-v4-scrollbar.priority .ps__thumb-x {height: 8px;border-radius: 4px;bottom: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-x:hover, .hi-v4-scrollbar.priority > .ps__rail-x:focus, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking {height: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-x:hover .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x:focus .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking .ps__thumb-x {height: 8px;bottom: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-y) > .ps__rail-y:not(:hover):not(:focus), .hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-x) > .ps__rail-x:not(:hover):not(:focus) {opacity: 0;}";
33
+ var css_248z = "/** Container style*/.ps {overflow: hidden !important;overflow-anchor: none;-ms-overflow-style: none;touch-action: auto;-ms-touch-action: auto;}/** Scrollbar rail styles*/.ps__rail-x {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;height: 15px;/* there must be 'bottom' or 'top' for ps__rail-x */bottom: 0px;/* please don't change 'position' */position: absolute;}.ps__rail-y {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;width: 15px;/* there must be 'right' or 'left' for ps__rail-y */right: 0;/* please don't change 'position' */position: absolute;}.ps--active-x > .ps__rail-x,.ps--active-y > .ps__rail-y {display: block;background-color: transparent;}.ps:hover > .ps__rail-x,.ps:hover > .ps__rail-y,.ps--focus > .ps__rail-x,.ps--focus > .ps__rail-y,.ps--scrolling-x > .ps__rail-x,.ps--scrolling-y > .ps__rail-y {opacity: 0.6;}.ps .ps__rail-x:hover,.ps .ps__rail-y:hover,.ps .ps__rail-x:focus,.ps .ps__rail-y:focus,.ps .ps__rail-x.ps--clicking,.ps .ps__rail-y.ps--clicking {background-color: #eee;opacity: 0.9;}/** Scrollbar thumb styles*/.ps__thumb-x {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, height 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;height: 6px;/* there must be 'bottom' for ps__thumb-x */bottom: 2px;/* please don't change 'position' */position: absolute;}.ps__thumb-y {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, width 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;width: 6px;/* there must be 'right' for ps__thumb-y */right: 2px;/* please don't change 'position' */position: absolute;}.ps__rail-x:hover > .ps__thumb-x,.ps__rail-x:focus > .ps__thumb-x,.ps__rail-x.ps--clicking .ps__thumb-x {background-color: #999;height: 11px;}.ps__rail-y:hover > .ps__thumb-y,.ps__rail-y:focus > .ps__thumb-y,.ps__rail-y.ps--clicking .ps__thumb-y {background-color: #999;width: 11px;}/* MS supports */@supports (-ms-overflow-style: none) {.ps {overflow: auto !important;}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {.ps {overflow: auto !important;}}.hi-v4-scrollbar {--scrollbar-zIndex: \"auto\";overflow: hidden;width: 100%;height: 100%;}.hi-v4-scrollbar__wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;min-width: 100%;min-height: 100%;}.hi-v4-scrollbar--keep-visible.priority > .ps__rail-y, .hi-v4-scrollbar--keep-visible.priority > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar--keep-visible.priority .ps__thumb-y,.hi-v4-scrollbar--keep-visible.priority .ps__thumb-x {background-color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-scrollbar.priority:hover > .ps__rail-y, .hi-v4-scrollbar.priority:hover > .ps__rail-x, .hi-v4-scrollbar.priority:focus > .ps__rail-y, .hi-v4-scrollbar.priority:focus > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y,.hi-v4-scrollbar.priority .ps__thumb-y {width: 8px;border-radius: 4px;right: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-y:hover, .hi-v4-scrollbar.priority > .ps__rail-y:focus, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking {width: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y:hover .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y:focus .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking .ps__thumb-y {width: 8px;right: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar.priority > .ps__rail-x,.hi-v4-scrollbar.priority .ps__thumb-x {height: 8px;border-radius: 4px;bottom: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-x:hover, .hi-v4-scrollbar.priority > .ps__rail-x:focus, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking {height: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-x:hover .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x:focus .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking .ps__thumb-x {height: 8px;bottom: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-y) > .ps__rail-y:not(:hover):not(:focus), .hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-x) > .ps__rail-x:not(:hover):not(:focus) {opacity: 0;}.hi-v4-scrollbar > .ps__rail-y,.hi-v4-scrollbar > .ps__rail-x {z-index: var(--scrollbar-zIndex);}";
34
34
  __styleInject____default["default"](css_248z);
35
35
  exports["default"] = css_248z;
package/lib/cjs/use-table.js CHANGED
@@ -87,7 +87,9 @@ var useTable = function useTable(_a) {
87
87
  fieldKey = _a$fieldKey === void 0 ? 'key' : _a$fieldKey,
88
88
  virtual = _a.virtual,
89
89
  scrollbar = _a.scrollbar,
90
- rootProps = tslib.__rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar"]);
90
+ rowClassName = _a.rowClassName,
91
+ cellClassName = _a.cellClassName,
92
+ rootProps = tslib.__rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar", "rowClassName", "cellClassName"]);
91
93
  /**
92
94
  * 获取 key 字段值
93
95
  */
@@ -566,7 +568,9 @@ var useTable = function useTable(_a) {
566
568
  showColMenu: showColMenu,
567
569
  onLoadChildren: onLoadChildren,
568
570
  setHeaderTableElement: setHeaderTableElement,
569
- scrollbar: scrollbar
571
+ scrollbar: scrollbar,
572
+ rowClassName: rowClassName,
573
+ cellClassName: cellClassName
570
574
  });
571
575
  };
572
576
  exports.useTable = useTable;
package/lib/esm/TableRow.js CHANGED
@@ -24,6 +24,7 @@ var EMBED_ON_ROW_PROPS = {};
24
24
  var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
25
25
  var _ref$prefixCls = _ref.prefixCls,
26
26
  prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
27
+ className = _ref.className,
27
28
  rowDataProp = _ref.rowData,
28
29
  rowIndex = _ref.rowIndex,
29
30
  expandedTree = _ref.expandedTree,
@@ -46,7 +47,8 @@ var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
46
47
  dragRowRef = _useTableContext.dragRowRef,
47
48
  onRow = _useTableContext.onRow,
48
49
  colWidths = _useTableContext.colWidths,
49
- virtual = _useTableContext.virtual;
50
+ virtual = _useTableContext.virtual,
51
+ cellClassName = _useTableContext.cellClassName;
50
52
  var rowData = rowDataProp.raw,
51
53
  rowId = rowDataProp.id;
52
54
  // ** ************** 拖拽管理 *************** *//
@@ -132,7 +134,7 @@ var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
132
134
  // ** ************** 行状态管理 *************** *//
133
135
  var highlighted = isHighlightedRow(rowId);
134
136
  var hasError = isErrorRow(rowId);
135
- var cls = cx(prefixCls + "-row", showRowHighlight && prefixCls + "-row--hover", striped && (rowIndex & 1) === 1 && prefixCls + "-row--striped", hasError && prefixCls + "-row--error", highlighted && prefixCls + "-row--highlight", draggable && prefixCls + "-row--draggable", draggable && dragging && prefixCls + "-row--dragging", draggable && dragDirection && prefixCls + "-row--drag-" + dragDirection, isSumRow && prefixCls + "-row--total", isAvgRow && prefixCls + "-row--avg", virtual && prefixCls + "-row--virtual");
137
+ var cls = cx(prefixCls + "-row", showRowHighlight && prefixCls + "-row--hover", striped && (rowIndex & 1) === 1 && prefixCls + "-row--striped", hasError && prefixCls + "-row--error", highlighted && prefixCls + "-row--highlight", draggable && prefixCls + "-row--draggable", draggable && dragging && prefixCls + "-row--dragging", draggable && dragDirection && prefixCls + "-row--drag-" + dragDirection, isSumRow && prefixCls + "-row--total", isAvgRow && prefixCls + "-row--avg", virtual && prefixCls + "-row--virtual", className);
136
138
  var firstColumn = flattedColumnsWithoutChildren.find(function (item) {
137
139
  return item.dataKey !== SELECTION_DATA_KEY && item.dataKey !== EMBED_DATA_KEY;
138
140
  });
@@ -191,6 +193,7 @@ var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
191
193
  }), flattedColumnsWithoutChildren.map(function (column, idx) {
192
194
  return /*#__PURE__*/React__default.createElement(TableCell, {
193
195
  key: idx,
196
+ className: cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(rowDataProp, column, idx),
194
197
  column: column,
195
198
  isSwitcherCol: firstColumn ? firstColumn.id === column.id : false,
196
199
  rowData: rowDataProp,
package/lib/esm/TbodyContent.js CHANGED
@@ -29,7 +29,8 @@ var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
29
29
  avgRow = _useTableContext.avgRow,
30
30
  hasSumColumn = _useTableContext.hasSumColumn,
31
31
  sumRow = _useTableContext.sumRow,
32
- measureRowElementRef = _useTableContext.measureRowElementRef;
32
+ measureRowElementRef = _useTableContext.measureRowElementRef,
33
+ rowClassName = _useTableContext.rowClassName;
33
34
  var getRequiredProps = useLatestCallback(function (id) {
34
35
  return {
35
36
  // @ts-ignore
@@ -47,6 +48,7 @@ var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
47
48
  ref: index === 0 ? measureRowElementRef : null,
48
49
  // key={depth + index}
49
50
  key: row.id,
51
+ className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index),
50
52
  // @ts-ignore
51
53
  rowIndex: index,
52
54
  rowData: row
package/lib/esm/hooks/use-col-width.js CHANGED
@@ -15,6 +15,8 @@ var useColWidth = function useColWidth(_ref) {
15
15
  columns = _ref.columns,
16
16
  virtual = _ref.virtual;
17
17
  var measureRowElementRef = React__default.useRef(null);
18
+ // 是否重新设置过表格每列宽度
19
+ var hasResetWidths = React__default.useRef(false);
18
20
  var _React$useState = React__default.useState(function () {
19
21
  return getGroupItemWidth(columns);
20
22
  }),
@@ -47,7 +49,7 @@ var useColWidth = function useColWidth(_ref) {
47
49
  }, [columns]);
48
50
  useUpdateEffect(function () {
49
51
  if (virtual) {
50
- // 虚拟滚动的计算需要根据容器来做分配，不能使用没有witdh默认设置为0的方式来做表格平均分配
52
+ // 虚拟滚动的计算需要根据容器来做分配，不能使用没有width默认设置为0的方式来做表格平均分配
51
53
  setColWidths(getVirtualWidths());
52
54
  }
53
55
  }, [getVirtualWidths, virtual]);
@@ -63,24 +65,51 @@ var useColWidth = function useColWidth(_ref) {
63
65
  var _resizeObserver = new ResizeObserver(function () {
64
66
  if (virtual) {
65
67
  setColWidths(getVirtualWidths());
68
+ } else {
69
+ // 当第一行有内容时并且没有重新设置列宽时，在去设置列宽
70
+ // todo 临时方案：hasResetWidths.current 作用是防止某些浏览器下，下面逻辑死循环
71
+ if ((measureRowElement === null || measureRowElement === void 0 ? void 0 : measureRowElement.childNodes) && hasResetWidths.current === false) {
72
+ hasResetWidths.current = true;
73
+ // 超出的宽度，真实的表格宽度超出的每列总和的宽度
74
+ var exceedWidth = 0;
75
+ var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index) {
76
+ var _a;
77
+ var realWidth = node.getBoundingClientRect().width || 0;
78
+ var _ref2 = (_a = columns[index]) !== null && _a !== void 0 ? _a : {},
79
+ width = _ref2.width,
80
+ fixed = _ref2.fixed;
81
+ // 如果该列设置了 fixed 并且真实宽度大于设置的 width 则设置为 width
82
+ if (fixed && width && width < realWidth) {
83
+ exceedWidth += realWidth - width;
84
+ return width;
85
+ }
86
+ return realWidth;
87
+ });
88
+ // 如果有多余的宽度，则将多余的宽度平分到没有设置 maxWidth 的列上
89
+ if (exceedWidth > 0) {
90
+ var noFixedColumns = columns.filter(function (item) {
91
+ return !item.fixed;
92
+ });
93
+ _realColumnsWidth.map(function (item, index) {
94
+ if (!columns[index].fixed) {
95
+ return item + Math.floor(exceedWidth / noFixedColumns.length);
96
+ }
97
+ return item;
98
+ });
99
+ }
100
+ if (_realColumnsWidth.some(function (width) {
101
+ return width && width > 0;
102
+ })) {
103
+ setColWidths(_realColumnsWidth);
104
+ }
105
+ }
66
106
  }
67
- // else {
68
- // if (measureRowElement.childNodes) {
69
- // const _realColumnsWidth = Array.from(measureRowElement.childNodes).map((node) => {
70
- // return (node as HTMLElement).getBoundingClientRect().width || 0
71
- // })
72
- // if (_realColumnsWidth.some((width) => width && width > 0)) {
73
- // setColWidths(_realColumnsWidth)
74
- // }
75
- // }
76
- // }
77
107
  });
78
-
79
108
  _resizeObserver.observe(measureRowElement);
80
109
  }
81
110
  return function () {};
82
111
  // 测量元素在内容列为空时会是空，切换会使测量元素变化，导致后续的resize时间无法响应,此处测量元素变化时需要重新绑定
83
- }, [getVirtualWidths, virtual]);
112
+ }, [columns, getVirtualWidths, virtual]);
84
113
  var _React$useState2 = React__default.useState(null),
85
114
  headerTableElement = _React$useState2[0],
86
115
  setHeaderTableElement = _React$useState2[1];
@@ -106,8 +135,8 @@ var useColWidth = function useColWidth(_ref) {
106
135
  /**
107
136
  * 列宽拖拽 resize，只处理拖拽线两边的列宽度
108
137
  */
109
- var onColumnResizable = React__default.useCallback(function (_, _ref2, index) {
110
- var size = _ref2.size;
138
+ var onColumnResizable = React__default.useCallback(function (_, _ref3, index) {
139
+ var size = _ref3.size;
111
140
  var minWidth = minColWidth[index];
112
141
  var anotherMinWidth = minColWidth[index + 1];
113
142
  var nextWidth = size.width > minWidth ? size.width : minWidth;
package/lib/esm/packages/ui/scrollbar/lib/esm/Scrollbar.js CHANGED
@@ -42,8 +42,9 @@ var Scrollbar = /*#__PURE__*/forwardRef(function (_a, ref) {
42
42
  className = _a.className,
43
43
  children = _a.children,
44
44
  style = _a.style,
45
+ zIndex = _a.zIndex,
45
46
  innerRef = _a.innerRef,
46
- rest = __rest(_a, ["prefixCls", "role", "position", "axes", "keepVisible", "onlyScrollVisible", "className", "children", "style", "innerRef"]);
47
+ rest = __rest(_a, ["prefixCls", "role", "position", "axes", "keepVisible", "onlyScrollVisible", "className", "children", "style", "zIndex", "innerRef"]);
47
48
  var cls = cx(prefixCls, className, 'priority', (_cx = {}, _cx[prefixCls + "--keep-visible"] = keepVisible, _cx[prefixCls + "--only-scroll-visible"] = !keepVisible && onlyScrollVisible, _cx));
48
49
  var _useState = useState(undefined),
49
50
  ps = _useState[0],
@@ -58,8 +59,10 @@ var Scrollbar = /*#__PURE__*/forwardRef(function (_a, ref) {
58
59
  useEffect(function () {
59
60
  if (containerElement) {
60
61
  setPs(new PerfectScrollbar(containerElement));
62
+ // 动态设置滚动条 z-index
63
+ zIndex && containerElement.style.setProperty('--scrollbar-zIndex', String(zIndex));
61
64
  }
62
- }, [containerElement]);
65
+ }, [containerElement, zIndex]);
63
66
  // 轴定制
64
67
  useEffect(function () {
65
68
  if (ps) {
package/lib/esm/packages/ui/scrollbar/lib/esm/styles/index.scss.js CHANGED
@@ -18,6 +18,6 @@ import __styleInject__ from 'style-inject';
18
18
  * This source code is licensed under the MIT license found in the
19
19
  * LICENSE file in the root directory of this source tree.
20
20
  */
21
- var css_248z = "/** Container style*/.ps {overflow: hidden !important;overflow-anchor: none;-ms-overflow-style: none;touch-action: auto;-ms-touch-action: auto;}/** Scrollbar rail styles*/.ps__rail-x {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;height: 15px;/* there must be 'bottom' or 'top' for ps__rail-x */bottom: 0px;/* please don't change 'position' */position: absolute;}.ps__rail-y {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;width: 15px;/* there must be 'right' or 'left' for ps__rail-y */right: 0;/* please don't change 'position' */position: absolute;}.ps--active-x > .ps__rail-x,.ps--active-y > .ps__rail-y {display: block;background-color: transparent;}.ps:hover > .ps__rail-x,.ps:hover > .ps__rail-y,.ps--focus > .ps__rail-x,.ps--focus > .ps__rail-y,.ps--scrolling-x > .ps__rail-x,.ps--scrolling-y > .ps__rail-y {opacity: 0.6;}.ps .ps__rail-x:hover,.ps .ps__rail-y:hover,.ps .ps__rail-x:focus,.ps .ps__rail-y:focus,.ps .ps__rail-x.ps--clicking,.ps .ps__rail-y.ps--clicking {background-color: #eee;opacity: 0.9;}/** Scrollbar thumb styles*/.ps__thumb-x {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, height 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;height: 6px;/* there must be 'bottom' for ps__thumb-x */bottom: 2px;/* please don't change 'position' */position: absolute;}.ps__thumb-y {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, width 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;width: 6px;/* there must be 'right' for ps__thumb-y */right: 2px;/* please don't change 'position' */position: absolute;}.ps__rail-x:hover > .ps__thumb-x,.ps__rail-x:focus > .ps__thumb-x,.ps__rail-x.ps--clicking .ps__thumb-x {background-color: #999;height: 11px;}.ps__rail-y:hover > .ps__thumb-y,.ps__rail-y:focus > .ps__thumb-y,.ps__rail-y.ps--clicking .ps__thumb-y {background-color: #999;width: 11px;}/* MS supports */@supports (-ms-overflow-style: none) {.ps {overflow: auto !important;}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {.ps {overflow: auto !important;}}.hi-v4-scrollbar {overflow: hidden;width: 100%;height: 100%;}.hi-v4-scrollbar__wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;min-width: 100%;min-height: 100%;}.hi-v4-scrollbar--keep-visible.priority > .ps__rail-y, .hi-v4-scrollbar--keep-visible.priority > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar--keep-visible.priority .ps__thumb-y,.hi-v4-scrollbar--keep-visible.priority .ps__thumb-x {background-color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-scrollbar.priority:hover > .ps__rail-y, .hi-v4-scrollbar.priority:hover > .ps__rail-x, .hi-v4-scrollbar.priority:focus > .ps__rail-y, .hi-v4-scrollbar.priority:focus > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y,.hi-v4-scrollbar.priority .ps__thumb-y {width: 8px;border-radius: 4px;right: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-y:hover, .hi-v4-scrollbar.priority > .ps__rail-y:focus, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking {width: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y:hover .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y:focus .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking .ps__thumb-y {width: 8px;right: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar.priority > .ps__rail-x,.hi-v4-scrollbar.priority .ps__thumb-x {height: 8px;border-radius: 4px;bottom: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-x:hover, .hi-v4-scrollbar.priority > .ps__rail-x:focus, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking {height: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-x:hover .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x:focus .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking .ps__thumb-x {height: 8px;bottom: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-y) > .ps__rail-y:not(:hover):not(:focus), .hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-x) > .ps__rail-x:not(:hover):not(:focus) {opacity: 0;}";
21
+ var css_248z = "/** Container style*/.ps {overflow: hidden !important;overflow-anchor: none;-ms-overflow-style: none;touch-action: auto;-ms-touch-action: auto;}/** Scrollbar rail styles*/.ps__rail-x {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;height: 15px;/* there must be 'bottom' or 'top' for ps__rail-x */bottom: 0px;/* please don't change 'position' */position: absolute;}.ps__rail-y {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;width: 15px;/* there must be 'right' or 'left' for ps__rail-y */right: 0;/* please don't change 'position' */position: absolute;}.ps--active-x > .ps__rail-x,.ps--active-y > .ps__rail-y {display: block;background-color: transparent;}.ps:hover > .ps__rail-x,.ps:hover > .ps__rail-y,.ps--focus > .ps__rail-x,.ps--focus > .ps__rail-y,.ps--scrolling-x > .ps__rail-x,.ps--scrolling-y > .ps__rail-y {opacity: 0.6;}.ps .ps__rail-x:hover,.ps .ps__rail-y:hover,.ps .ps__rail-x:focus,.ps .ps__rail-y:focus,.ps .ps__rail-x.ps--clicking,.ps .ps__rail-y.ps--clicking {background-color: #eee;opacity: 0.9;}/** Scrollbar thumb styles*/.ps__thumb-x {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, height 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;height: 6px;/* there must be 'bottom' for ps__thumb-x */bottom: 2px;/* please don't change 'position' */position: absolute;}.ps__thumb-y {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, width 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;width: 6px;/* there must be 'right' for ps__thumb-y */right: 2px;/* please don't change 'position' */position: absolute;}.ps__rail-x:hover > .ps__thumb-x,.ps__rail-x:focus > .ps__thumb-x,.ps__rail-x.ps--clicking .ps__thumb-x {background-color: #999;height: 11px;}.ps__rail-y:hover > .ps__thumb-y,.ps__rail-y:focus > .ps__thumb-y,.ps__rail-y.ps--clicking .ps__thumb-y {background-color: #999;width: 11px;}/* MS supports */@supports (-ms-overflow-style: none) {.ps {overflow: auto !important;}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {.ps {overflow: auto !important;}}.hi-v4-scrollbar {--scrollbar-zIndex: \"auto\";overflow: hidden;width: 100%;height: 100%;}.hi-v4-scrollbar__wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;min-width: 100%;min-height: 100%;}.hi-v4-scrollbar--keep-visible.priority > .ps__rail-y, .hi-v4-scrollbar--keep-visible.priority > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar--keep-visible.priority .ps__thumb-y,.hi-v4-scrollbar--keep-visible.priority .ps__thumb-x {background-color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-scrollbar.priority:hover > .ps__rail-y, .hi-v4-scrollbar.priority:hover > .ps__rail-x, .hi-v4-scrollbar.priority:focus > .ps__rail-y, .hi-v4-scrollbar.priority:focus > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y,.hi-v4-scrollbar.priority .ps__thumb-y {width: 8px;border-radius: 4px;right: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-y:hover, .hi-v4-scrollbar.priority > .ps__rail-y:focus, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking {width: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y:hover .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y:focus .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking .ps__thumb-y {width: 8px;right: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar.priority > .ps__rail-x,.hi-v4-scrollbar.priority .ps__thumb-x {height: 8px;border-radius: 4px;bottom: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-x:hover, .hi-v4-scrollbar.priority > .ps__rail-x:focus, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking {height: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-x:hover .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x:focus .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking .ps__thumb-x {height: 8px;bottom: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-y) > .ps__rail-y:not(:hover):not(:focus), .hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-x) > .ps__rail-x:not(:hover):not(:focus) {opacity: 0;}.hi-v4-scrollbar > .ps__rail-y,.hi-v4-scrollbar > .ps__rail-x {z-index: var(--scrollbar-zIndex);}";
22
22
  __styleInject__(css_248z);
23
23
  export { css_248z as default };
package/lib/esm/use-table.js CHANGED
@@ -75,7 +75,9 @@ var useTable = function useTable(_a) {
75
75
  fieldKey = _a$fieldKey === void 0 ? 'key' : _a$fieldKey,
76
76
  virtual = _a.virtual,
77
77
  scrollbar = _a.scrollbar,
78
- rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar"]);
78
+ rowClassName = _a.rowClassName,
79
+ cellClassName = _a.cellClassName,
80
+ rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar", "rowClassName", "cellClassName"]);
79
81
  /**
80
82
  * 获取 key 字段值
81
83
  */
@@ -554,7 +556,9 @@ var useTable = function useTable(_a) {
554
556
  showColMenu: showColMenu,
555
557
  onLoadChildren: onLoadChildren,
556
558
  setHeaderTableElement: setHeaderTableElement,
557
- scrollbar: scrollbar
559
+ scrollbar: scrollbar,
560
+ rowClassName: rowClassName,
561
+ cellClassName: cellClassName
558
562
  });
559
563
  };
560
564
  export { useTable };
package/lib/types/TableRow.d.ts CHANGED
@@ -6,6 +6,10 @@ export interface TableRowProps {
6
6
  * 组件默认的选择器类
7
7
  */
8
8
  prefixCls?: string;
9
+ /**
10
+ * 样式类名
11
+ */
12
+ className?: string;
9
13
  /**
10
14
  * 是否为总计行
11
15
  */
package/lib/types/context.d.ts CHANGED
@@ -42,6 +42,8 @@ export declare const TableProvider: import("react").Provider<(Omit<{
42
42
  onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
43
43
  setHeaderTableElement: import("react").Dispatch<import("react").SetStateAction<HTMLTableRowElement | null>>;
44
44
  scrollbar: boolean | import("packages/ui/scrollbar/lib/types").ScrollbarProps | undefined;
45
+ rowClassName: ((record: Record<string, any>, index: number) => string) | undefined;
46
+ cellClassName: ((record: Record<string, any>, column: Record<string, any>, index: number) => string) | undefined;
45
47
  scrollLeft: number;
46
48
  scrollRight: number;
47
49
  measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
@@ -150,6 +152,8 @@ export declare const useTableContext: () => Omit<{
150
152
  onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
151
153
  setHeaderTableElement: import("react").Dispatch<import("react").SetStateAction<HTMLTableRowElement | null>>;
152
154
  scrollbar: boolean | import("packages/ui/scrollbar/lib/types").ScrollbarProps | undefined;
155
+ rowClassName: ((record: Record<string, any>, index: number) => string) | undefined;
156
+ cellClassName: ((record: Record<string, any>, column: Record<string, any>, index: number) => string) | undefined;
153
157
  scrollLeft: number;
154
158
  scrollRight: number;
155
159
  measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
package/lib/types/types.d.ts CHANGED
@@ -92,6 +92,10 @@ export declare type TableColumnItem = {
92
92
  * 该列宽度
93
93
  */
94
94
  width?: number;
95
+ /**
96
+ * 是否固定列宽，使用场景：设置 width 后，当所有列宽总和小于表格宽度时，多的宽度会分摊到每一列上，设置 fixed 后该列不会参与多余宽度均分。
97
+ */
98
+ fixed?: boolean;
95
99
  /**
96
100
  * 列对齐方式
97
101
  */
package/lib/types/use-table.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { PaginationProps } from '@hi-ui/pagination';
3
3
  import { ScrollbarProps } from '@hi-ui/scrollbar';
4
4
  import { TableColumnItem, TableFrozenColumnOptions, TableRowEventData, TableRowSelection, FlattedTableColumnItemData, FlattedTableRowData } from './types';
5
- export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColumn, fixedToColumn: fixedToColumnProp, onFixedToColumn, scrollWidth, resizable, errorRowKeys, highlightedColKeys: highlightedColKeysProp, highlightedRowKeys: highlightedRowKeysProp, showColHighlight, showRowHighlight, highlightRowOnDoubleClick, defaultExpandedRowKeys, expandedRowKeys: expandRowKeysProp, onExpand, defaultExpandAll, onLoadChildren, maxHeight, sticky, stickyTop, draggable, onDragStart, onDrop: onDropProp, onDropEnd, showColMenu, rowSelection, cellRender, footerRender, fieldKey, virtual, scrollbar, ...rootProps }: UseTableProps) => {
5
+ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColumn, fixedToColumn: fixedToColumnProp, onFixedToColumn, scrollWidth, resizable, errorRowKeys, highlightedColKeys: highlightedColKeysProp, highlightedRowKeys: highlightedRowKeysProp, showColHighlight, showRowHighlight, highlightRowOnDoubleClick, defaultExpandedRowKeys, expandedRowKeys: expandRowKeysProp, onExpand, defaultExpandAll, onLoadChildren, maxHeight, sticky, stickyTop, draggable, onDragStart, onDrop: onDropProp, onDropEnd, showColMenu, rowSelection, cellRender, footerRender, fieldKey, virtual, scrollbar, rowClassName, cellClassName, ...rootProps }: UseTableProps) => {
6
6
  getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
7
7
  style: {
8
8
  width: number | undefined;
@@ -44,6 +44,8 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
44
44
  onLoadChildren: ((item: TableRowEventData) => Promise<any[] | void> | void) | undefined;
45
45
  setHeaderTableElement: React.Dispatch<React.SetStateAction<HTMLTableRowElement | null>>;
46
46
  scrollbar: boolean | ScrollbarProps | undefined;
47
+ rowClassName: ((record: Record<string, any>, index: number) => string) | undefined;
48
+ cellClassName: ((record: Record<string, any>, column: Record<string, any>, index: number) => string) | undefined;
47
49
  scrollLeft: number;
48
50
  scrollRight: number;
49
51
  measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
@@ -279,5 +281,13 @@ export interface UseTableProps {
279
281
  * 配置滚动条，滚动条样式使用HiUI自带的滚动条风格
280
282
  */
281
283
  scrollbar?: boolean | ScrollbarProps;
284
+ /**
285
+ * 设置行类名
286
+ */
287
+ rowClassName?: (record: Record<string, any>, index: number) => string;
288
+ /**
289
+ * 设置单元格类名
290
+ */
291
+ cellClassName?: (record: Record<string, any>, column: Record<string, any>, index: number) => string;
282
292
  }
283
293
  export declare type UseTableReturn = ReturnType<typeof useTable>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/table",
3
- "version": "4.3.3",
3
+ "version": "4.4.0-alpha.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -43,46 +43,46 @@
43
43
  "url": "https://github.com/XiaoMi/hiui/issues"
44
44
  },
45
45
  "dependencies": {
46
- "@hi-ui/array-utils": "^4.0.3",
47
- "@hi-ui/button": "^4.0.8",
48
- "@hi-ui/checkbox": "^4.0.7",
49
- "@hi-ui/classname": "^4.0.3",
50
- "@hi-ui/dom-utils": "^4.0.6",
51
- "@hi-ui/drawer": "^4.1.2",
52
- "@hi-ui/empty-state": "^4.0.6",
53
- "@hi-ui/env": "^4.0.3",
54
- "@hi-ui/func-utils": "^4.0.3",
55
- "@hi-ui/icon-button": "^4.0.7",
56
- "@hi-ui/icons": "^4.0.17",
57
- "@hi-ui/loading": "^4.1.2",
58
- "@hi-ui/object-utils": "^4.0.3",
59
- "@hi-ui/pagination": "^4.0.13",
60
- "@hi-ui/popper": "^4.1.2",
61
- "@hi-ui/react-utils": "^4.0.3",
62
- "@hi-ui/select": "^4.2.4",
63
- "@hi-ui/spinner": "^4.0.7",
64
- "@hi-ui/times": "^4.0.3",
65
- "@hi-ui/tree-utils": "^4.1.3",
66
- "@hi-ui/type-assertion": "^4.0.3",
67
- "@hi-ui/use-cache": "^4.0.3",
68
- "@hi-ui/use-check": "^4.0.4",
69
- "@hi-ui/use-check-state": "^4.0.3",
70
- "@hi-ui/use-drag-sorter": "^4.0.3",
71
- "@hi-ui/use-latest": "^4.0.3",
72
- "@hi-ui/use-toggle": "^4.0.3",
73
- "@hi-ui/use-uncontrolled-state": "^4.0.3",
74
- "@hi-ui/use-update-effect": "^4.0.3",
46
+ "@hi-ui/array-utils": "^4.0.4",
47
+ "@hi-ui/button": "^4.0.9",
48
+ "@hi-ui/checkbox": "^4.0.8",
49
+ "@hi-ui/classname": "^4.0.4",
50
+ "@hi-ui/dom-utils": "^4.0.7",
51
+ "@hi-ui/drawer": "^4.1.3",
52
+ "@hi-ui/empty-state": "^4.0.7",
53
+ "@hi-ui/env": "^4.0.4",
54
+ "@hi-ui/func-utils": "^4.0.4",
55
+ "@hi-ui/icon-button": "^4.0.8",
56
+ "@hi-ui/icons": "^4.0.18",
57
+ "@hi-ui/loading": "^4.1.3",
58
+ "@hi-ui/object-utils": "^4.0.4",
59
+ "@hi-ui/pagination": "^4.0.14",
60
+ "@hi-ui/popper": "^4.1.3",
61
+ "@hi-ui/react-utils": "^4.0.4",
62
+ "@hi-ui/select": "^4.2.5",
63
+ "@hi-ui/spinner": "^4.0.8",
64
+ "@hi-ui/times": "^4.0.4",
65
+ "@hi-ui/tree-utils": "^4.1.4",
66
+ "@hi-ui/type-assertion": "^4.0.4",
67
+ "@hi-ui/use-cache": "^4.0.4",
68
+ "@hi-ui/use-check": "^4.0.5",
69
+ "@hi-ui/use-check-state": "^4.0.4",
70
+ "@hi-ui/use-drag-sorter": "^4.0.4",
71
+ "@hi-ui/use-latest": "^4.0.4",
72
+ "@hi-ui/use-toggle": "^4.0.4",
73
+ "@hi-ui/use-uncontrolled-state": "^4.0.4",
74
+ "@hi-ui/use-update-effect": "^4.0.4",
75
75
  "axios": "^1.5.0",
76
76
  "react-resizable": "^3.0.4"
77
77
  },
78
78
  "peerDependencies": {
79
- "@hi-ui/core": ">=4.0.7",
79
+ "@hi-ui/core": ">=4.0.8",
80
80
  "react": ">=16.8.6",
81
81
  "react-dom": ">=16.8.6"
82
82
  },
83
83
  "devDependencies": {
84
- "@hi-ui/core": "^4.0.7",
85
- "@hi-ui/core-css": "^4.1.4",
84
+ "@hi-ui/core": "^4.0.8",
85
+ "@hi-ui/core-css": "^4.1.5",
86
86
  "@types/react-resizable": "^1.7.4",
87
87
  "react": "^17.0.1",
88
88
  "react-dom": "^17.0.1"