@hi-ui/table 4.2.0 → 4.3.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 (29) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/lib/cjs/BaseTable.js +127 -71
  3. package/lib/cjs/ColGroupContent.js +56 -0
  4. package/lib/cjs/Table.js +14 -3
  5. package/lib/cjs/TableBody.js +6 -64
  6. package/lib/cjs/TableHeader.js +5 -71
  7. package/lib/cjs/TbodyContent.js +129 -0
  8. package/lib/cjs/TheadContent.js +120 -0
  9. package/lib/cjs/hooks/use-col-width.js +27 -22
  10. package/lib/cjs/styles/index.scss.js +1 -1
  11. package/lib/cjs/use-table.js +25 -11
  12. package/lib/esm/BaseTable.js +124 -71
  13. package/lib/esm/ColGroupContent.js +37 -0
  14. package/lib/esm/Table.js +14 -3
  15. package/lib/esm/TableBody.js +3 -62
  16. package/lib/esm/TableHeader.js +5 -69
  17. package/lib/esm/TbodyContent.js +105 -0
  18. package/lib/esm/TheadContent.js +96 -0
  19. package/lib/esm/hooks/use-col-width.js +27 -22
  20. package/lib/esm/styles/index.scss.js +1 -1
  21. package/lib/esm/use-table.js +25 -11
  22. package/lib/types/BaseTable.d.ts +4 -0
  23. package/lib/types/ColGroupContent.d.ts +8 -0
  24. package/lib/types/TbodyContent.d.ts +18 -0
  25. package/lib/types/TheadContent.d.ts +9 -0
  26. package/lib/types/context.d.ts +12 -8
  27. package/lib/types/hooks/use-col-width.d.ts +1 -1
  28. package/lib/types/use-table.d.ts +11 -5
  29. package/package.json +2 -2
package/lib/esm/TheadContent.js ADDED
@@ -0,0 +1,96 @@
1
+ /** @LICENSE
2
+ * @hi-ui/table
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
4
+ *
5
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ import { __rest } from 'tslib';
11
+ import React__default, { forwardRef } from 'react';
12
+ import { Resizable } from 'react-resizable';
13
+ import { getPrefixCls, cx } from '@hi-ui/classname';
14
+ import { __DEV__ } from '@hi-ui/env';
15
+ import { isFunction } from '@hi-ui/type-assertion';
16
+ import { useCheckState } from '@hi-ui/use-check-state';
17
+ import { useTableContext } from './context.js';
18
+ import { renderFilter } from './TableAdvancedFilter.js';
19
+
20
+ var _prefix = getPrefixCls('table-header');
21
+
22
+ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
23
+ var _a$prefixCls = _a.prefixCls,
24
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
25
+ rest = __rest(_a, ["prefixCls"]);
26
+
27
+ var _useTableContext = useTableContext(),
28
+ groupedColumns = _useTableContext.groupedColumns,
29
+ resizable = _useTableContext.resizable,
30
+ colWidths = _useTableContext.colWidths,
31
+ isHoveredHighlightCol = _useTableContext.isHoveredHighlightCol,
32
+ isHighlightedCol = _useTableContext.isHighlightedCol,
33
+ onColumnResizable = _useTableContext.onColumnResizable,
34
+ getStickyColProps = _useTableContext.getStickyColProps,
35
+ showColMenu = _useTableContext.showColMenu,
36
+ setHeaderTableElement = _useTableContext.setHeaderTableElement;
37
+
38
+ var activeColumnKeysAction = useCheckState();
39
+ return /*#__PURE__*/React__default.createElement("thead", Object.assign({}, rest), groupedColumns.map(function (cols, colsIndex) {
40
+ return /*#__PURE__*/React__default.createElement("tr", {
41
+ key: colsIndex,
42
+ ref: setHeaderTableElement
43
+ }, cols.map(function (col, colIndex) {
44
+ var _ref = col || {},
45
+ dataKey = _ref.dataKey,
46
+ title = _ref.title,
47
+ raw = _ref.raw;
48
+
49
+ var titleContent = isFunction(title) ? title(col) : title;
50
+ titleContent = resizable ? /*#__PURE__*/React__default.createElement("span", {
51
+ className: prefixCls + "-header__title"
52
+ }, titleContent) : titleContent;
53
+ var cell = /*#__PURE__*/React__default.createElement("th", Object.assign({
54
+ key: dataKey
55
+ }, getStickyColProps(col), {
56
+ className: cx(prefixCls + "-cell", raw.className, isHighlightedCol(dataKey) && prefixCls + "-cell__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "-cell__col--hovered-highlight", activeColumnKeysAction.has(dataKey) && prefixCls + "-cell__col--active"),
57
+ // @ts-ignore
58
+ colSpan: col.colSpan,
59
+ // @ts-ignore
60
+ rowSpan: col.rowSpan
61
+ }), titleContent, renderFilter({
62
+ prefixCls: prefixCls + "-filter",
63
+ columnKey: dataKey,
64
+ showColMenu: showColMenu,
65
+ column: col,
66
+ onOpen: function onOpen() {
67
+ return activeColumnKeysAction.add(dataKey);
68
+ },
69
+ onClose: function onClose() {
70
+ return activeColumnKeysAction.remove(dataKey);
71
+ }
72
+ }));
73
+ return resizable && colIndex !== colWidths.length - 1 ? /*#__PURE__*/React__default.createElement(Resizable, {
74
+ key: colIndex,
75
+ className: prefixCls + "__resizable",
76
+ draggableOpts: {
77
+ enableUserSelectHack: false
78
+ },
79
+ handle: /*#__PURE__*/React__default.createElement("span", {
80
+ className: prefixCls + "__resizable-handle"
81
+ }),
82
+ height: 0,
83
+ width: colWidths[colIndex],
84
+ onResize: function onResize(evt, options) {
85
+ onColumnResizable(evt, options, colIndex);
86
+ }
87
+ }, cell) : cell;
88
+ }));
89
+ }));
90
+ });
91
+
92
+ if (__DEV__) {
93
+ TheadContent.displayName = 'TheadContent';
94
+ }
95
+
96
+ export { TheadContent };
package/lib/esm/hooks/use-col-width.js CHANGED
@@ -12,7 +12,8 @@ import { getGroupItemWidth } from '../utils/index.js';
12
12
  import { useUpdateEffect } from '@hi-ui/use-update-effect';
13
13
 
14
14
  var useColWidth = function useColWidth(_ref) {
15
- var columns = _ref.columns,
15
+ var resizable = _ref.resizable,
16
+ columns = _ref.columns,
16
17
  virtual = _ref.virtual;
17
18
  var measureRowElementRef = React__default.useRef(null);
18
19
 
@@ -72,19 +73,17 @@ var useColWidth = function useColWidth(_ref) {
72
73
  var _resizeObserver = new ResizeObserver(function () {
73
74
  if (virtual) {
74
75
  setColWidths(getVirtualWidths());
75
- } else {
76
- if (measureRowElement.childNodes) {
77
- var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node) {
78
- return node.getBoundingClientRect().width || 0;
79
- });
80
-
81
- if (_realColumnsWidth.some(function (width) {
82
- return width && width > 0;
83
- })) {
84
- setColWidths(_realColumnsWidth);
85
- }
86
- }
87
- }
76
+ } // else {
77
+ // if (measureRowElement.childNodes) {
78
+ // const _realColumnsWidth = Array.from(measureRowElement.childNodes).map((node) => {
79
+ // return (node as HTMLElement).getBoundingClientRect().width || 0
80
+ // })
81
+ // if (_realColumnsWidth.some((width) => width && width > 0)) {
82
+ // setColWidths(_realColumnsWidth)
83
+ // }
84
+ // }
85
+ // }
86
+
88
87
  });
89
88
 
90
89
  _resizeObserver.observe(measureRowElement);
@@ -102,26 +101,32 @@ var useColWidth = function useColWidth(_ref) {
102
101
 
103
102
 
104
103
  var minColWidth = React__default.useMemo(function () {
105
- if (headerTableElement && headerTableElement.childNodes && headerTableElement.childNodes[1].childNodes[0]) {
106
- var _minColWidth = Array.from(headerTableElement.childNodes[1].childNodes[0].childNodes).map(function (th) {
107
- // @ts-ignore
108
- return th.childNodes[0].className === 'hi-table__header__title' ? // @ts-ignore
109
- th.childNodes[0].offsetWidth : 0;
104
+ if (resizable && headerTableElement) {
105
+ var resizableHandlerWidth = 4;
106
+
107
+ var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
108
+ var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
109
+ var childNodes = Array.from(th.childNodes);
110
+ return childNodes.map(function (child) {
111
+ return child.offsetWidth;
112
+ }).reduce(function (prev, next) {
113
+ return prev + next;
114
+ }) + thPaddingLeft * 2 + resizableHandlerWidth;
110
115
  });
111
116
 
112
117
  return _minColWidth;
113
118
  }
114
119
 
115
120
  return Array(columns.length).fill(0);
116
- }, [columns, headerTableElement]);
121
+ }, [columns.length, headerTableElement, resizable]);
117
122
  /**
118
123
  * 列宽拖拽 resize，只处理拖拽线两边的列宽度
119
124
  */
120
125
 
121
126
  var onColumnResizable = React__default.useCallback(function (_, _ref2, index) {
122
127
  var size = _ref2.size;
123
- var minWidth = minColWidth[index] + 31;
124
- var anotherMinWidth = minColWidth[index + 1] + 31;
128
+ var minWidth = minColWidth[index];
129
+ var anotherMinWidth = minColWidth[index + 1];
125
130
  var nextWidth = size.width > minWidth ? size.width : minWidth;
126
131
  setColWidths(function (prev) {
127
132
  var nextColWidths = [].concat(prev);
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,7 +8,7 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from 'style-inject';
11
- 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 table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--sticky {position: -webkit-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-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1;}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.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 {position: relative;overflow: auto;}.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;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);}.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-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-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__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-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__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-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;}";
11
+ 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 table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--sticky {position: -webkit-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-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1;}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.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-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;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);}.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-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-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__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-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__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-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;}";
12
12
 
13
13
  __styleInject__(css_248z);
14
14
 
package/lib/esm/use-table.js CHANGED
@@ -71,10 +71,11 @@ var useTable = function useTable(_a) {
71
71
  showColMenu = _a.showColMenu,
72
72
  rowSelection = _a.rowSelection,
73
73
  cellRender = _a.cellRender,
74
+ footerRender = _a.footerRender,
74
75
  _a$fieldKey = _a.fieldKey,
75
76
  fieldKey = _a$fieldKey === void 0 ? 'key' : _a$fieldKey,
76
77
  virtual = _a.virtual,
77
- 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", "fieldKey", "virtual"]);
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"]);
78
79
  /**
79
80
  * 获取 key 字段值
80
81
  */
@@ -186,7 +187,8 @@ var useTable = function useTable(_a) {
186
187
  measureRowElementRef = _useColWidth.measureRowElementRef,
187
188
  getColgroupProps = _useColWidth.getColgroupProps,
188
189
  onColumnResizable = _useColWidth.onColumnResizable,
189
- colWidths = _useColWidth.colWidths; // ************************ 列冻结 ************************ //
190
+ colWidths = _useColWidth.colWidths,
191
+ setHeaderTableElement = _useColWidth.setHeaderTableElement; // ************************ 列冻结 ************************ //
190
192
 
191
193
 
192
194
  var bodyTableRef = useRef(null);
@@ -217,6 +219,14 @@ var useTable = function useTable(_a) {
217
219
  }, [setFixedToColumn]);
218
220
 
219
221
  var _React$useMemo = React__default.useMemo(function () {
222
+ if (!leftFreezeColumn && !rightFreezeColumn) {
223
+ return {
224
+ leftFrozenColKeys: [],
225
+ rightFrozenColKeys: [],
226
+ columns: mergedColumns2
227
+ };
228
+ }
229
+
220
230
  var leftFrozenColKey = leftFreezeColumn;
221
231
  var rightFrozenKey = rightFreezeColumn; // 获取左右冻结列的下标
222
232
  // 获取左右冻结列的下标
@@ -435,16 +445,18 @@ var useTable = function useTable(_a) {
435
445
  return !isArrayNonEmpty(col.children);
436
446
  });
437
447
  }, [mergedColumns1]);
438
- var groupedColumns = mergedColumns1.reduce(function (acc, cur) {
439
- var depth = cur.depth;
448
+ var groupedColumns = React__default.useMemo(function () {
449
+ return mergedColumns1.reduce(function (acc, cur) {
450
+ var depth = cur.depth;
440
451
 
441
- if (!acc[depth]) {
442
- acc[depth] = [];
443
- }
452
+ if (!acc[depth]) {
453
+ acc[depth] = [];
454
+ }
444
455
 
445
- acc[depth].push(cur);
446
- return acc;
447
- }, []);
456
+ acc[depth].push(cur);
457
+ return acc;
458
+ }, []);
459
+ }, [mergedColumns1]);
448
460
  var getStickyColProps = useLatestCallback(function (column) {
449
461
  var rightStickyWidth = column.rightStickyWidth,
450
462
  leftStickyWidth = column.leftStickyWidth,
@@ -593,8 +605,10 @@ var useTable = function useTable(_a) {
593
605
  onColumnResizable: onColumnResizable,
594
606
  isTree: isTreeView,
595
607
  cellRender: cellRender,
608
+ footerRender: footerRender,
596
609
  showColMenu: showColMenu,
597
- onLoadChildren: onLoadChildren
610
+ onLoadChildren: onLoadChildren,
611
+ setHeaderTableElement: setHeaderTableElement
598
612
  });
599
613
  };
600
614
 
package/lib/types/BaseTable.d.ts CHANGED
@@ -43,4 +43,8 @@ export interface BaseTableProps extends Omit<HiBaseHTMLProps<'div'>, 'onDrop' |
43
43
  * 自定义冻结列触发展示行为
44
44
  */
45
45
  fixedColumnTrigger?: 'auto' | 'always';
46
+ /**
47
+ * 是否需要使用双表格
48
+ */
49
+ needDoubleTable?: boolean;
46
50
  }
package/lib/types/ColGroupContent.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ export declare const ColGroupContent: React.ForwardRefExoticComponent<TableColgroupProps & React.RefAttributes<HTMLTableColElement | null>>;
3
+ export interface TableColgroupProps {
4
+ /**
5
+ * 组件默认的选择器类
6
+ */
7
+ prefixCls?: string;
8
+ }
package/lib/types/TbodyContent.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { HiBaseHTMLProps } from '@hi-ui/core';
3
+ export declare const TbodyContent: React.ForwardRefExoticComponent<TbodyContentProps & React.RefAttributes<HTMLDivElement | null>>;
4
+ export interface TbodyContentProps extends HiBaseHTMLProps<'div'> {
5
+ /**
6
+ * 数据为空时的展示内容
7
+ */
8
+ emptyContent?: React.ReactNode;
9
+ }
10
+ /**
11
+ * 负责空状态渲染
12
+ */
13
+ export declare const renderEmptyContent: ({ className, colSpan, emptyContent, scrollBodyWidth, }: {
14
+ colSpan?: number | undefined;
15
+ className?: string | undefined;
16
+ emptyContent: React.ReactNode;
17
+ scrollBodyWidth?: string | number | undefined;
18
+ }) => JSX.Element;
package/lib/types/TheadContent.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { HiBaseHTMLProps } from '@hi-ui/core';
3
+ export declare const TheadContent: React.ForwardRefExoticComponent<TheadContentProps & React.RefAttributes<HTMLDivElement | null>>;
4
+ export interface TheadContentProps extends HiBaseHTMLProps<'thead'> {
5
+ /**
6
+ * 组件默认的选择器类
7
+ */
8
+ prefixCls?: string;
9
+ }
package/lib/types/context.d.ts CHANGED
@@ -37,8 +37,10 @@ export declare const TableProvider: import("react").Provider<(Omit<{
37
37
  onColumnResizable: (_: any, { size }: any, index: number) => void;
38
38
  isTree: boolean;
39
39
  cellRender: ((text: any) => import("react").ReactNode) | undefined;
40
+ footerRender: ((...nodes: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[]) => import("react").ReactNode) | undefined;
40
41
  showColMenu: boolean | undefined;
41
42
  onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
43
+ setHeaderTableElement: import("react").Dispatch<import("react").SetStateAction<HTMLTableRowElement | null>>;
42
44
  scrollLeft: number;
43
45
  scrollRight: number;
44
46
  measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
@@ -82,10 +84,10 @@ export declare const TableProvider: import("react").Provider<(Omit<{
82
84
  scrollLeft: number;
83
85
  scrollRight: number;
84
86
  };
85
- leftFrozenColKeys: any[];
86
- rightFrozenColKeys: any[];
87
- leftFixedColumnsWidth: number;
88
- rightFixedColumnsWidth: number;
87
+ leftFrozenColKeys: any[] | never[];
88
+ rightFrozenColKeys: any[] | never[];
89
+ leftFixedColumnsWidth: number | undefined;
90
+ rightFixedColumnsWidth: number | undefined;
89
91
  }, "rootProps"> & {
90
92
  embedExpandable: boolean | {
91
93
  rowExpandable: true | ((row: import("./types").TableColumnItem) => import("react").ReactNode);
@@ -142,8 +144,10 @@ export declare const useTableContext: () => Omit<{
142
144
  onColumnResizable: (_: any, { size }: any, index: number) => void;
143
145
  isTree: boolean;
144
146
  cellRender: ((text: any) => import("react").ReactNode) | undefined;
147
+ footerRender: ((...nodes: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[]) => import("react").ReactNode) | undefined;
145
148
  showColMenu: boolean | undefined;
146
149
  onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
150
+ setHeaderTableElement: import("react").Dispatch<import("react").SetStateAction<HTMLTableRowElement | null>>;
147
151
  scrollLeft: number;
148
152
  scrollRight: number;
149
153
  measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
@@ -187,10 +191,10 @@ export declare const useTableContext: () => Omit<{
187
191
  scrollLeft: number;
188
192
  scrollRight: number;
189
193
  };
190
- leftFrozenColKeys: any[];
191
- rightFrozenColKeys: any[];
192
- leftFixedColumnsWidth: number;
193
- rightFixedColumnsWidth: number;
194
+ leftFrozenColKeys: any[] | never[];
195
+ rightFrozenColKeys: any[] | never[];
196
+ leftFixedColumnsWidth: number | undefined;
197
+ rightFixedColumnsWidth: number | undefined;
194
198
  }, "rootProps"> & {
195
199
  embedExpandable: boolean | {
196
200
  rowExpandable: true | ((row: import("./types").TableColumnItem) => import("react").ReactNode);
package/lib/types/hooks/use-col-width.d.ts CHANGED
@@ -14,6 +14,6 @@ export declare const useColWidth: ({ resizable, data, columns, virtual, }: {
14
14
  minWidth: number | undefined;
15
15
  };
16
16
  };
17
- setHeaderTableElement: React.Dispatch<React.SetStateAction<HTMLTableElement | null>>;
17
+ setHeaderTableElement: React.Dispatch<React.SetStateAction<HTMLTableRowElement | null>>;
18
18
  colWidths: number[];
19
19
  };
package/lib/types/use-table.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { TableColumnItem, TableFrozenColumnOptions, TableRowEventData, TableRowSelection, FlattedTableColumnItemData, FlattedTableRowData } from './types';
3
3
  import { PaginationProps } from '@hi-ui/pagination';
4
- 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, fieldKey, virtual, ...rootProps }: UseTableProps) => {
4
+ 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, ...rootProps }: UseTableProps) => {
5
5
  getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
6
6
  style: {
7
7
  width: number | undefined;
@@ -38,8 +38,10 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
38
38
  onColumnResizable: (_: any, { size }: any, index: number) => void;
39
39
  isTree: boolean;
40
40
  cellRender: ((text: any) => React.ReactNode) | undefined;
41
+ footerRender: ((...nodes: React.ReactElement[]) => React.ReactNode) | undefined;
41
42
  showColMenu: boolean | undefined;
42
43
  onLoadChildren: ((item: TableRowEventData) => Promise<any[] | void> | void) | undefined;
44
+ setHeaderTableElement: React.Dispatch<React.SetStateAction<HTMLTableRowElement | null>>;
43
45
  scrollLeft: number;
44
46
  scrollRight: number;
45
47
  measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
@@ -98,10 +100,10 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
98
100
  scrollLeft: number;
99
101
  scrollRight: number;
100
102
  };
101
- leftFrozenColKeys: any[];
102
- rightFrozenColKeys: any[];
103
- leftFixedColumnsWidth: number;
104
- rightFixedColumnsWidth: number;
103
+ leftFrozenColKeys: any[] | never[];
104
+ rightFrozenColKeys: any[] | never[];
105
+ leftFixedColumnsWidth: number | undefined;
106
+ rightFixedColumnsWidth: number | undefined;
105
107
  };
106
108
  export interface UseTableProps {
107
109
  /**
@@ -267,5 +269,9 @@ export interface UseTableProps {
267
269
  * 点击异步加载子项
268
270
  */
269
271
  onLoadChildren?: (item: TableRowEventData) => Promise<any[] | void> | void;
272
+ /**
273
+ * 自定义渲染页脚
274
+ */
275
+ footerRender?: (...nodes: React.ReactElement[]) => React.ReactNode;
270
276
  }
271
277
  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.2.0",
3
+ "version": "4.3.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -59,7 +59,7 @@
59
59
  "@hi-ui/pagination": "^4.0.8",
60
60
  "@hi-ui/popper": "^4.1.0",
61
61
  "@hi-ui/react-utils": "^4.0.1",
62
- "@hi-ui/select": "^4.2.0",
62
+ "@hi-ui/select": "^4.2.2",
63
63
  "@hi-ui/spinner": "^4.0.4",
64
64
  "@hi-ui/times": "^4.0.1",
65
65
  "@hi-ui/tree-utils": "^4.1.1",