@rainbow-oh/yee-c 0.5.1 → 0.6.1

package/dist/esm/Table/hooks/useColumns.js

@@ -8,6 +8,7 @@ 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";
 export default function useColumns(_ref) {
   var children = _ref.children,
     columns = _ref.columns,
@@ -15,64 +16,37 @@ export default function useColumns(_ref) {
     expandable = _ref.expandable;
   var shouldRenderSelection = !!rowSelection;
   var shouldRenderExpand = !!expandable;
-  var getColumnsFromChild = function getColumnsFromChild(children) {
-    var columns = [];
-    React.Children.forEach(children, function (child) {
+  var getColumnsFromChild = function getColumnsFromChild(childs) {
+    var cols = [];
+    React.Children.forEach(childs, function (child) {
       if (child) {
-        columns.push(_objectSpread({}, child.props));
+        cols.push(_objectSpread({}, child.props));
       }
     });
-    return columns.length ? columns : null;
+    return cols.length ? cols : null;
   };
   var childColumns = useMemo(function () {
     return children ? getColumnsFromChild(children) : null;
   }, [children]);
 
-  // Wrap columns
-  var wrapColumns = function wrapColumns(columns) {
-    var result = deepClone(columns);
-    if (rowSelection) {
-      var _rowSelection$index = rowSelection.index,
-        index = _rowSelection$index === void 0 ? 1 : _rowSelection$index;
-      var loc = index - 1;
-      result.splice(loc, 0, _objectSpread(_objectSpread({
-        width: 50
-      }, rowSelection), {}, {
-        key: 'YEE_SELECTION_COL'
-      }));
-    }
-    if (expandable) {
-      var _expandable$index = expandable.index,
-        _index = _expandable$index === void 0 ? 1 : _expandable$index,
-        _expandable$visible = expandable.visible,
-        visible = _expandable$visible === void 0 ? true : _expandable$visible;
-      var _loc = _index ? _index - 1 : rowSelection ? 1 : 0;
-      if (visible !== false) {
-        result.splice(_loc, 0, _objectSpread(_objectSpread({
-          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]);
-
-  var mergedColumns = useDeepCompareMemo(function () {
-    return wrapColumns(childColumns || columns || []);
-  }, [childColumns, columns, shouldRenderSelection, shouldRenderExpand]);
+  // 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).
+  var _useDeepCompareMemo = useDeepCompareMemo(function () {
+      var base = deepClone(childColumns || columns || []) || [];
+      var tree = injectSelectionExpand(base, rowSelection, expandable);
+      var leaves = flattenLeafColumns(tree);
+      var wraped = handleColumns(leaves);
+      var rows = parseHeaderRows(tree);
+      return {
+        wrapedColumns: wraped,
+        headerRows: rows
+      };
+    }, [childColumns, columns, shouldRenderSelection, shouldRenderExpand]),
+    wrapedColumns = _useDeepCompareMemo.wrapedColumns,
+    headerRows = _useDeepCompareMemo.headerRows;
   return {
-    wrapedColumns: mergedColumns,
-    columns: childColumns || columns
+    wrapedColumns: wrapedColumns,
+    headerRows: headerRows
   };
 }

package/dist/esm/Table/index.d.ts

@@ -2,7 +2,7 @@ import Column from './column';
 import Summary from './summary';
 import InternalTable from './table';
 import Head from './theader';
-export type { ColumnProps, PaginationType, RowSelectionType, TableProps, onChangeParams, } from './interface';
+export type { ColumnProps, PaginationType, RowSelectionType, TableProps, TableComponents, TableBodyComponents, TableRowRendererProps, HeaderCell, onChangeParams, } from './interface';
 type TableType = typeof InternalTable & {
     Column: typeof Column;
     Summary: typeof Summary;

package/dist/esm/Table/interface.d.ts

@@ -66,6 +66,14 @@ export interface HeadCellProps extends Omit<WrapedColumnProps, 'title'> {
     };
     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;
 }
 export interface RowSelectionType {
     /**
@@ -226,9 +234,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
      */
@@ -252,7 +260,50 @@ export interface WrapedColumnProps extends ColumnProps, ExpandableType, Omit<Row
      */
     isFixedRightFirst?: boolean;
 }
+/**
+ * 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
@@ -265,7 +316,7 @@ export type SemanticProps = {
     /**
      * Custom table elements
      */
-    components?: Partial<Record<SemanticType, React.ReactNode>>;
+    components?: TableComponents;
 };
 export interface HeaderProps extends SemanticProps {
     /**
@@ -316,8 +367,8 @@ 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;
-    rowStyle?: (record: Record<string, any>, index: number) => React.CSSProperties;
+    rowClassName?: (record: Record<string, any>, index: number) => string | undefined;
+    rowStyle?: (record: Record<string, any>, index: number) => React.CSSProperties | undefined;
     onDoubleClick?: (record: Record<string, any>, event: React.MouseEvent<HTMLTableRowElement>) => void;
     onExpand: ({ expanded, record, index, }: {
         expanded: boolean;
@@ -403,7 +454,7 @@ export interface TableProps extends FooterProps, Omit<HeaderProps, 'pageData'>,
     /**
      * Custom table elements
      */
-    components?: Partial<Record<SemanticType, React.ReactNode>>;
+    components?: TableComponents;
     /**
      * Whether to show outer and column borders
      */
@@ -447,11 +498,11 @@ export interface TableProps extends FooterProps, Omit<HeaderProps, 'pageData'>,
     /**
      * 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/dist/esm/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);
     }
   }
 

package/dist/esm/Table/table.js

@@ -83,7 +83,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       rowSelection: rowSelection
     }),
     wrapedColumns = _useColumns.wrapedColumns,
-    columns = _useColumns.columns;
+    headerRows = _useColumns.headerRows;
 
   // Filter
   var _useFilter = useFilter({
@@ -95,7 +95,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
   // Sort
   var _useSorter = useSorter({
       data: filteredData,
-      columns: columns
+      columns: wrapedColumns
     }),
     sortedData = _useSorter.data,
     sorters = _useSorter.sorters,
@@ -133,7 +133,6 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     }),
     selectedRowKeys = _useSelection.selectedRowKeys,
     checkedAll = _useSelection.checkedAll,
-    pageDataRowKeys = _useSelection.pageDataRowKeys,
     onCheckAll = _useSelection.onCheckAll,
     onSelectionChange = _useSelection.onChange;
 
@@ -185,7 +184,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       prefixCls: prefixCls,
       header: header,
       download: download,
-      columns: columns,
+      columns: wrapedColumns,
       pageData: pageData,
       dataSource: dataSource
     });
@@ -196,8 +195,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     }
     var ths = omit(rest, ['rowSelection']);
     return /*#__PURE__*/React.createElement(THeader, _extends({}, ths, {
-      columns: wrapedColumns,
-      pageDataRowKeys: pageDataRowKeys,
+      headerRows: headerRows,
       checkedAll: checkedAll,
       sorters: sorters,
       onSort: onSort,
@@ -235,7 +233,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     var table = /*#__PURE__*/React.createElement(TableCtx.Provider, {
       value: {
         prefixCls: prefixCls,
-        columns: columns,
+        columns: wrapedColumns,
         classNames: classNames,
         styles: styles,
         components: components,

package/dist/esm/Table/tbody/cell.d.ts

@@ -7,7 +7,6 @@ export interface BodyCellProps {
     fixedToLeft?: number;
     current: number;
     pageSize: number;
-    children?: (record: Record<string, any>, index: number) => React.ReactNode;
 }
 declare const TableCell: React.FC<BodyCellProps>;
 export default TableCell;

package/dist/esm/Table/tbody/cell.js

@@ -22,7 +22,6 @@ var TableCell = function TableCell(props) {
     className = column.className,
     styles = column.styles,
     classNames = column.classNames,
-    children = column.children,
     onCell = column.onCell,
     render = column.render;
   var _useContext = useContext(TableCtx),
@@ -31,10 +30,6 @@ var TableCell = function TableCell(props) {
     if (render) {
       return typeof render === 'function' ? render(record, rowIndex) : render;
     }
-    if (typeof children === 'function') {
-      // @ts-ignore
-      return children(record, rowIndex);
-    }
     return /*#__PURE__*/React.createElement("div", {
       className: clsx("".concat(prefixCls, "-cell-inner"), classNames === null || classNames === void 0 ? void 0 : classNames.inner),
       style: styles === null || styles === void 0 ? void 0 : styles.inner

package/dist/esm/Table/tbody/index.js

@@ -8,12 +8,15 @@ import { TableCtx } from "../table";
 import LazyRow from "./lazy-row";
 import TableRow from "./row";
 var TableBody = function TableBody(props) {
+  var _components$body$tbod, _components$body, _components$body2;
   var columns = props.columns,
     pageData = props.pageData,
     lazyLoad = props.lazyLoad,
     rest = _objectWithoutProperties(props, _excluded);
   var _React$useContext = React.useContext(TableCtx),
-    prefixCls = _React$useContext.prefixCls;
+    prefixCls = _React$useContext.prefixCls,
+    components = _React$useContext.components,
+    rowKey = _React$useContext.rowKey;
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   var tableLocale = locale.table;
@@ -26,6 +29,11 @@ var TableBody = function TableBody(props) {
   }, tableLocale.emptyText)));
   var dataLength = pageData.length;
   if (dataLength === 0) return empty;
+  var BodyWrapper = (_components$body$tbod = components === null || components === void 0 || (_components$body = components.body) === null || _components$body === void 0 ? void 0 : _components$body.tbody) !== null && _components$body$tbod !== void 0 ? _components$body$tbod : 'tbody';
+  var RowRenderer = components === null || components === void 0 || (_components$body2 = components.body) === null || _components$body2 === void 0 ? void 0 : _components$body2.row;
+  var resolveRowKey = function resolveRowKey(record) {
+    return typeof rowKey === 'function' ? rowKey(record) : record[rowKey];
+  };
   var getRenderRows = function getRenderRows() {
     if (lazyLoad) {
       return /*#__PURE__*/React.createElement(LazyRow, _extends({}, rest, {
@@ -34,6 +42,17 @@ var TableBody = function TableBody(props) {
       }));
     }
     return pageData.map(function (record, index) {
+      // 整行接管：由外部组件渲染 <tr> + 单元格（可放拖拽手柄等）
+      if (RowRenderer) {
+        var rk = resolveRowKey(record);
+        return /*#__PURE__*/React.createElement(RowRenderer, {
+          key: rk !== null && rk !== void 0 ? rk : index,
+          record: record,
+          index: index,
+          columns: columns,
+          rowKey: rk
+        });
+      }
       return /*#__PURE__*/React.createElement(TableRow, _extends({}, rest, {
         columns: columns,
         record: record,
@@ -42,7 +61,7 @@ var TableBody = function TableBody(props) {
       }));
     });
   };
-  var tbody = /*#__PURE__*/React.createElement("tbody", {
+  var tbody = /*#__PURE__*/React.createElement(BodyWrapper, {
     className: "".concat(prefixCls, "-tbody")
   }, getRenderRows());
   return tbody;

package/dist/esm/Table/tbody/row.js

@@ -1,6 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["index", "record", "columns", "highlight", "stripe", "expandedKeyType", "expandedRowKeys", "selectedRowKeys", "expandable", "onExpand", "onRow", "rowClassName", "rowStyle", "onDoubleClick", "onSelectionChange"],
-  _excluded2 = ["type", "onCell"];
+var _excluded = ["index", "record", "columns", "highlight", "stripe", "expandedKeyType", "expandedRowKeys", "selectedRowKeys", "expandable", "onExpand", "onRow", "rowClassName", "rowStyle", "onDoubleClick", "onSelectionChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -58,23 +57,28 @@ var TableRow = function TableRow(props) {
   };
   var getSelection = function getSelection(column) {
     var type = column.type,
-      onCell = column.onCell,
-      restCol = _objectWithoutProperties(column, _excluded2);
-    var key = record[rowKey];
-    var props = onCell ? onCell(record, index) : {};
-    var checked = selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.includes(key);
-    var commonProps = _objectSpread(_objectSpread(_objectSpread({}, restCol), props), {}, {
+      colDisabled = column.disabled,
+      onCell = column.onCell;
+    var rowKeyValue = record[rowKey];
+    var props = (onCell === null || onCell === void 0 ? void 0 : onCell(record, index)) || {};
+    var checked = selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.includes(rowKeyValue);
+
+    // rowSelection.disabled may be a boolean, a per-row array, or a function
+    var disabled = typeof colDisabled === 'function' ? colDisabled(record, index) : Array.isArray(colDisabled) ? colDisabled[index] : !!colDisabled;
+
+    // Only forward input-relevant props. Spreading the whole column would leak
+    // rowSelection fields (selectedRowKeys/selectAll/...) and the synthetic
+    // `key` onto the DOM <input>.
+    var commonProps = _objectSpread({
       checked: checked,
-      value: key,
-      onChange: onSelectionChange
-    });
+      value: rowKeyValue,
+      onChange: onSelectionChange,
+      disabled: disabled
+    }, props);
     if (type === 'checkbox') {
-      // @ts-ignore
       return /*#__PURE__*/React.createElement(Checkbox, commonProps);
-    } else {
-      // @ts-ignore
-      return /*#__PURE__*/React.createElement(Radio, commonProps);
     }
+    return /*#__PURE__*/React.createElement(Radio, commonProps);
   };
   var colSpanStart = Infinity;
   var colSpanEnd = -1;

package/dist/esm/Table/theader/cell.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["fixed", "isFixedLeftLast", "isFixedRightFirst", "align", "title", "dataIndex", "sorter", "filter", "sorters", "className", "styles", "classNames", "showSorterTooltip", "tableActionBarShowOnHover", "internalFilters", "style", "width", "onHeaderCell", "onSort", "onInternalFilter"];
+var _excluded = ["fixed", "isFixedLeftLast", "isFixedRightFirst", "align", "title", "dataIndex", "sorter", "filter", "sorters", "className", "styles", "classNames", "showSorterTooltip", "tableActionBarShowOnHover", "internalFilters", "style", "width", "colSpan", "rowSpan", "onHeaderCell", "onSort", "onInternalFilter"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -34,6 +34,8 @@ var HeadCell = function HeadCell(props) {
     internalFilters = props.internalFilters,
     style = props.style,
     width = props.width,
+    colSpan = props.colSpan,
+    rowSpan = props.rowSpan,
     onHeaderCell = props.onHeaderCell,
     onSort = props.onSort,
     onInternalFilter = props.onInternalFilter,
@@ -123,7 +125,9 @@ var HeadCell = function HeadCell(props) {
     return _objectSpread(_objectSpread({}, cellProps), {}, {
       className: cls,
       scope: 'col',
-      style: styles
+      style: styles,
+      colSpan: colSpan,
+      rowSpan: rowSpan
     });
   };
   var thProps = getThProps();

package/dist/esm/Table/theader/index.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { HeadCellProps } from '../interface';
+import type { HeaderCell } from '../interface';
 export interface TableHeadProps {
-    children?: React.ReactNode;
-    columns?: Array<HeadCellProps>;
-    isExpandable?: boolean;
-    expandedColumn?: number;
+    /**
+     * Resolved 2D header rows (one array per header row), produced by parseHeaderRows
+     */
+    headerRows?: HeaderCell[][];
 }
 declare const _default: React.NamedExoticComponent<any>;
 export default _default;

package/dist/esm/Table/theader/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["columns", "onCheckAll", "checkedAll", "onHeaderRow"],
+var _excluded = ["headerRows", "onCheckAll", "checkedAll", "onHeaderRow"],
   _excluded2 = ["children"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -9,49 +9,62 @@ import Checkbox from "../../Checkbox";
 import { TableCtx } from "../table";
 import HeadCell from "./cell";
 var TableHead = function TableHead(props) {
-  var columns = props.columns,
+  var _props$headerRows = props.headerRows,
+    headerRows = _props$headerRows === void 0 ? [] : _props$headerRows,
     onCheckAll = props.onCheckAll,
     checkedAll = props.checkedAll,
     onHeaderRow = props.onHeaderRow,
     rest = _objectWithoutProperties(props, _excluded);
   var _useContext = useContext(TableCtx),
     prefixCls = _useContext.prefixCls;
-  var renderHeadCell = function renderHeadCell() {
-    return columns.map(function (column, index) {
-      var key = column.key,
-        type = column.type,
-        visible = column.visible;
-      if (key === 'YEE_SELECTION_COL') {
-        var common = {
-          className: "".concat(prefixCls, "-cell ").concat(prefixCls, "-selection-col"),
-          scope: 'col',
-          key: 'title-column-selection'
-        };
-        return /*#__PURE__*/React.createElement("th", _extends({}, common, {
-          key: column.key || column.dataIndex
-        }), type === 'checkbox' ? /*#__PURE__*/React.createElement(Checkbox, {
-          checked: checkedAll,
-          onChange: onCheckAll
-        }) : null);
-      }
-      if (key === 'YEE_EXPAND_COL' && visible !== false) {
-        return /*#__PURE__*/React.createElement("th", {
-          className: clsx("".concat(prefixCls, "-cell"), "".concat(prefixCls, "-expand-col")),
-          scope: "col",
-          key: "title-column-expandable"
-        });
-      }
-      return /*#__PURE__*/React.createElement(HeadCell, _extends({}, rest, column, {
-        key: 'title-column-' + (column.key || column.dataIndex || index)
-      }));
-    });
+  var renderCell = function renderCell(cell, rowIndex, colIndex) {
+    var column = cell.column,
+      colSpan = cell.colSpan,
+      rowSpan = cell.rowSpan;
+    var key = column.key,
+      type = column.type,
+      visible = column.visible;
+    var cellKey = 'title-column-' + (column.key || column.dataIndex || "".concat(rowIndex, "-").concat(colIndex));
+    if (key === 'YEE_SELECTION_COL') {
+      return /*#__PURE__*/React.createElement("th", {
+        className: "".concat(prefixCls, "-cell ").concat(prefixCls, "-selection-col"),
+        scope: "col",
+        key: cellKey,
+        colSpan: colSpan,
+        rowSpan: rowSpan
+      }, type === 'checkbox' ? /*#__PURE__*/React.createElement(Checkbox, {
+        checked: checkedAll,
+        onChange: onCheckAll
+      }) : null);
+    }
+    if (key === 'YEE_EXPAND_COL' && visible !== false) {
+      return /*#__PURE__*/React.createElement("th", {
+        className: clsx("".concat(prefixCls, "-cell"), "".concat(prefixCls, "-expand-col")),
+        scope: "col",
+        key: cellKey,
+        colSpan: colSpan,
+        rowSpan: rowSpan
+      });
+    }
+    return /*#__PURE__*/React.createElement(HeadCell, _extends({}, rest, column, {
+      colSpan: colSpan,
+      rowSpan: rowSpan,
+      key: cellKey
+    }));
   };
-  var rowProps = onHeaderRow ? onHeaderRow(columns) : {};
   return /*#__PURE__*/React.createElement("thead", {
     className: clsx("".concat(prefixCls, "-thead"))
-  }, /*#__PURE__*/React.createElement("tr", _extends({}, rowProps, {
-    key: "thead"
-  }), renderHeadCell()));
+  }, headerRows.map(function (row, rowIndex) {
+    var rowColumns = row.map(function (cell) {
+      return cell.column;
+    });
+    var rowProps = onHeaderRow ? onHeaderRow(rowColumns) : {};
+    return /*#__PURE__*/React.createElement("tr", _extends({}, rowProps, {
+      key: "thead-row-".concat(rowIndex)
+    }), row.map(function (cell, colIndex) {
+      return renderCell(cell, rowIndex, colIndex);
+    }));
+  }));
 };
 var Row = function Row(props) {
   var children = props.children,

package/dist/esm/Table/util/header.d.ts

@@ -0,0 +1,23 @@
+import type { ColumnProps, ExpandableType, HeaderCell, RowSelectionType, WrapedColumnProps } from '../interface';
+type FixedType = ColumnProps['fixed'];
+/**
+ * Recursively flatten a (possibly grouped) column tree into its leaf columns.
+ * A parent's `fixed` is inherited by its children when the child does not set its own.
+ */
+export declare function flattenLeafColumns(columns: WrapedColumnProps[], parentFixed?: FixedType): WrapedColumnProps[];
+/**
+ * Convert a column tree into a 2D array of header cells (one array per header row),
+ * computing each cell's colSpan/rowSpan. Mirrors rc-table's parseHeaderRows.
+ *
+ * - Pass 1 (DFS): place each column into the row matching its depth; a group's
+ *   colSpan equals the sum of its children's colSpans.
+ * - Pass 2: leaf cells (no sub-columns) get rowSpan = rowCount - rowIndex so
+ *   they stretch down to the last header row; group cells keep rowSpan = 1.
+ */
+export declare function parseHeaderRows(rootColumns: WrapedColumnProps[]): HeaderCell[][];
+/**
+ * Inject selection / expand columns into the top level of the column tree.
+ * `index` is a 1-based position among the top-level columns.
+ */
+export declare function injectSelectionExpand(columns: WrapedColumnProps[], rowSelection?: RowSelectionType, expandable?: ExpandableType): WrapedColumnProps[];
+export {};