@hi-ui/table 5.0.0-experimental.0 → 5.0.0-experimental.2

package/lib/esm/BaseTable.js

@@ -65,7 +65,9 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
     onResizeStop = _a.onResizeStop,
     fixedToRow = _a.fixedToRow,
     onScroll = _a.onScroll,
-    rest = __rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual", "needDoubleTable", "onResizeStop", "fixedToRow", "onScroll"]);
+    classNames = _a.classNames,
+    styles = _a.styles,
+    rest = __rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual", "needDoubleTable", "onResizeStop", "fixedToRow", "onScroll", "classNames", "styles"]);
   var _useGlobalContext = useGlobalContext(),
     globalSize = _useGlobalContext.size;
   var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
@@ -234,7 +236,8 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
         style = _a2.style,
         restTableHeaderProps = __rest(_a2, ["style"]);
       var doubleTableContent = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, restTableHeaderProps, {
-        style: Object.assign(Object.assign({}, style), {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
+        style: Object.assign(Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.content), {
           overflow: undefined
         })
       }), /*#__PURE__*/React__default.createElement(TableHeader, null), extraHeader ? ( /*#__PURE__*/React__default.createElement("div", {
@@ -252,21 +255,22 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
     var tableContent = /*#__PURE__*/React__default.createElement("table", {
       ref: bodyTableRef,
-      style: {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.table,
+      style: Object.assign({
         width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
-      }
+      }, styles === null || styles === void 0 ? void 0 : styles.table)
     }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TheadContent, null), /*#__PURE__*/React__default.createElement(TbodyContent, {
       emptyContent: emptyContent
     }));
     var singleTableContent = /*#__PURE__*/React__default.createElement("div", Object.assign({
-      className: prefixCls + "-content"
-    }, !scrollbar ? {
-      ref: scrollBodyElementRef,
-      onScroll: onTableBodyScroll,
-      style: {
+      className: cx(prefixCls + "-content", classNames === null || classNames === void 0 ? void 0 : classNames.content),
+      style: Object.assign(Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.content), !scrollbar ? {
         // 表格宽度大于div宽度才出现横向滚动条
         overflowX: canScroll ? 'scroll' : undefined
-      }
+      } : {})
+    }, !scrollbar ? {
+      ref: scrollBodyElementRef,
+      onScroll: onTableBodyScroll
     } : {}), !scrollbar ? tableContent : ( /*#__PURE__*/React__default.createElement(Scrollbar, Object.assign({
       ref: scrollBodyElementRef,
       onScroll: onTableBodyScroll
@@ -275,32 +279,35 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
   };
   var renderFreezeShadow = function renderFreezeShadow() {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? ( /*#__PURE__*/React__default.createElement("div", {
-      className: prefixCls + "-freeze-shadow  " + prefixCls + "-freeze-shadow--left",
-      style: {
+      className: cx(prefixCls + "-freeze-shadow", prefixCls + "-freeze-shadow--left", classNames === null || classNames === void 0 ? void 0 : classNames.freezeShadowLeft),
+      style: Object.assign({
         width: leftFixedColumnsWidth + 'px'
-      }
+      }, styles === null || styles === void 0 ? void 0 : styles.freezeShadowLeft)
     })) : null, (alwaysFixedColumn || scrollSize.scrollRight > 0) && rightFrozenColKeys.length > 0 ? ( /*#__PURE__*/React__default.createElement("div", {
-      className: prefixCls + "-freeze-shadow " + prefixCls + "-freeze-shadow--right",
-      style: {
+      className: cx(prefixCls + "-freeze-shadow", prefixCls + "-freeze-shadow--right", classNames === null || classNames === void 0 ? void 0 : classNames.freezeShadowRight),
+      style: Object.assign({
         width: rightFixedColumnsWidth + 'px'
-      }
+      }, styles === null || styles === void 0 ? void 0 : styles.freezeShadowRight)
     })) : null);
   };
   var tableFooter = /*#__PURE__*/React__default.createElement("div", {
-    className: prefixCls + "-footer",
-    style: stickyFooter ? {
+    className: cx(prefixCls + "-footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
+    style: Object.assign(Object.assign({}, stickyFooter ? {
       position: 'sticky',
       bottom: stickyFooterBottom
-    } : undefined
+    } : {}), styles === null || styles === void 0 ? void 0 : styles.footer)
   }, isFunction(footerRender) ? footerRender( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, extraFooter)) : extraFooter);
-  var cls = cx(prefixCls, className, hasBorder && prefixCls + "--bordered", (hasScrollToLeft || hasLeftFixedColumns) && data.length > 0 && prefixCls + "--bordered-left-none", striped && prefixCls + "--striped", size && prefixCls + "--size-" + size, virtual && prefixCls + "--virtual", data.length === 0 && prefixCls + "--empty", prefixCls + "--" + (needDoubleTable ? 'double' : 'single'), stretchHeight && prefixCls + "--stretch-height");
+  var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, hasBorder && prefixCls + "--bordered", (hasScrollToLeft || hasLeftFixedColumns) && data.length > 0 && prefixCls + "--bordered-left-none", striped && prefixCls + "--striped", size && prefixCls + "--size-" + size, virtual && prefixCls + "--virtual", data.length === 0 && prefixCls + "--empty", prefixCls + "--" + (needDoubleTable ? 'double' : 'single'), stretchHeight && prefixCls + "--stretch-height");
   return /*#__PURE__*/React__default.createElement("div", Object.assign({
     ref: ref,
     role: role,
     className: cls
-  }, rootProps), /*#__PURE__*/React__default.createElement("div", {
+  }, rootProps, {
+    style: styles === null || styles === void 0 ? void 0 : styles.root
+  }), /*#__PURE__*/React__default.createElement("div", {
     ref: wrapperRef,
-    className: cx(prefixCls + "__wrapper", isTableContentExceedWrapperHeight && prefixCls + "--exceed-wrapper-height")
+    className: cx(prefixCls + "__wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.wrapper, isTableContentExceedWrapperHeight && prefixCls + "--exceed-wrapper-height"),
+    style: styles === null || styles === void 0 ? void 0 : styles.wrapper
   }, /*#__PURE__*/React__default.createElement(TableProvider, {
     value: Object.assign(Object.assign({}, providedValue), {
       striped: striped,
@@ -318,7 +325,9 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       virtual: virtual,
       onScroll: onScroll,
       onResizeStop: onResizeStop,
-      fixedToRow: fixedToRow
+      fixedToRow: fixedToRow,
+      semanticClassNames: classNames,
+      semanticStyles: styles
     })
   }, renderTable()), renderFreezeShadow()), tableFooter);
 });

package/lib/esm/Table.js

@@ -12,6 +12,8 @@ import { __rest } from 'tslib';
 import React__default, { forwardRef, useCallback, useMemo, Fragment } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__, invariant } from '@hi-ui/env';
+import { useGlobalContext } from '@hi-ui/core';
+import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
 import Pagination from '@hi-ui/pagination';
 import { useColHidden } from './hooks/use-col-hidden.js';
 import { useColSorter } from './hooks/use-col-sorter.js';
@@ -73,12 +75,27 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
     _a$data = _a.data,
     data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
     onScroll = _a.onScroll,
-    rest = __rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "checkDisabledColKeys", "onSetColKeysChange", "rowSelection", "fieldKey", "extra", "data", "onScroll"]);
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
+    rest = __rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "checkDisabledColKeys", "onSetColKeysChange", "rowSelection", "fieldKey", "extra", "data", "onScroll", "classNames", "styles"]);
+  var globalContext = useGlobalContext();
+  var tableConfig = globalContext.table;
+  var _useMergeSemantic = useMergeSemantic({
+      classNamesList: [tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.classNames, classNamesProp],
+      stylesList: [tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          standard: standard,
+          loading: loadingProp
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
   // 是否需要双表格
-  // 当 data 为空时，如果使用单表格，在表头分组下会导致表头错位（原生 table 特性），故而该情况下也要使用双表格
   var needDoubleTable = DOUBLE_TABLE_SCENE.some(function (prop) {
     return !!rest[prop];
-  }) || data.length === 0;
+  });
   var virtual = rest.virtual;
   // ************************ 预置标准模式 ************************ //
   var tableProps = withDefaultProps(rest, standard ? STANDARD_PRESET : undefined);
@@ -293,6 +310,8 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
     virtual: virtual,
     onScroll: onScroll,
     needDoubleTable: needDoubleTable,
+    classNames: classNames,
+    styles: styles,
     extra: Object.assign({
       header: setting ? ( /*#__PURE__*/React__default.createElement(TableSettingMenu, {
         prefixCls: prefixCls + "-setting",

package/lib/esm/TableBody.js

@@ -43,9 +43,12 @@ var TableBody = function TableBody(_ref) {
     virtualListRef = _useTableContext.virtualListRef,
     rowClassName = _useTableContext.rowClassName,
     stretchHeight = _useTableContext.stretchHeight,
-    _onScroll = _useTableContext.onScroll;
+    _onScroll = _useTableContext.onScroll,
+    semanticClassNames = _useTableContext.semanticClassNames,
+    semanticStyles = _useTableContext.semanticStyles;
   var virtualListWrapperRef = useRef(null);
-  var cls = cx(prefixCls + "-body");
+  var cls = cx(prefixCls + "-body", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.body);
+  var bodyStyle = semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.body;
   var getRequiredProps = useLatestCallback(function (id) {
     return {
       // @ts-ignore
@@ -101,11 +104,10 @@ var TableBody = function TableBody(_ref) {
       className: cls,
       onScroll: onTableBodyScroll,
       onWheel: onTableBodyScrollMock,
-      style: {
-        // 表格宽度大于div宽度才出现横向滚动条
+      style: Object.assign(Object.assign({}, bodyStyle), {
         overflowX: canScroll ? 'scroll' : undefined,
         overflowY: 'hidden'
-      }
+      })
     }, /*#__PURE__*/React__default.createElement("div", {
       ref: measureRowElementRef,
       style: {
@@ -180,14 +182,15 @@ var TableBody = function TableBody(_ref) {
   var scrollBodyProps = {
     ref: scrollBodyElementRef,
     onScroll: onTableBodyScroll,
-    style: {
+    style: Object.assign(Object.assign({}, bodyStyle), {
       maxHeight: maxHeight
-    }
+    })
   };
   return !scrollbar ? ( /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: cls
   }, scrollBodyProps), bodyContent)) : ( /*#__PURE__*/React__default.createElement("div", {
-    className: cls
+    className: cls,
+    style: bodyStyle
   }, /*#__PURE__*/React__default.createElement(Scrollbar, Object.assign({}, scrollBodyProps, isObject(scrollbar) ? scrollbar : null), bodyContent)));
 };
 if (__DEV__) {

package/lib/esm/TableCell.js

@@ -51,7 +51,9 @@ var TableCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     cellRender = _useTableContext.cellRender,
     isLoadingTreeNodeId = _useTableContext.isLoadingTreeNodeId,
     colWidths = _useTableContext.colWidths,
-    virtual = _useTableContext.virtual;
+    virtual = _useTableContext.virtual,
+    semanticClassNames = _useTableContext.semanticClassNames,
+    semanticStyles = _useTableContext.semanticStyles;
   var dataKey = column.id,
     leftStickyWidth = column.leftStickyWidth,
     rightStickyWidth = column.rightStickyWidth,
@@ -89,7 +91,8 @@ var TableCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }
   var loading = isLoadingTreeNodeId(rowId);
   var sticky = typeof rightStickyWidth !== 'undefined' || typeof leftStickyWidth !== 'undefined';
-  var cls = cx(prefixCls, className, raw.className, canScroll && sticky && prefixCls + "__col--sticky", isHighlightedCol(dataKey) && prefixCls + "__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "__col--hovered-highlight");
+  var cls = cx(prefixCls, className, raw.className, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.bodyCell, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.cell, canScroll && sticky && prefixCls + "__col--sticky", isHighlightedCol(dataKey) && prefixCls + "__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "__col--hovered-highlight");
+  var cellStyle = Object.assign(Object.assign({}, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.bodyCell), semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.cell);
   if (virtual) {
     var width = colWidths[colIndex];
     var colProps = getStickyColProps(column, 'td');
@@ -98,14 +101,13 @@ var TableCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
       key: dataKey,
       className: cls
     }, colProps, {
-      // 按需绑定函数，避免频繁调用 setState 特别消耗性能
       onMouseEnter: showColHighlight ? function () {
         return onHoveredColChange(column, true);
       } : undefined,
       onMouseLeave: showColHighlight ? function () {
         return onHoveredColChange(column, false);
       } : undefined,
-      style: Object.assign(Object.assign({}, colProps.style), {
+      style: Object.assign(Object.assign(Object.assign({}, colProps.style), cellStyle), {
         width: width
       })
     }), isSwitcherCol && depth > 0 ? renderIndent({
@@ -126,14 +128,15 @@ var TableCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }) : null, cellContent.children);
   }
+  var stickyColProps = getStickyColProps(column, 'td');
   return /*#__PURE__*/React__default.createElement("td", Object.assign({
     ref: ref,
     key: dataKey,
     className: cls
-  }, getStickyColProps(column, 'td'), {
+  }, stickyColProps, {
+    style: Object.assign(Object.assign({}, stickyColProps.style), cellStyle),
     colSpan: cellContent.props.colSpan,
     rowSpan: cellContent.props.rowSpan,
-    // 按需绑定函数，避免频繁调用 setState 特别消耗性能
     onMouseEnter: showColHighlight ? function () {
       return onHoveredColChange(column, true);
     } : undefined,

package/lib/esm/TableHeader.js

@@ -21,12 +21,17 @@ var TableHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useTableContext = useTableContext(),
     onTableBodyScrollMock = _useTableContext.onTableBodyScrollMock,
     scrollHeaderElementRef = _useTableContext.scrollHeaderElementRef,
-    getTableHeaderProps = _useTableContext.getTableHeaderProps;
-  var cls = cx(prefixCls, className);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+    getTableHeaderProps = _useTableContext.getTableHeaderProps,
+    semanticClassNames = _useTableContext.semanticClassNames,
+    semanticStyles = _useTableContext.semanticStyles;
+  var headerProps = getTableHeaderProps();
+  var cls = cx(prefixCls, className, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.header);
+  var headerStyle = semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.header;
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, headerProps, {
     className: cls,
-    ref: scrollHeaderElementRef
-  }, getTableHeaderProps()), /*#__PURE__*/React__default.createElement("table", {
+    ref: scrollHeaderElementRef,
+    style: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.style), headerStyle)
+  }), /*#__PURE__*/React__default.createElement("table", {
     style: {
       width: '100%',
       position: 'relative'

package/lib/esm/TableRow.js

@@ -48,7 +48,9 @@ var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onRow = _useTableContext.onRow,
     colWidths = _useTableContext.colWidths,
     virtual = _useTableContext.virtual,
-    cellClassName = _useTableContext.cellClassName;
+    cellClassName = _useTableContext.cellClassName,
+    semanticClassNames = _useTableContext.semanticClassNames,
+    semanticStyles = _useTableContext.semanticStyles;
   var rowData = rowDataProp.raw,
     rowId = rowDataProp.id;
   // ** ************** 拖拽管理 *************** *//
@@ -134,7 +136,8 @@ var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // ** ************** 行状态管理 *************** *//
   var highlighted = isHighlightedRow(rowId);
   var hasError = isErrorRow(rowId);
-  var cls = cx(prefixCls + "-row", showRowHighlight && prefixCls + "-row--hover", striped && (rowIndex & 1) === 0 && 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);
+  var cls = cx(prefixCls + "-row", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.bodyRow, showRowHighlight && prefixCls + "-row--hover", striped && (rowIndex & 1) === 0 && 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);
+  var bodyRowStyle = semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.bodyRow;
   var firstColumn = flattedColumnsWithoutChildren.find(function (item) {
     return item.dataKey !== SELECTION_DATA_KEY && item.dataKey !== EMBED_DATA_KEY;
   });
@@ -158,7 +161,7 @@ var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }
         onHighlightedRowChange(rowDataProp, !highlighted);
       },
-      style: Object.assign(Object.assign({}, rowExtraProps.style), {
+      style: Object.assign(Object.assign(Object.assign({}, bodyRowStyle), rowExtraProps.style), {
         width: rowWidth
       })
     }), flattedColumnsWithoutChildren.map(function (column, idx) {
@@ -179,6 +182,7 @@ var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: cls,
     key: "row"
   }, rowExtraProps, {
+    style: Object.assign(Object.assign({}, bodyRowStyle), rowExtraProps.style),
     onDoubleClick: function onDoubleClick(evt) {
       if (rowExtraProps.onDoubleClick) {
         rowExtraProps.onDoubleClick(evt);

package/lib/esm/TheadContent.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React__default, { forwardRef, useRef } from 'react';
+import React__default, { forwardRef, useRef, useMemo } from 'react';
 import { Resizable } from 'react-resizable';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
@@ -32,9 +32,19 @@ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
     getStickyColProps = _useTableContext.getStickyColProps,
     showColMenu = _useTableContext.showColMenu,
     setHeaderTableElement = _useTableContext.setHeaderTableElement,
-    _onResizeStop = _useTableContext.onResizeStop;
+    _onResizeStop = _useTableContext.onResizeStop,
+    maxHeight = _useTableContext.maxHeight,
+    sticky = _useTableContext.sticky,
+    stickyTop = _useTableContext.stickyTop,
+    stickyFooter = _useTableContext.stickyFooter,
+    stretchHeight = _useTableContext.stretchHeight,
+    semanticClassNames = _useTableContext.semanticClassNames,
+    semanticStyles = _useTableContext.semanticStyles;
   var activeColumnKeysAction = useCheckState();
   var trRefs = useRef([]);
+  var needSticky = useMemo(function () {
+    return sticky || stickyTop || stickyFooter || stretchHeight || maxHeight;
+  }, [maxHeight, sticky, stickyFooter, stickyTop, stretchHeight]);
   return /*#__PURE__*/React__default.createElement("thead", Object.assign({}, rest), groupedColumns.map(function (cols, colsIndex) {
     return /*#__PURE__*/React__default.createElement("tr", {
       key: colsIndex,
@@ -45,7 +55,9 @@ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
             setHeaderTableElement(el);
           }
         }
-      }
+      },
+      className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.headerRow,
+      style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.headerRow
     }, cols.map(function (col, colIndex) {
       var _a, _b;
       var _ref = col || {},
@@ -68,12 +80,11 @@ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
       var cell = /*#__PURE__*/React__default.createElement("th", Object.assign({
         key: dataKey
       }, stickyColProps, {
-        style: Object.assign(Object.assign({}, stickyColProps.style), {
-          insetBlockStart: (_b = trRefs.current[colsIndex]) === null || _b === void 0 ? void 0 : _b.offsetTop,
-          // 表头合并场景下，被合并的表头需要隐藏
-          display: (col === null || col === void 0 ? void 0 : col.colSpan) === 0 ? 'none' : undefined
+        style: Object.assign(Object.assign(Object.assign(Object.assign({}, stickyColProps.style), semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.headerCell), semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.cell), {
+          display: (col === null || col === void 0 ? void 0 : col.colSpan) === 0 ? 'none' : undefined,
+          insetBlockStart: needSticky ? (_b = trRefs.current[colsIndex]) === null || _b === void 0 ? void 0 : _b.offsetTop : undefined
         }),
-        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", groupLastColumn && prefixCls + "-cell--group-last-column"),
+        className: cx(prefixCls + "-cell", raw.className, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.headerCell, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.cell, isHighlightedCol(dataKey) && prefixCls + "-cell__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "-cell__col--hovered-highlight", activeColumnKeysAction.has(dataKey) && prefixCls + "-cell__col--active", groupLastColumn && prefixCls + "-cell--group-last-column"),
         // @ts-ignore
         colSpan: col.colSpan,
         // @ts-ignore

package/lib/esm/styles/index.scss.js

@@ -8,6 +8,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from '@hi-ui/style-inject';
-var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);position: relative;}.hi-v5-table table {width: 100%;text-align: start;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-sm, 2px) var(--hi-v5-border-radius-sm, 2px) 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table__wrapper.hi-v5-table--exceed-wrapper-height::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height .hi-v5-table-header-cell {position: sticky;inset-block-start: 0;z-index: 1;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--bordered > .hi-v5-table__wrapper {-webkit-border-start: none;border-inline-start: none;-webkit-border-end: none;border-inline-end: none;}.hi-v5-table--stretch-height.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-content {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--stretch-height.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper .hi-v5-table-content {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table__wrapper::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-table--virtual .hi-v5-table-cell.hi-v5-table__selection-col {-webkit-box-pack: center !important;-ms-flex-pack: center !important;justify-content: center !important;}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;z-index: 1;width: 2px;height: 100%;inset-block-start: 0;inset-inline-end: -2px;-webkit-border-start: 2px solid transparent;border-inline-start: 2px solid transparent;-webkit-border-end: 2px solid transparent;border-inline-end: 2px solid transparent;cursor: col-resize;background-color: transparent;background-clip: content-box;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-row--fixed-top, .hi-v5-table-row--fixed-bottom {position: sticky;z-index: 6;}.hi-v5-table-row--fixed-top {inset-block-start: 0;}.hi-v5-table-row--fixed-bottom {inset-block-end: 0;}.hi-v5-table-row--fixed-bottom .hi-v5-table-cell {-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-table-row:has(+ .hi-v5-table-row--fixed-bottom) .hi-v5-table-cell {-webkit-border-after: none;border-block-end: none;}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--hover.hi-v5-table-row--highlight:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, rgba(242, 244, 247, 0.6));}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {-webkit-border-before: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-start: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {-webkit-border-after: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-800, #1a1d26);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: var(--hi-v5-text-size-md, 0.875rem);height: 100%;-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-600, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;inset-block-start: 0;inset-block-end: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {-webkit-margin-end: var(--hi-v5-spacing-5, 10px);margin-inline-end: var(--hi-v5-spacing-5, 10px);inset-inline-start: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {-webkit-margin-start: var(--hi-v5-spacing-5, 10px);margin-inline-start: var(--hi-v5-spacing-5, 10px);inset-inline-end: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-dropdown__trigger--active.hi-v5-icon-button {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-2, 4px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: var(--hi-v5-height-5, 20px);vertical-align: middle;-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);}.hi-v5-table-header-filter-sorter__icon {display: inline-block;height: var(--hi-v5-height-2, 8px);cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-sorter__icon:hover {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;inset-block-start: -5px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-100, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;inset-inline-end: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-table-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-table-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-table-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-table--empty.hi-v5-table--bordered tr:first-child th:first-child {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--empty.hi-v5-table--bordered td {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}";
+var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);position: relative;}.hi-v5-table table {width: 100%;text-align: start;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-sm, 2px) var(--hi-v5-border-radius-sm, 2px) 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table__wrapper.hi-v5-table--exceed-wrapper-height::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height .hi-v5-table-header-cell {position: sticky;inset-block-start: 0;z-index: 1;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--bordered:not(.hi-v5-table--empty) > .hi-v5-table__wrapper {-webkit-border-start: none;border-inline-start: none;-webkit-border-end: none;border-inline-end: none;}.hi-v5-table--stretch-height.hi-v5-table--bordered:not(.hi-v5-table--empty) > .hi-v5-table__wrapper .hi-v5-table-content {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--stretch-height.hi-v5-table--bordered:not(.hi-v5-table--empty).hi-v5-table--bordered-left-none > .hi-v5-table__wrapper .hi-v5-table-content {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table__wrapper::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-table--virtual .hi-v5-table-cell.hi-v5-table__selection-col {-webkit-box-pack: center !important;-ms-flex-pack: center !important;justify-content: center !important;}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;z-index: 1;width: 2px;height: 100%;inset-block-start: 0;inset-inline-end: -2px;-webkit-border-start: 2px solid transparent;border-inline-start: 2px solid transparent;-webkit-border-end: 2px solid transparent;border-inline-end: 2px solid transparent;cursor: col-resize;background-color: transparent;background-clip: content-box;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-row--fixed-top, .hi-v5-table-row--fixed-bottom {position: sticky;z-index: 6;}.hi-v5-table-row--fixed-top {inset-block-start: 0;}.hi-v5-table-row--fixed-bottom {inset-block-end: 0;}.hi-v5-table-row--fixed-bottom .hi-v5-table-cell {-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-table-row:has(+ .hi-v5-table-row--fixed-bottom) .hi-v5-table-cell {-webkit-border-after: none;border-block-end: none;}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--hover.hi-v5-table-row--highlight:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-static-bgColor, #f5f8fc);}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {-webkit-border-before: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-start: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {-webkit-border-after: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-800, #1a1d26);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: var(--hi-v5-text-size-md, 0.875rem);height: 100%;-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-600, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;inset-block-start: 0;inset-block-end: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {-webkit-margin-end: var(--hi-v5-spacing-5, 10px);margin-inline-end: var(--hi-v5-spacing-5, 10px);inset-inline-start: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {-webkit-margin-start: var(--hi-v5-spacing-5, 10px);margin-inline-start: var(--hi-v5-spacing-5, 10px);inset-inline-end: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-dropdown__trigger--active.hi-v5-icon-button {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-2, 4px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 100%;vertical-align: middle;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-table-header-filter-sorter__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: 15px;-webkit-padding-start: var(--hi-v5-spacing-3, 6px);padding-inline-start: var(--hi-v5-spacing-3, 6px);cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-sorter__icon:hover {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;}.hi-v5-table-header-filter-sorter__icon:first-child svg {inset-block-end: -3px;}.hi-v5-table-header-filter-sorter__icon:last-child svg {inset-block-start: -3px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-100, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;inset-inline-end: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-table-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-table-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-table-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-table--empty.hi-v5-table--bordered tr:first-child th:first-child {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--empty.hi-v5-table--bordered td {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}";
 __styleInject__(css_248z);
 export { css_248z as default };

package/lib/esm/use-table.js

@@ -638,7 +638,9 @@ var useTable = function useTable(_a) {
     cellClassName: cellClassName,
     onHighlightedCol: onHighlightedCol,
     innerRef: innerRef,
-    virtualListRef: virtualListRef
+    virtualListRef: virtualListRef,
+    sticky: sticky,
+    stickyTop: stickyTop
   });
 };
 export { useTable };

package/lib/types/BaseTable.d.ts

@@ -7,6 +7,14 @@ import { ResizeCallbackData } from 'react-resizable';
 export declare const EMBED_DATA_KEY: string;
 export declare const BaseTable: React.ForwardRefExoticComponent<BaseTableProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface BaseTableProps extends Omit<HiBaseHTMLProps<'div'>, 'onDrop' | 'draggable' | 'onDragStart'>, UseTableProps, UseEmbedExpandProps {
+    /**
+     * 语义化 classNames（由 Table 透传）
+     */
+    classNames?: any;
+    /**
+     * 语义化 styles（由 Table 透传）
+     */
+    styles?: any;
     /**
      * 覆盖 header 的setting icon 和 footer 的 pagination。暂不对外暴露
      * @private

package/lib/types/Table.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
 import { TablePaginationProps, TableDataSource } from './types';
 import { BaseTableProps } from './BaseTable';
 export declare const SELECTION_DATA_KEY: string;
@@ -6,7 +7,11 @@ export declare const SELECTION_DATA_KEY: string;
  * 表格
  */
 export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface TableProps extends BaseTableProps {
+export type TableSemanticName = 'root' | 'wrapper' | 'content' | 'table' | 'header' | 'headerRow' | 'headerCell' | 'body' | 'bodyRow' | 'bodyCell' | 'cell' | 'footer' | 'freezeShadowLeft' | 'freezeShadowRight';
+export type TableSemanticClassNames = SemanticClassNamesType<TableProps, TableSemanticName>;
+export type TableSemanticStyles = SemanticStylesType<TableProps, TableSemanticName>;
+export type TableSemantic = ComponentSemantic<TableSemanticClassNames, TableSemanticStyles>;
+export interface TableProps extends Omit<BaseTableProps, 'classNames' | 'styles'>, TableSemantic {
     /**
      * 加载中状态
      */

package/lib/types/context.d.ts

@@ -53,6 +53,8 @@ export declare const TableProvider: React.Provider<(Omit<{
     }, highlightedColKeys: string[]) => void) | undefined;
     innerRef: React.Ref<import("./types").TableHelper> | undefined;
     virtualListRef: React.RefObject<import("rc-virtual-list").ListRef>;
+    sticky: boolean | undefined;
+    stickyTop: number;
     scrollLeft: number;
     scrollRight: number;
     measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
@@ -134,6 +136,13 @@ export declare const TableProvider: React.Provider<(Omit<{
         bottom?: number | ((rowData: TableRowEventData, index: number) => boolean);
     };
     onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    sticky?: boolean;
+    stickyTop?: number;
+    stickyFooter?: boolean;
+    /** 语义化 classNames（由 BaseTable 透传） */
+    semanticClassNames?: Record<string, any>;
+    /** 语义化 styles（由 BaseTable 透传） */
+    semanticStyles?: Record<string, any>;
 }) | null>;
 export declare const useTableContext: () => Omit<{
     getColgroupProps: (column: import("./types").FlattedTableColumnItemData, index: number) => {
@@ -187,6 +196,8 @@ export declare const useTableContext: () => Omit<{
     }, highlightedColKeys: string[]) => void) | undefined;
     innerRef: React.Ref<import("./types").TableHelper> | undefined;
     virtualListRef: React.RefObject<import("rc-virtual-list").ListRef>;
+    sticky: boolean | undefined;
+    stickyTop: number;
     scrollLeft: number;
     scrollRight: number;
     measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
@@ -268,4 +279,11 @@ export declare const useTableContext: () => Omit<{
         bottom?: number | ((rowData: TableRowEventData, index: number) => boolean);
     };
     onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    sticky?: boolean;
+    stickyTop?: number;
+    stickyFooter?: boolean;
+    /** 语义化 classNames（由 BaseTable 透传） */
+    semanticClassNames?: Record<string, any>;
+    /** 语义化 styles（由 BaseTable 透传） */
+    semanticStyles?: Record<string, any>;
 };

package/lib/types/use-table.d.ts

@@ -56,6 +56,8 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
     }, highlightedColKeys: string[]) => void) | undefined;
     innerRef: React.Ref<TableHelper> | undefined;
     virtualListRef: React.RefObject<ListRef>;
+    sticky: boolean | undefined;
+    stickyTop: number;
     scrollLeft: number;
     scrollRight: number;
     measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;