@rainbow-oh/yee-c 0.5.1 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Anchor/anchor-item.tsx

@@ -44,10 +44,14 @@ const AnchorItem: React.FC<AnchorItemProps> = (props) => {
     paddingLeft: `${level * INDENT_WIDTH}px`,
   };
 
-  const renderItem = (
+  const node = (
     <li className={cls} style={itemStyle} {...rest}>
       <a href={`#${targetKey}`} onClick={handleClick}>
-        <span className={`${prefixCls}-item-label`} title={String(title)}>
+        <span
+          className={clsx(`${prefixCls}-item-label`, classNames?.label)}
+          style={styles?.label}
+          title={String(title)}
+        >
           {title}
         </span>
       </a>
@@ -56,7 +60,7 @@ const AnchorItem: React.FC<AnchorItemProps> = (props) => {
 
   return (
     <>
-      {renderItem}
+      {node}
       {children}
     </>
   );

package/src/Anchor/interface.ts

@@ -46,7 +46,7 @@ export interface AnchorItemProps {
   children?: React.ReactNode;
 }
 
-export type AnchorSemanticDOM = 'item' | 'active' | 'content';
+export type AnchorSemanticDOM = 'item' | 'active' | 'content' | 'label';
 
 export interface AnchorProps extends DataAttributeProps {
   /**

package/src/Dialog/dialog.tsx

@@ -171,11 +171,19 @@ const Dialog = (baseprops: DialogProps) => {
             ></Button>
           ) : null}
           {title ? (
-            <div className={`${prefixCls}-header`}>
+            <div
+              className={clsx(`${prefixCls}-header`, classNames?.header)}
+              style={styles?.header}
+            >
               <div className={`${prefixCls}-title`}>{title}</div>
             </div>
           ) : null}
-          <div className={`${prefixCls}-body`}>{children}</div>
+          <div
+            className={clsx(`${prefixCls}-body`, classNames?.body)}
+            style={styles?.body}
+          >
+            {children}
+          </div>
           {renderFooter()}
         </div>
       </div>

package/src/Dialog/interface.ts

@@ -1,7 +1,7 @@
 import { ButtonType } from '../Button';
 import type { DataAttributeProps } from '../utils/types';
 
-export type SemanticDOM = 'content' | 'footer' | 'mask';
+export type SemanticDOM = 'content' | 'header' | 'body' | 'footer' | 'mask';
 
 export interface DialogProps extends DataAttributeProps {
   /**

package/src/Input/style/index.less

@@ -11,6 +11,7 @@
   line-height: var(--yee-input-line-height);
   border: var(--yee-input-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-input-border-radius, 4px);
+  font-family: var(--yee-font-family);
 
   &:not(@{pls}-disabled):hover {
     border-color: var(--yee-input-hover-border-color);
@@ -46,6 +47,7 @@
 
   &-inner {
     width: 100%;
+    font-family: var(--yee-font-family);
     line-height: var(--yee-input-line-height);
     background-color: inherit;
     border: none;

package/src/Table/demo/components-override.tsx

@@ -0,0 +1,49 @@
+/**
+ * 自定义表格元素（可被外部接管）
+ *
+ * Table 暴露两个接缝供外部库（如 dnd-kit）接管行/体渲染：
+ * - components.body.tbody —— 替换 <tbody>，外部可在此包 SortableContext 等 Provider；
+ * - components.body.row   —— 整行接管，消费方自行渲染 <tr> + 单元格，可在任意单元格里放拖拽手柄。
+ *
+ * Table 本身不依赖任何拖拽库；本 demo 不引入 dnd，仅证明替换点生效。
+ */
+import { Table } from '@rainbow-oh/yee-c';
+import type { TableComponents, TableRowRendererProps } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+// 替换 <tbody>：保持渲染 <tbody>，外部库可在此包 SortableContext。
+const CustomTbody = (props: { className?: string; children?: React.ReactNode }) => (
+  <tbody className={props.className} data-custom-tbody>
+    {props.children}
+  </tbody>
+);
+
+// 整行接管：消费方渲染整 <tr> + 单元格，可在此放拖拽手柄等任意内容。
+const CustomRow = ({ record, index, columns, rowKey }: TableRowRendererProps) => (
+  <tr data-row-key={rowKey} style={{ background: index % 2 === 0 ? '#f8fafc' : undefined }}>
+    <td style={{ width: 40, textAlign: 'center', color: '#2563eb', fontWeight: 700 }}>{index + 1}</td>
+    {columns.map((col) => (
+      <td key={String(col.key)}>{record[col.dataIndex || '']}</td>
+    ))}
+  </tr>
+);
+
+export default () => {
+  const columns = [
+    { title: 'Name', dataIndex: 'name', key: 'name' },
+    { title: 'Age', dataIndex: 'age', key: 'age' },
+    { title: 'Address', dataIndex: 'address', key: 'address' },
+  ];
+
+  const dataSource = [
+    { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
+    { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
+    { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
+  ];
+
+  const components: TableComponents = {
+    body: { tbody: CustomTbody, row: CustomRow },
+  };
+
+  return <Table columns={columns} dataSource={dataSource} components={components} />;
+};

package/src/Table/demo/grouping.tsx

@@ -0,0 +1,104 @@
+import type { ColumnProps, RowSelectionType } from '@rainbow-oh/yee-c';
+import { Table } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+export default () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState<
+    Array<string | number>
+  >([]);
+
+  const columns: ColumnProps[] = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      fixed: 'left',
+      width: 120,
+      sorter: true,
+    },
+    {
+      title: 'Info',
+      key: 'info',
+      children: [
+        { title: 'Age', dataIndex: 'age', key: 'age', width: 100, sorter: true },
+        {
+          title: 'Address',
+          dataIndex: 'address',
+          key: 'address',
+          width: 200,
+        },
+      ],
+    },
+    {
+      title: 'Company',
+      key: 'company',
+      children: [
+        {
+          title: 'Name',
+          dataIndex: 'companyName',
+          key: 'companyName',
+          width: 180,
+        },
+        {
+          title: 'Address',
+          dataIndex: 'companyAddress',
+          key: 'companyAddress',
+          width: 220,
+        },
+      ],
+    },
+    {
+      title: 'Action',
+      key: 'action',
+      fixed: 'right',
+      width: 100,
+      render: (record) => (
+        <a onClick={() => console.log(record)}>Edit</a>
+      ),
+    },
+  ];
+
+  const dataSource = [
+    {
+      key: '1',
+      name: 'John Brown',
+      age: 32,
+      address: 'New York No. 1 Lake Park',
+      companyName: 'Acme Inc.',
+      companyAddress: 'NY Office',
+    },
+    {
+      key: '2',
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park',
+      companyName: 'Globex',
+      companyAddress: 'London Office',
+    },
+    {
+      key: '3',
+      name: 'Joe Black',
+      age: 28,
+      address: 'Sidney No. 1 Lake Park',
+      companyName: 'Initech',
+      companyAddress: 'Sidney Office',
+    },
+  ];
+
+  const rowSelection = {
+    type: 'checkbox',
+    selectedRowKeys,
+    onChange: (keys: string[] | number[]) => setSelectedRowKeys(keys),
+  };
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={dataSource}
+      rowKey="key"
+      rowSelection={rowSelection as RowSelectionType}
+      bordered
+      scroll={{ x: 1200 }}
+    />
+  );
+};

package/src/Table/hooks/useColumns.ts

@@ -2,8 +2,18 @@ import React, { useMemo } from 'react';
 import useDeepCompareMemo from '../../hooks/useDeepCompareMemo';
 import deepClone from '../../utils/deepClone';
 import { handleColumns } from '../util';
+import {
+  flattenLeafColumns,
+  injectSelectionExpand,
+  parseHeaderRows,
+} from '../util/header';
 
-import { ColumnProps, ExpandableType, RowSelectionType } from '../interface';
+import type {
+  ColumnProps,
+  ExpandableType,
+  RowSelectionType,
+  WrapedColumnProps,
+} from '../interface';
 
 export default function useColumns({
   children,
@@ -22,15 +32,15 @@ export default function useColumns({
   const shouldRenderExpand = !!expandable;
 
   const getColumnsFromChild = (
-    children: React.ReactElement<ColumnProps>[],
+    childs: React.ReactElement<ColumnProps>[],
   ): Array<ColumnProps> | null => {
-    const columns: ColumnProps[] = [];
-    React.Children.forEach(children, (child) => {
+    const cols: ColumnProps[] = [];
+    React.Children.forEach(childs, (child) => {
       if (child) {
-        columns.push({ ...(child.props as ColumnProps) });
+        cols.push({ ...(child.props as ColumnProps) });
       }
     });
-    return columns.length ? columns : null;
+    return cols.length ? cols : null;
   };
 
   const childColumns: Array<ColumnProps> | null = useMemo(() => {
@@ -39,48 +49,21 @@ export default function useColumns({
       : null;
   }, [children]);
 
-  // Wrap columns
-  const wrapColumns = (columns: Array<ColumnProps>) => {
-    let result = deepClone(columns);
-    if (rowSelection) {
-      const { index = 1 } = rowSelection;
-      const loc = index - 1;
-      result.splice(loc, 0, {
-        width: 50,
-        ...rowSelection,
-        key: 'YEE_SELECTION_COL',
-      });
-    }
-    if (expandable) {
-      const { index = 1, visible = true } = expandable;
-      const loc = index ? index - 1 : rowSelection ? 1 : 0;
-      if (visible !== false) {
-        result.splice(loc, 0, {
-          width: 50,
-          ...expandable,
-          key: 'YEE_EXPAND_COL',
-        });
-      }
-    }
-    result = handleColumns(result);
-    return result;
-  };
-
-  // const [mergedColumns, setMergedColumns] = React.useState(
-  //   wrapColumns(childColumns || columns || []),
-  // );
-
-  // useDeepCompareEffect(() => {
-  //   const merged = wrapColumns(childColumns || columns || []);
-  //   setMergedColumns(merged);
-  // }, [childColumns, columns, shouldRenderSelection, shouldRenderExpand]);
-
-  const mergedColumns = useDeepCompareMemo(() => {
-    return wrapColumns(childColumns || columns || []);
+  // Build the column tree (with selection/expand injected at the top level),
+  // then derive both the flat leaf columns (body/colgroup/summary/sorter) and
+  // the 2D header rows (thead multi-level rendering).
+  const { wrapedColumns, headerRows } = useDeepCompareMemo(() => {
+    const base = (deepClone(childColumns || columns || []) ||
+      []) as WrapedColumnProps[];
+    const tree = injectSelectionExpand(base, rowSelection, expandable);
+    const leaves = flattenLeafColumns(tree);
+    const wraped = handleColumns(leaves);
+    const rows = parseHeaderRows(tree);
+    return { wrapedColumns: wraped, headerRows: rows };
   }, [childColumns, columns, shouldRenderSelection, shouldRenderExpand]);
 
   return {
-    wrapedColumns: mergedColumns,
-    columns: childColumns || columns,
+    wrapedColumns,
+    headerRows,
   };
 }

package/src/Table/index.en-US.md

@@ -22,6 +22,8 @@ A table displays rows of data.
 <code src="./demo/expand.tsx" title="Expandable" description="Expandable rows"></code>
 <code src="./demo/pagination.tsx" title="Pagination" description="Table with pagination"></code>
 <code src="./demo/column-filter.tsx" title="column filter" description="Table column filter"></code>
+<code src="./demo/grouping.tsx" title="Grouping" description="Multi-level header"></code>
+<code src="./demo/components-override.tsx" title="components override" description="tbody / row rendering that can be taken over by external libs (e.g. dnd-kit)"></code>
 ## API
 
 ### TableProps
@@ -33,7 +35,7 @@ A table displays rows of data.
 | style | `React.CSSProperties` | Custom root style | - |
 | classNames | `Partial<Record<SemanticType, string>>` | Semantic class names | - |
 | styles | `Partial<Record<SemanticType, React.CSSProperties>>` | Semantic styles | - |
-| components | `Partial<Record<SemanticType, React.ReactNode>>` | Custom table elements | - |
+| components | [`TableComponents`](#tablecomponents) | Custom table elements, can be taken over by external libs (e.g. dnd-kit) | - |
 | bordered | `boolean` | Show border | - |
 | columns | `ColumnProps[]` | Table column configuration | - |
 | children | `Array<React.ReactElement<ColumnProps>> | React.ReactElement<ColumnProps>` | Children elements | - |
@@ -77,7 +79,7 @@ A table displays rows of data.
 | width | `number \| string` | Column width | - |
 | title | `React.ReactNode` | Column title | - |
 | helper | `string \| React.ReactNode` | Help icon for column header | - |
-| children | `(record: Record<string, any>, rowIndex: number) => React.ReactNode` | Custom cell content | - |
+| children | `ColumnProps[]` | Sub-columns for header grouping (multi-level header); use `render` for custom cell content | - |
 | onCell | `(record: object, rowIndex: number) => object` | Cell props | - |
 | onHeaderCell | `(column: ColumnProps) => object` | Header cell props | - |
 | render | `(record: object, rowIndex: number) => React.ReactNode` | Custom render | - |
@@ -113,4 +115,30 @@ A table displays rows of data.
 | rowExpandable | `(record: object) => boolean` | Whether row is expandable | - |
 | onExpand | `(expanded: boolean, record: Record<string, any>) => void` | Expand callback | - |
 | onExpandedRowsChange | `(expandedKeys?: Array<number \| string>) => void` | Expanded rows change callback | - |
-| expandedRowRender | `(record, index, page) => React.ReactNode` | Expanded row render | - |
+| expandedRowRender | `(record, index, page) => React.ReactNode` | Expanded row render | - |
+
+### TableComponents
+
+Seams exposed by Table so an external lib (e.g. dnd-kit) can take over rendering. **Table itself has no dependency on any drag library** — it only provides replacement points; drag logic is owned by the consumer.
+
+| Property | Type | Description | Default |
+| --- | --- | --- | --- |
+| body | `TableBodyComponents` | Replaceable body elements | - |
+
+#### TableBodyComponents
+
+| Property | Type | Description | Default |
+| --- | --- | --- | --- |
+| tbody | `React.ElementType` | Replace `<tbody>`; commonly used to wrap a `SortableContext` provider | - |
+| row | `React.ComponentType<TableRowRendererProps>` | Full-row takeover: consumer renders the whole `<tr>` + cells (can place a drag handle, etc.) | - |
+
+> Under full-row takeover, the consumer-rendered row **does not** get Table's auto selection / expand / colSpan / stripe row-level features. Table's pagination / sorting / filtering still apply (they mutate `dataSource`).
+
+#### TableRowRendererProps (received by components.body.row)
+
+| Property | Type | Description |
+| --- | --- | --- |
+| record | `Record<string, any>` | Current row data |
+| index | `number` | Current row index |
+| columns | `WrapedColumnProps[]` | Table-resolved columns |
+| rowKey | `string \| number` | Current row key value; usable as sortable id |

package/src/Table/index.ts

@@ -8,6 +8,10 @@ export type {
   PaginationType,
   RowSelectionType,
   TableProps,
+  TableComponents,
+  TableBodyComponents,
+  TableRowRendererProps,
+  HeaderCell,
   onChangeParams,
 } from './interface';
 

package/src/Table/index.zh-CN.md

@@ -23,9 +23,11 @@ toc: 'content'
 <code src="./demo/expand.tsx" title="可展开" description="可展开行的表格"></code>
 <code src="./demo/pagination.tsx" title="分页" description="带分页的表格"></code>
 <code src="./demo/merge-cell.tsx" title="合并单元格" description="合并单元格的表格"></code>
+<code src="./demo/grouping.tsx" title="表头分组" description="多级表头"></code>
 <code src="./demo/summary.tsx" title="统计" description="表格的统计行"></code>
 <code src="./demo/filter.tsx" title="筛选" description="表格的筛选功能"></code>
 <code src="./demo/column-filter.tsx" title="列筛选" description="表格的列筛选功能"></code>
+<code src="./demo/components-override.tsx" title="自定义表格元素" description="可被外部（如 dnd-kit）接管的 tbody / 行渲染"></code>
 
 ## API
 
@@ -38,7 +40,7 @@ toc: 'content'
 | style             | `React.CSSProperties`                                                       | 自定义根样式                         | -      |
 | classNames        | `Partial<Record<SemanticType, string>>`                                     | 语义化类名                           | -      |
 | styles            | `Partial<Record<SemanticType, React.CSSProperties>>`                        | 语义化样式                           | -      |
-| components        | `Partial<Record<SemanticType, React.ReactNode>>`                            | 自定义表格元素                       | -      |
+| components        | [`TableComponents`](#tablecomponents)                                       | 自定义表格元素，可被外部（如 dnd-kit）接管 | -      |
 | bordered          | `boolean`                                                                   | 是否展示外边框和列边框               | -      |
 | columns           | `ColumnProps[]`                                                             | 表格列的配置信息                     | -      |
 | children          | `Array<React.ReactElement<ColumnProps>> \| React.ReactElement<ColumnProps>` | 子元素                               | -      |
@@ -82,7 +84,7 @@ toc: 'content'
 | width        | `number \| string`                                                   | 设置宽度                       | -      |
 | title        | `React.ReactNode`                                                    | 设置列头显示文本               | -      |
 | helper       | `string \| React.ReactNode`                                          | 设置表头help 帮助图标          | -      |
-| children     | `(record: Record<string, any>, rowIndex: number) => React.ReactNode` | 回调函数，用于自定义单元格内容 | -      |
+| children     | `ColumnProps[]`                                                     | 子列，用于表头分组（多级表头）；自定义单元格内容请用 `render` | -      |
 | onCell       | `(record: object, rowIndex: number) => object`                       | 设置单元格属性                 | -      |
 | onHeaderCell | `(column: ColumnProps) => object`                                    | 设置表头单元格属性             | -      |
 | render       | `(record: Record<string, any>, rowIndex: number) => React.ReactNode` | 自定义渲染函数                 | -      |
@@ -119,3 +121,29 @@ toc: 'content'
 | onExpand               | `(expanded: boolean, record: Record<string, any>) => void` | 点击展开图标时触发       | -      |
 | onExpandedRowsChange   | `(expandedKeys?: Array<number \| string>) => void`         | 展开的行变化时触发       | -      |
 | expandedRowRender      | `(record, index, page) => React.ReactNode`                 | 额外的展开行             | -      |
+
+### TableComponents
+
+Table 暴露的"可被外部接管"接缝。**Table 本身不依赖任何拖拽库**，仅提供替换点；dnd 等逻辑由消费方持有。
+
+| 属性名 | 类型                  | 描述             | 默认值 |
+| ------ | --------------------- | ---------------- | ------ |
+| body   | `TableBodyComponents` | 可替换的表体元素 | -      |
+
+#### TableBodyComponents
+
+| 属性名 | 类型                                       | 描述                                                          | 默认值 |
+| ------ | ------------------------------------------ | ------------------------------------------------------------- | ------ |
+| tbody  | `React.ElementType`                        | 替换 `<tbody>`，常用于在外部包 `SortableContext` 等 Provider  | -      |
+| row    | `React.ComponentType<TableRowRendererProps>` | 整行接管：消费方自行渲染 `<tr>` + 单元格（可放拖拽手柄等）    | -      |
+
+> 整行接管时，消费方渲染的行**不享受** Table 的自动 selection / expand / colSpan / stripe 等行级特性；Table 的分页 / 排序 / 筛选仍生效（它们改变 `dataSource`）。
+
+#### TableRowRendererProps（components.body.row 收到的 props）
+
+| 属性名   | 类型                    | 描述                              |
+| -------- | ----------------------- | --------------------------------- |
+| record   | `Record<string, any>`   | 当前行数据                        |
+| index    | `number`                | 当前行索引                        |
+| columns  | `WrapedColumnProps[]`   | Table 解析后的列                  |
+| rowKey   | `string \| number`      | 当前行 key 值，可作 sortable id   |

package/src/Table/interface.ts

@@ -70,6 +70,14 @@ export interface HeadCellProps extends Omit<WrapedColumnProps, 'title'> {
   internalFilters?: { [dataIndex: string]: boolean }; // Whether this column is filtered
   onSort?: (dataIndex: string, sorter: any) => void;
   onInternalFilter?: (dataIndex: string, value: string) => void;
+  /**
+   * Horizontal span, used for grouped header cells
+   */
+  colSpan?: number;
+  /**
+   * Vertical span, used for grouped header cells
+   */
+  rowSpan?: number;
 }
 
 // Row selection config
@@ -252,9 +260,9 @@ export interface ColumnProps {
    */
   helper?: string | React.ReactNode;
   /**
-   * Callback function for custom cell content
+   * Sub-columns for header grouping (multi-level header). Use cell `render` for custom cell content.
    */
-  children?: (record: Record<string, any>, rowIndex: number) => React.ReactNode;
+  children?: ColumnProps[];
   /**
    * Set cell properties
    */
@@ -287,8 +295,55 @@ export interface WrapedColumnProps
    */
 }
 
+/**
+ * A header cell resolved from the column tree, with computed span info for multi-level headers.
+ */
+export interface HeaderCell {
+  /**
+   * The source wrapped column (leaf or group)
+   */
+  column: WrapedColumnProps;
+  /**
+   * Horizontal span (number of leaf columns covered)
+   */
+  colSpan: number;
+  /**
+   * Vertical span (number of header rows covered)
+   */
+  rowSpan: number;
+  /**
+   * Whether this cell has sub-columns (group header)
+   */
+  hasSubColumns?: boolean;
+}
+
 type DownloadType = ButtonProps;
 
+/**
+ * 行接管渲染器收到的 props（components.body.row）
+ */
+export interface TableRowRendererProps {
+  record: Record<string, any>;
+  index: number;
+  columns: WrapedColumnProps[];
+  /** 当前行 key 值（= record[rowKey]），可作 sortable id */
+  rowKey: string | number;
+}
+
+/**
+ * 可被外部接管的 <tbody> / 行渲染
+ */
+export interface TableBodyComponents {
+  /** 替换 <tbody>；常用于在外部包 SortableContext 等 Provider */
+  tbody?: React.ElementType;
+  /** 整行接管：消费方自行渲染 <tr> + 单元格（含拖拽手柄等） */
+  row?: React.ComponentType<TableRowRendererProps>;
+}
+
+export interface TableComponents {
+  body?: TableBodyComponents;
+}
+
 export type SemanticProps = {
   /**
    * Semantic class names
@@ -301,7 +356,7 @@ export type SemanticProps = {
   /**
    * Custom table elements
    */
-  components?: Partial<Record<SemanticType, React.ReactNode>>;
+  components?: TableComponents;
 };
 
 export interface HeaderProps extends SemanticProps {
@@ -358,11 +413,14 @@ export interface TableRowProps {
   stripe?: boolean;
   expandedKeyType?: string;
   onRow?: (record: Record<string, any>, index: number) => Record<string, any>;
-  rowClassName?: (record: Record<string, any>, index: number) => string;
+  rowClassName?: (
+    record: Record<string, any>,
+    index: number,
+  ) => string | undefined;
   rowStyle?: (
     record: Record<string, any>,
     index: number,
-  ) => React.CSSProperties;
+  ) => React.CSSProperties | undefined;
   onDoubleClick?: (
     record: Record<string, any>,
     event: React.MouseEvent<HTMLTableRowElement>,
@@ -473,7 +531,7 @@ export interface TableProps
   /**
    * Custom table elements
    */
-  components?: Partial<Record<SemanticType, React.ReactNode>>;
+  components?: TableComponents;
   /**
    * Whether to show outer and column borders
    */
@@ -519,11 +577,11 @@ export interface TableProps
   /**
    * Row class name, unlike classNames, this prop can be set dynamically via a function
    */
-  rowClassName?: (record: object) => string;
+  rowClassName?: (record: object) => string | undefined;
   /**
    * Row style, unlike styles, this prop can be set dynamically via a function
    */
-  rowStyle?: (record: object) => React.CSSProperties;
+  rowStyle?: (record: object) => React.CSSProperties | undefined;
   /**
    * Pagination config
    */

package/src/Table/style/index.less

@@ -153,7 +153,25 @@
 
   &-tbody {
     @{pls}-cell {
-      background-color: var(--yee-table-cell-bg-color, #fff);
+      background-color: var(--yee-table-cell-bg-color, inherit);
+    }
+
+    @{pls}-row {
+      &:hover {
+        background-color: var(--yee-table-tbody-tr-hover-bg-color);
+      }
+    }
+  }
+
+  &-odd-row {
+    > @{pls}-cell {
+      background-color: var(--yee-table-odd-row-bg-color);
+    }
+  }
+
+  &-even-row {
+    > @{pls}-cell {
+      background-color: var(--yee-table-even-row-bg-color);
     }
   }