@rainbow-oh/yee-c 0.5.1 → 0.6.0

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

@@ -67,39 +67,53 @@ var import_Checkbox = __toESM(require("../../Checkbox"));
 var import_table = require("../table");
 var import_cell = __toESM(require("./cell"));
 var TableHead = (props) => {
-  const _a = props, { columns, onCheckAll, checkedAll, onHeaderRow } = _a, rest = __objRest(_a, ["columns", "onCheckAll", "checkedAll", "onHeaderRow"]);
+  const _a = props, { headerRows = [], onCheckAll, checkedAll, onHeaderRow } = _a, rest = __objRest(_a, ["headerRows", "onCheckAll", "checkedAll", "onHeaderRow"]);
   const { prefixCls } = (0, import_react.useContext)(import_table.TableCtx);
-  const renderHeadCell = () => {
-    return columns.map((column, index) => {
-      const { key, type, visible } = column;
-      if (key === "YEE_SELECTION_COL") {
-        const common = {
+  const renderCell = (cell, rowIndex, colIndex) => {
+    const { column, colSpan, rowSpan } = cell;
+    const { key, type, visible } = column;
+    const cellKey = "title-column-" + (column.key || column.dataIndex || `${rowIndex}-${colIndex}`);
+    if (key === "YEE_SELECTION_COL") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "th",
+        {
           className: `${prefixCls}-cell ${prefixCls}-selection-col`,
           scope: "col",
-          key: "title-column-selection"
-        };
-        return /* @__PURE__ */ import_react.default.createElement("th", __spreadProps(__spreadValues({}, common), { key: column.key || column.dataIndex }), type === "checkbox" ? /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { checked: checkedAll, onChange: onCheckAll }) : null);
-      }
-      if (key === "YEE_EXPAND_COL" && visible !== false) {
-        return /* @__PURE__ */ import_react.default.createElement(
-          "th",
-          {
-            className: (0, import_clsx.default)(`${prefixCls}-cell`, `${prefixCls}-expand-col`),
-            scope: "col",
-            key: "title-column-expandable"
-          }
-        );
-      }
+          key: cellKey,
+          colSpan,
+          rowSpan
+        },
+        type === "checkbox" ? /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { checked: checkedAll, onChange: onCheckAll }) : null
+      );
+    }
+    if (key === "YEE_EXPAND_COL" && visible !== false) {
       return /* @__PURE__ */ import_react.default.createElement(
-        import_cell.default,
-        __spreadProps(__spreadValues(__spreadValues({}, rest), column), {
-          key: "title-column-" + (column.key || column.dataIndex || index)
-        })
+        "th",
+        {
+          className: (0, import_clsx.default)(`${prefixCls}-cell`, `${prefixCls}-expand-col`),
+          scope: "col",
+          key: cellKey,
+          colSpan,
+          rowSpan
+        }
       );
-    });
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_cell.default,
+      __spreadProps(__spreadValues(__spreadValues({}, rest), column), {
+        colSpan,
+        rowSpan,
+        key: cellKey
+      })
+    );
   };
-  const rowProps = onHeaderRow ? onHeaderRow(columns) : {};
-  return /* @__PURE__ */ import_react.default.createElement("thead", { className: (0, import_clsx.default)(`${prefixCls}-thead`) }, /* @__PURE__ */ import_react.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), { key: "thead" }), renderHeadCell()));
+  return /* @__PURE__ */ import_react.default.createElement("thead", { className: (0, import_clsx.default)(`${prefixCls}-thead`) }, headerRows.map((row, rowIndex) => {
+    const rowColumns = row.map((cell) => cell.column);
+    const rowProps = onHeaderRow ? onHeaderRow(rowColumns) : {};
+    return /* @__PURE__ */ import_react.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), { key: `thead-row-${rowIndex}` }), row.map(
+      (cell, colIndex) => renderCell(cell, rowIndex, colIndex)
+    ));
+  }));
 };
 var Row = (props) => {
   const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);

package/dist/cjs/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 {};

package/dist/cjs/Table/util/header.js

@@ -0,0 +1,109 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Table/util/header.ts
+var header_exports = {};
+__export(header_exports, {
+  flattenLeafColumns: () => flattenLeafColumns,
+  injectSelectionExpand: () => injectSelectionExpand,
+  parseHeaderRows: () => parseHeaderRows
+});
+module.exports = __toCommonJS(header_exports);
+function flattenLeafColumns(columns, parentFixed) {
+  return columns.reduce((list, column) => {
+    var _a;
+    const fixed = (_a = column.fixed) != null ? _a : parentFixed;
+    const subColumns = column.children;
+    if (subColumns && subColumns.length > 0) {
+      return [...list, ...flattenLeafColumns(subColumns, fixed)];
+    }
+    return [...list, __spreadProps(__spreadValues({}, column), { fixed })];
+  }, []);
+}
+function parseHeaderRows(rootColumns) {
+  const rows = [];
+  const fillRowCells = (columns, rowIndex) => {
+    rows[rowIndex] = rows[rowIndex] || [];
+    let colSpanTotal = 0;
+    columns.filter(Boolean).forEach((column) => {
+      const cell = {
+        column,
+        colSpan: 1,
+        rowSpan: 1
+      };
+      const subColumns = column.children;
+      if (subColumns && subColumns.length > 0) {
+        cell.colSpan = fillRowCells(subColumns, rowIndex + 1);
+        cell.hasSubColumns = true;
+      }
+      rows[rowIndex].push(cell);
+      colSpanTotal += cell.colSpan;
+    });
+    return colSpanTotal;
+  };
+  fillRowCells(rootColumns, 0);
+  const rowCount = rows.length;
+  for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+    rows[rowIndex].forEach((cell) => {
+      if (!cell.hasSubColumns) {
+        cell.rowSpan = rowCount - rowIndex;
+      }
+    });
+  }
+  return rows;
+}
+function injectSelectionExpand(columns, rowSelection, expandable) {
+  const result = [...columns];
+  if (rowSelection) {
+    const { index = 1 } = rowSelection;
+    result.splice(index - 1, 0, __spreadProps(__spreadValues({
+      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, __spreadProps(__spreadValues({
+        width: 50
+      }, expandable), {
+        key: "YEE_EXPAND_COL"
+      }));
+    }
+  }
+  return result;
+}

package/dist/cjs/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-08T03:16:37.096Z
+ * Generated on 2026-07-09T08:24:26.410Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/cjs/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-08T03:16:37.096Z
+ * Generated on 2026-07-09T08:24:26.410Z
  */
 
 /* ========== color.css ========== */

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.5.1";
+export declare const version = "0.6.0";

package/dist/cjs/version.js

@@ -22,7 +22,7 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-var version = "0.5.1";
+var version = "0.6.0";
 if (typeof window !== "undefined") {
   window.__yee_c_version__ = version;
 }

package/dist/esm/Table/demo/components-override.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Table/demo/components-override.js

@@ -0,0 +1,86 @@
+/**
+ * 自定义表格元素（可被外部接管）
+ *
+ * Table 暴露两个接缝供外部库（如 dnd-kit）接管行/体渲染：
+ * - components.body.tbody —— 替换 <tbody>，外部可在此包 SortableContext 等 Provider；
+ * - components.body.row   —— 整行接管，消费方自行渲染 <tr> + 单元格，可在任意单元格里放拖拽手柄。
+ *
+ * Table 本身不依赖任何拖拽库；本 demo 不引入 dnd，仅证明替换点生效。
+ */
+import { Table } from "../..";
+import React from 'react';
+
+// 替换 <tbody>：保持渲染 <tbody>，外部库可在此包 SortableContext。
+var CustomTbody = function CustomTbody(props) {
+  return /*#__PURE__*/React.createElement("tbody", {
+    className: props.className,
+    "data-custom-tbody": true
+  }, props.children);
+};
+
+// 整行接管：消费方渲染整 <tr> + 单元格，可在此放拖拽手柄等任意内容。
+var CustomRow = function CustomRow(_ref) {
+  var record = _ref.record,
+    index = _ref.index,
+    columns = _ref.columns,
+    rowKey = _ref.rowKey;
+  return /*#__PURE__*/React.createElement("tr", {
+    "data-row-key": rowKey,
+    style: {
+      background: index % 2 === 0 ? '#f8fafc' : undefined
+    }
+  }, /*#__PURE__*/React.createElement("td", {
+    style: {
+      width: 40,
+      textAlign: 'center',
+      color: '#2563eb',
+      fontWeight: 700
+    }
+  }, index + 1), columns.map(function (col) {
+    return /*#__PURE__*/React.createElement("td", {
+      key: String(col.key)
+    }, record[col.dataIndex || '']);
+  }));
+};
+export default (function () {
+  var columns = [{
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name'
+  }, {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age'
+  }, {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address'
+  }];
+  var 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'
+  }];
+  var components = {
+    body: {
+      tbody: CustomTbody,
+      row: CustomRow
+    }
+  };
+  return /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    dataSource: dataSource,
+    components: components
+  });
+});

package/dist/esm/Table/demo/grouping.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Table/demo/grouping.js

@@ -0,0 +1,102 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Table } from "../..";
+import React, { useState } from 'react';
+export default (function () {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRowKeys = _useState2[0],
+    setSelectedRowKeys = _useState2[1];
+  var columns = [{
+    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: function render(record) {
+      return /*#__PURE__*/React.createElement("a", {
+        onClick: function onClick() {
+          return console.log(record);
+        }
+      }, "Edit");
+    }
+  }];
+  var 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'
+  }];
+  var rowSelection = {
+    type: 'checkbox',
+    selectedRowKeys: selectedRowKeys,
+    onChange: function onChange(keys) {
+      return setSelectedRowKeys(keys);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    dataSource: dataSource,
+    rowKey: "key",
+    rowSelection: rowSelection,
+    bordered: true,
+    scroll: {
+      x: 1200
+    }
+  });
+});

package/dist/esm/Table/hooks/useColumns.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColumnProps, ExpandableType, RowSelectionType } from '../interface';
+import type { ColumnProps, ExpandableType, RowSelectionType } from '../interface';
 export default function useColumns({ children, columns, rowSelection, expandable, }: {
     children?: React.ReactElement<ColumnProps> | React.ReactElement<ColumnProps>[];
     columns: ColumnProps[];
@@ -7,5 +7,5 @@ export default function useColumns({ children, columns, rowSelection, expandable
     expandable?: ExpandableType;
 }): {
     wrapedColumns: any;
-    columns: ColumnProps[];
+    headerRows: any;
 };

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;