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

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @hi-ui/table
 
+## 5.0.0-experimental.2
+
+### Minor Changes
+
+- 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
+
+### Patch Changes
+
+- eb17c4697: style: 修复 UI/样式问题 (5.0)
+- Updated dependencies [7f204c892]
+- Updated dependencies [eb17c4697]
+- Updated dependencies [eb17c4697]
+- Updated dependencies [c407744fe]
+- Updated dependencies [ec647a5ee]
+- Updated dependencies [59cef699f]
+  - @hi-ui/icons@5.0.0-experimental.1
+  - @hi-ui/core@5.0.0-experimental.1
+  - @hi-ui/button@5.0.0-experimental.1
+  - @hi-ui/checkbox@5.0.0-experimental.1
+  - @hi-ui/drawer@5.0.0-experimental.1
+  - @hi-ui/empty-state@5.0.0-experimental.1
+  - @hi-ui/icon-button@5.0.0-experimental.1
+  - @hi-ui/loading@5.0.0-experimental.1
+  - @hi-ui/pagination@5.0.0-experimental.1
+  - @hi-ui/popper@5.0.0-experimental.1
+  - @hi-ui/radio@5.0.0-experimental.1
+  - @hi-ui/scrollbar@5.0.0-experimental.1
+  - @hi-ui/select@5.0.0-experimental.2
+  - @hi-ui/use-merge-semantic@5.0.0-experimental.0
+  - @hi-ui/spinner@5.0.0-experimental.1
+
 ## 5.0.0-experimental.1
 
 ### Patch Changes

package/lib/cjs/BaseTable.js

@@ -78,7 +78,9 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onResizeStop = _a.onResizeStop,
     fixedToRow = _a.fixedToRow,
     onScroll = _a.onScroll,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual", "needDoubleTable", "onResizeStop", "fixedToRow", "onScroll"]);
+    classNames = _a.classNames,
+    styles = _a.styles,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual", "needDoubleTable", "onResizeStop", "fixedToRow", "onScroll", "classNames", "styles"]);
   var _useGlobalContext = core.useGlobalContext(),
     globalSize = _useGlobalContext.size;
   var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
@@ -247,7 +249,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         style = _a2.style,
         restTableHeaderProps = tslib.__rest(_a2, ["style"]);
       var doubleTableContent = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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["default"].createElement(TableHeader.TableHeader, null), extraHeader ? ( /*#__PURE__*/React__default["default"].createElement("div", {
@@ -265,21 +268,22 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
     var tableContent = /*#__PURE__*/React__default["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["default"].createElement(ColGroupContent.ColGroupContent, null), /*#__PURE__*/React__default["default"].createElement(TheadContent.TheadContent, null), /*#__PURE__*/React__default["default"].createElement(TbodyContent.TbodyContent, {
       emptyContent: emptyContent
     }));
     var singleTableContent = /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-      className: prefixCls + "-content"
-    }, !scrollbar ? {
-      ref: scrollBodyElementRef,
-      onScroll: onTableBodyScroll,
-      style: {
+      className: 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["default"].createElement(Scrollbar__default["default"], Object.assign({
       ref: scrollBodyElementRef,
       onScroll: onTableBodyScroll
@@ -288,32 +292,35 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   };
   var renderFreezeShadow = function renderFreezeShadow() {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? ( /*#__PURE__*/React__default["default"].createElement("div", {
-      className: prefixCls + "-freeze-shadow  " + prefixCls + "-freeze-shadow--left",
-      style: {
+      className: 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["default"].createElement("div", {
-      className: prefixCls + "-freeze-shadow " + prefixCls + "-freeze-shadow--right",
-      style: {
+      className: 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["default"].createElement("div", {
-    className: prefixCls + "-footer",
-    style: stickyFooter ? {
+    className: 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)
   }, typeAssertion.isFunction(footerRender) ? footerRender( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, extraFooter)) : extraFooter);
-  var cls = classname.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 = classname.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["default"].createElement("div", Object.assign({
     ref: ref,
     role: role,
     className: cls
-  }, rootProps), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, rootProps, {
+    style: styles === null || styles === void 0 ? void 0 : styles.root
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: wrapperRef,
-    className: classname.cx(prefixCls + "__wrapper", isTableContentExceedWrapperHeight && prefixCls + "--exceed-wrapper-height")
+    className: 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["default"].createElement(context.TableProvider, {
     value: Object.assign(Object.assign({}, providedValue), {
       striped: striped,
@@ -331,7 +338,9 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       virtual: virtual,
       onScroll: onScroll,
       onResizeStop: onResizeStop,
-      fixedToRow: fixedToRow
+      fixedToRow: fixedToRow,
+      semanticClassNames: classNames,
+      semanticStyles: styles
     })
   }, renderTable()), renderFreezeShadow()), tableFooter);
 });

package/lib/cjs/Table.js

@@ -17,6 +17,8 @@ var tslib = require('tslib');
 var React = require('react');
 var classname = require('@hi-ui/classname');
 var env = require('@hi-ui/env');
+var core = require('@hi-ui/core');
+var useMergeSemantic = require('@hi-ui/use-merge-semantic');
 var Pagination = require('@hi-ui/pagination');
 var useColHidden = require('./hooks/use-col-hidden.js');
 var useColSorter = require('./hooks/use-col-sorter.js');
@@ -88,7 +90,23 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _a$data = _a.data,
     data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
     onScroll = _a.onScroll,
-    rest = tslib.__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 = tslib.__rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "checkDisabledColKeys", "onSetColKeysChange", "rowSelection", "fieldKey", "extra", "data", "onScroll", "classNames", "styles"]);
+  var globalContext = core.useGlobalContext();
+  var tableConfig = globalContext.table;
+  var _useMergeSemantic = 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;
   // 是否需要双表格
   var needDoubleTable = DOUBLE_TABLE_SCENE.some(function (prop) {
     return !!rest[prop];
@@ -307,6 +325,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     virtual: virtual,
     onScroll: onScroll,
     needDoubleTable: needDoubleTable,
+    classNames: classNames,
+    styles: styles,
     extra: Object.assign({
       header: setting ? ( /*#__PURE__*/React__default["default"].createElement(TableSettingMenu.TableSettingMenu, {
         prefixCls: prefixCls + "-setting",

package/lib/cjs/TableBody.js

@@ -56,9 +56,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 = React.useRef(null);
-  var cls = classname.cx(prefixCls + "-body");
+  var cls = classname.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 = useLatest.useLatestCallback(function (id) {
     return {
       // @ts-ignore
@@ -114,11 +117,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["default"].createElement("div", {
       ref: measureRowElementRef,
       style: {
@@ -193,14 +195,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["default"].createElement("div", Object.assign({
     className: cls
   }, scrollBodyProps), bodyContent)) : ( /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cls
+    className: cls,
+    style: bodyStyle
   }, /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], Object.assign({}, scrollBodyProps, typeAssertion.isObject(scrollbar) ? scrollbar : null), bodyContent)));
 };
 if (env.__DEV__) {

package/lib/cjs/TableCell.js

@@ -63,7 +63,9 @@ var TableCell = /*#__PURE__*/React.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,
@@ -101,7 +103,8 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }
   var loading = isLoadingTreeNodeId(rowId);
   var sticky = typeof rightStickyWidth !== 'undefined' || typeof leftStickyWidth !== 'undefined';
-  var cls = classname.cx(prefixCls, className, raw.className, canScroll && sticky && prefixCls + "__col--sticky", isHighlightedCol(dataKey) && prefixCls + "__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "__col--hovered-highlight");
+  var cls = classname.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');
@@ -110,14 +113,13 @@ var TableCell = /*#__PURE__*/React.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({
@@ -138,14 +140,15 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }) : null, cellContent.children);
   }
+  var stickyColProps = getStickyColProps(column, 'td');
   return /*#__PURE__*/React__default["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/cjs/TableHeader.js

@@ -33,12 +33,17 @@ var TableHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useTableContext = context.useTableContext(),
     onTableBodyScrollMock = _useTableContext.onTableBodyScrollMock,
     scrollHeaderElementRef = _useTableContext.scrollHeaderElementRef,
-    getTableHeaderProps = _useTableContext.getTableHeaderProps;
-  var cls = classname.cx(prefixCls, className);
-  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    getTableHeaderProps = _useTableContext.getTableHeaderProps,
+    semanticClassNames = _useTableContext.semanticClassNames,
+    semanticStyles = _useTableContext.semanticStyles;
+  var headerProps = getTableHeaderProps();
+  var cls = classname.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["default"].createElement("div", Object.assign({}, headerProps, {
     className: cls,
-    ref: scrollHeaderElementRef
-  }, getTableHeaderProps()), /*#__PURE__*/React__default["default"].createElement("table", {
+    ref: scrollHeaderElementRef,
+    style: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.style), headerStyle)
+  }), /*#__PURE__*/React__default["default"].createElement("table", {
     style: {
       width: '100%',
       position: 'relative'

package/lib/cjs/TableRow.js

@@ -60,7 +60,9 @@ var TableRow = /*#__PURE__*/React.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;
   // ** ************** 拖拽管理 *************** *//
@@ -146,7 +148,8 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // ** ************** 行状态管理 *************** *//
   var highlighted = isHighlightedRow(rowId);
   var hasError = isErrorRow(rowId);
-  var cls = classname.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 = classname.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 !== Table.SELECTION_DATA_KEY && item.dataKey !== BaseTable.EMBED_DATA_KEY;
   });
@@ -170,7 +173,7 @@ var TableRow = /*#__PURE__*/React.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) {
@@ -191,6 +194,7 @@ var TableRow = /*#__PURE__*/React.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/cjs/TheadContent.js

@@ -49,7 +49,9 @@ var TheadContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     sticky = _useTableContext.sticky,
     stickyTop = _useTableContext.stickyTop,
     stickyFooter = _useTableContext.stickyFooter,
-    stretchHeight = _useTableContext.stretchHeight;
+    stretchHeight = _useTableContext.stretchHeight,
+    semanticClassNames = _useTableContext.semanticClassNames,
+    semanticStyles = _useTableContext.semanticStyles;
   var activeColumnKeysAction = useCheckState.useCheckState();
   var trRefs = React.useRef([]);
   var needSticky = React.useMemo(function () {
@@ -65,7 +67,9 @@ var TheadContent = /*#__PURE__*/React.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 || {},
@@ -88,12 +92,11 @@ var TheadContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var cell = /*#__PURE__*/React__default["default"].createElement("th", Object.assign({
         key: dataKey
       }, stickyColProps, {
-        style: Object.assign(Object.assign({}, stickyColProps.style), {
-          // 表头合并场景下，被合并的表头需要隐藏
+        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: 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: 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/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,7 +75,23 @@ 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;
   // 是否需要双表格
   var needDoubleTable = DOUBLE_TABLE_SCENE.some(function (prop) {
     return !!rest[prop];
@@ -292,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

@@ -37,7 +37,9 @@ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
     sticky = _useTableContext.sticky,
     stickyTop = _useTableContext.stickyTop,
     stickyFooter = _useTableContext.stickyFooter,
-    stretchHeight = _useTableContext.stretchHeight;
+    stretchHeight = _useTableContext.stretchHeight,
+    semanticClassNames = _useTableContext.semanticClassNames,
+    semanticStyles = _useTableContext.semanticStyles;
   var activeColumnKeysAction = useCheckState();
   var trRefs = useRef([]);
   var needSticky = useMemo(function () {
@@ -53,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 || {},
@@ -76,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), {
-          // 表头合并场景下，被合并的表头需要隐藏
+        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/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

@@ -139,6 +139,10 @@ export declare const TableProvider: React.Provider<(Omit<{
     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) => {
@@ -278,4 +282,8 @@ export declare const useTableContext: () => Omit<{
     sticky?: boolean;
     stickyTop?: number;
     stickyFooter?: boolean;
+    /** 语义化 classNames（由 BaseTable 透传） */
+    semanticClassNames?: Record<string, any>;
+    /** 语义化 styles（由 BaseTable 透传） */
+    semanticStyles?: Record<string, any>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/table",
-  "version": "5.0.0-experimental.1",
+  "version": "5.0.0-experimental.2",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -45,25 +45,25 @@
   },
   "dependencies": {
     "@hi-ui/array-utils": "^5.0.0-experimental.0",
-    "@hi-ui/button": "^5.0.0-experimental.0",
-    "@hi-ui/checkbox": "^5.0.0-experimental.0",
+    "@hi-ui/button": "^5.0.0-experimental.1",
+    "@hi-ui/checkbox": "^5.0.0-experimental.1",
     "@hi-ui/classname": "^5.0.0-experimental.0",
     "@hi-ui/dom-utils": "^5.0.0-experimental.0",
-    "@hi-ui/drawer": "^5.0.0-experimental.0",
-    "@hi-ui/empty-state": "^5.0.0-experimental.0",
+    "@hi-ui/drawer": "^5.0.0-experimental.1",
+    "@hi-ui/empty-state": "^5.0.0-experimental.1",
     "@hi-ui/env": "^5.0.0-experimental.0",
     "@hi-ui/func-utils": "^5.0.0-experimental.0",
-    "@hi-ui/icon-button": "^5.0.0-experimental.0",
-    "@hi-ui/icons": "^5.0.0-experimental.0",
-    "@hi-ui/loading": "^5.0.0-experimental.0",
+    "@hi-ui/icon-button": "^5.0.0-experimental.1",
+    "@hi-ui/icons": "^5.0.0-experimental.1",
+    "@hi-ui/loading": "^5.0.0-experimental.1",
     "@hi-ui/object-utils": "^5.0.0-experimental.0",
-    "@hi-ui/pagination": "^5.0.0-experimental.0",
-    "@hi-ui/popper": "^5.0.0-experimental.0",
-    "@hi-ui/radio": "^5.0.0-experimental.0",
+    "@hi-ui/pagination": "^5.0.0-experimental.1",
+    "@hi-ui/popper": "^5.0.0-experimental.1",
+    "@hi-ui/radio": "^5.0.0-experimental.1",
     "@hi-ui/react-utils": "^5.0.0-experimental.0",
-    "@hi-ui/scrollbar": "^5.0.0-experimental.0",
-    "@hi-ui/select": "^5.0.0-experimental.1",
-    "@hi-ui/spinner": "^5.0.0-experimental.0",
+    "@hi-ui/scrollbar": "^5.0.0-experimental.1",
+    "@hi-ui/select": "^5.0.0-experimental.2",
+    "@hi-ui/spinner": "^5.0.0-experimental.1",
     "@hi-ui/times": "^5.0.0-experimental.0",
     "@hi-ui/tree-utils": "^5.0.0-experimental.0",
     "@hi-ui/type-assertion": "^5.0.0-experimental.0",
@@ -76,16 +76,17 @@
     "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
     "@hi-ui/use-update-effect": "^5.0.0-experimental.0",
     "axios": "^1.5.0",
-    "react-resizable": "^3.0.4"
+    "react-resizable": "^3.0.4",
+    "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=5.0.0-experimental.0",
+    "@hi-ui/core": ">=5.0.0-experimental.1",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^5.0.0-experimental.0",
-    "@hi-ui/core-css": "^5.0.0-experimental.1",
+    "@hi-ui/core": "^5.0.0-experimental.1",
+    "@hi-ui/core-css": "^5.0.0-experimental.2",
     "@types/react-resizable": "^1.7.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"