feat: support rowspan expanded

docs/demo/expandedRowSpan.md

@@ -0,0 +1,8 @@
+---
+title: expandedRowSpan
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/expandedRowSpan.tsx"></code>

docs/demo/expandedSticky.md

@@ -0,0 +1,8 @@
+---
+title: expandedSticky
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/expandedSticky.tsx"></code>

docs/examples/expandedRowSpan.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Table from 'rc-table';
+import '../../assets/index.less';
+import type { ColumnsType } from '@/interface';
+
+const columns: ColumnsType = [
+  {
+    title: '手机号',
+    dataIndex: 'a',
+    colSpan: 2,
+    width: 100,
+    onCell: (_, index) => {
+      const props: React.TdHTMLAttributes<HTMLTableCellElement> = {};
+      if (index === 0) props.rowSpan = 1;
+      if (index === 1) props.rowSpan = 4;
+      if (index === 2) props.rowSpan = 0;
+      if (index === 3) props.rowSpan = 0;
+      if (index === 4) props.rowSpan = 0;
+      if (index === 5) props.rowSpan = undefined;
+      return props;
+    },
+  },
+  { title: '电话', dataIndex: 'b', colSpan: 0, width: 100 },
+  Table.EXPAND_COLUMN,
+  { title: 'Name', dataIndex: 'c', width: 100 },
+  { title: 'Address', dataIndex: 'd', width: 200 },
+];
+
+const data = [
+  { a: '12313132132', b: '0571-43243256', c: '小二', d: '文零西路', e: 'Male', key: 'z' },
+  { a: '13812340987', b: '0571-12345678', c: '张三', d: '文一西路', e: 'Male', key: 'a' },
+  { a: '13812340987', b: '0571-12345678', c: '张夫人', d: '文一西路', e: 'Female', key: 'b' },
+  { a: '13812340987', b: '0571-099877', c: '李四', d: '文二西路', e: 'Male', key: 'c' },
+  { a: '13812340987', b: '0571-099877', c: '李四', d: '文二西路', e: 'Male', key: 'd' },
+  { a: '1381200008888', b: '0571-099877', c: '王五', d: '文二西路', e: 'Male', key: 'e' },
+];
+
+const Demo = () => (
+  <div>
+    <h2>expanded & rowSpan</h2>
+    <Table<Record<string, any>>
+      rowKey="key"
+      columns={columns}
+      data={data}
+      expandable={{ expandedRowRender: record => <p style={{ margin: 0 }}>{record.key}</p> }}
+      className="table"
+    />
+  </div>
+);
+
+export default Demo;

docs/examples/expandedSticky.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import type { ColumnType } from 'rc-table';
+import Table from 'rc-table';
+import '../../assets/index.less';
+
+const Demo = () => {
+  const [expandedRowKeys, setExpandedRowKeys] = useState<readonly React.Key[]>([]);
+
+  const columns: ColumnType<Record<string, any>>[] = [
+    // { title: '分割', dataIndex: 'ca' },
+    {
+      title: '手机号',
+      dataIndex: 'a',
+      width: 100,
+      fixed: 'left',
+      onCell: (_, index) => {
+        const props: React.TdHTMLAttributes<HTMLTableCellElement> = {};
+        if (index === 0) props.rowSpan = 1;
+        if (index === 1) props.rowSpan = 2;
+        if (index === 2) props.rowSpan = 0;
+        return props;
+      },
+    },
+    Table.EXPAND_COLUMN,
+    { title: 'Name', dataIndex: 'c' },
+    { title: 'Address', fixed: 'right', dataIndex: 'd', width: 200 },
+  ];
+
+  return (
+    <div
+      style={{
+        height: 10000,
+      }}
+    >
+      <h2>expanded & sticky</h2>
+      <Table<Record<string, any>>
+        rowKey="key"
+        sticky
+        scroll={{ x: 800 }}
+        columns={columns}
+        data={[
+          { key: 'a', a: '12313132132', c: '小二', d: '文零西路' },
+          { key: 'b', a: '13812340987', c: '张三', d: '文一西路' },
+          { key: 'c', a: '13812340987', c: '张夫', d: '文二西路' },
+        ]}
+        expandable={{
+          expandedRowKeys,
+          onExpandedRowsChange: keys => setExpandedRowKeys(keys),
+          expandedRowRender: record => <p style={{ margin: 0 }}>{record.key}</p>,
+        }}
+        className="table"
+      />
+    </div>
+  );
+};
+
+export default Demo;

src/Body/BodyRow.tsx

@@ -7,7 +7,7 @@ import useRowInfo from '../hooks/useRowInfo';
 import type { ColumnType, CustomizeComponent } from '../interface';
 import ExpandedRow from './ExpandedRow';
 import { computedExpandedClassName } from '../utils/expandUtil';
-import { TableProps } from '..';
+import type { TableProps } from '..';
 
 export interface BodyRowProps<RecordType> {
   record: RecordType;
@@ -22,6 +22,7 @@ export interface BodyRowProps<RecordType> {
   scopeCellComponent: CustomizeComponent;
   indent?: number;
   rowKey: React.Key;
+  rowKeys: React.Key[];
 }
 
 // ==================================================================================
@@ -33,6 +34,7 @@ export function getCellProps<RecordType>(
   colIndex: number,
   indent: number,
   index: number,
+  rowKeys: React.Key[],
 ) {
   const {
     record,
@@ -46,6 +48,8 @@ export function getCellProps<RecordType>(
     expanded,
     hasNestChildren,
     onTriggerExpand,
+    expandable,
+    expandedKeys,
   } = rowInfo;
 
   const key = columnsKey[colIndex];
@@ -74,6 +78,21 @@ export function getCellProps<RecordType>(
   let additionalCellProps: React.TdHTMLAttributes<HTMLElement>;
   if (column.onCell) {
     additionalCellProps = column.onCell(record, index);
+    const { rowSpan } = additionalCellProps;
+
+    // For expandable row with rowSpan,
+    // We should increase the rowSpan if the row is expanded
+    if (expandable && rowSpan !== undefined) {
+      let currentRowSpan = rowSpan;
+
+      for (let i = index; i < index + rowSpan; i += 1) {
+        const rowKey = rowKeys[i];
+        if (expandedKeys.has(rowKey)) {
+          currentRowSpan += 1;
+        }
+      }
+      additionalCellProps.rowSpan = currentRowSpan;
+    }
   }
 
   return {
@@ -84,9 +103,31 @@ export function getCellProps<RecordType>(
   };
 }
 
-// ==================================================================================
-// ==                                 getCellProps                                 ==
-// ==================================================================================
+const getOffsetData = (
+  columnsData: {
+    column: ColumnType<any>;
+    cell: { additionalCellProps: React.TdHTMLAttributes<HTMLElement> };
+  }[],
+) => {
+  let offsetWidth = 0;
+  let offsetColumn = 0;
+  let isRowSpanEnd = false;
+  columnsData.forEach(item => {
+    if (!isRowSpanEnd) {
+      const { column, cell } = item;
+      if (cell.additionalCellProps.rowSpan !== undefined) {
+        offsetColumn += 1;
+        if (typeof column.width === 'number') {
+          offsetWidth = offsetWidth + (column.width ?? 0);
+        }
+      } else {
+        isRowSpanEnd = true;
+      }
+    }
+  });
+  return { offsetWidth, offsetColumn };
+};
+
 function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   props: BodyRowProps<RecordType>,
 ) {
@@ -107,9 +148,11 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     rowComponent: RowComponent,
     cellComponent,
     scopeCellComponent,
+    rowKeys,
   } = props;
 
   const rowInfo = useRowInfo(record, rowKey, index, indent);
+
   const {
     prefixCls,
     flattenColumns,
@@ -134,6 +177,17 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   // 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName
   const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
 
+  const { columnsData, offsetData } = React.useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const columnsData = flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
+      const cell = getCellProps(rowInfo, column, colIndex, indent, index, rowKeys);
+      return { column, cell };
+    });
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const offsetData = getOffsetData(columnsData);
+    return { columnsData, offsetData };
+  }, [flattenColumns, indent, index, rowInfo, rowKeys]);
+
   // ======================== Base tr row ========================
   const baseRowNode = (
     <RowComponent
@@ -155,16 +209,11 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         ...styles.row,
       }}
     >
-      {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
+      {columnsData.map(item => {
+        const { column, cell } = item;
         const { render, dataIndex, className: columnClassName } = column;
 
-        const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps(
-          rowInfo,
-          column,
-          colIndex,
-          indent,
-          index,
-        );
+        const { key, fixedInfo, appendCellNode, additionalCellProps } = cell;
 
         return (
           <Cell<RecordType>
@@ -207,7 +256,8 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         prefixCls={prefixCls}
         component={RowComponent}
         cellComponent={cellComponent}
-        colSpan={flattenColumns.length}
+        offsetWidth={offsetData.offsetWidth}
+        colSpan={flattenColumns.length - offsetData.offsetColumn}
         isEmpty={false}
       >
         {expandContent}

src/Body/ExpandedRow.tsx

@@ -14,6 +14,7 @@ export interface ExpandedRowProps {
   children: React.ReactNode;
   colSpan: number;
   isEmpty: boolean;
+  offsetWidth?: number;
 }
 
 function ExpandedRow(props: ExpandedRowProps) {
@@ -30,6 +31,7 @@ function ExpandedRow(props: ExpandedRowProps) {
     expanded,
     colSpan,
     isEmpty,
+    offsetWidth = 0,
   } = props;
 
   const { scrollbarSize, fixHeader, fixColumn, componentWidth, horizonScroll } = useContext(
@@ -44,7 +46,7 @@ function ExpandedRow(props: ExpandedRowProps) {
     contentNode = (
       <div
         style={{
-          width: componentWidth - (fixHeader && !isEmpty ? scrollbarSize : 0),
+          width: componentWidth - offsetWidth - (fixHeader && !isEmpty ? scrollbarSize : 0),
           position: 'sticky',
           left: 0,
           overflow: 'hidden',

src/Body/index.tsx

@@ -49,8 +49,14 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
   const { body: bodyCls = {} } = classNames || {};
   const { body: bodyStyles = {} } = styles || {};
 
-  const flattenData: { record: RecordType; indent: number; index: number }[] =
-    useFlattenRecords<RecordType>(data, childrenColumnName, expandedKeys, getRowKey);
+  const flattenData = useFlattenRecords<RecordType>(
+    data,
+    childrenColumnName,
+    expandedKeys,
+    getRowKey,
+  );
+
+  const rowKeys = React.useMemo(() => flattenData.map(item => item.rowKey), [flattenData]);
 
   // =================== Performance ====================
   const perfRef = React.useRef<PerfRecord>({
@@ -66,16 +72,15 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
   let rows: React.ReactNode;
   if (data.length) {
     rows = flattenData.map((item, idx) => {
-      const { record, indent, index: renderIndex } = item;
-
-      const key = getRowKey(record, idx);
+      const { record, indent, index: renderIndex, rowKey } = item;
 
       return (
         <BodyRow
           classNames={bodyCls}
           styles={bodyStyles}
-          key={key}
-          rowKey={key}
+          key={rowKey}
+          rowKey={rowKey}
+          rowKeys={rowKeys}
           record={record}
           index={idx}
           renderIndex={renderIndex}

src/Panel/index.tsx

@@ -7,7 +7,11 @@ export interface TitleProps {
 }
 
 function Panel({ className, style, children }: TitleProps) {
-  return <div className={className} style={style}>{children}</div>;
+  return (
+    <div className={className} style={style}>
+      {children}
+    </div>
+  );
 }
 
 export default Panel;

src/Table.tsx

@@ -942,6 +942,8 @@ function Table<RecordType extends DefaultRecordType>(
       mergedChildrenColumnName,
 
       rowHoverable,
+      classNames,
+      styles,
     ],
   );
 

src/VirtualTable/VirtualCell.tsx

@@ -62,6 +62,7 @@ function VirtualCell<RecordType = any>(props: VirtualCellProps<RecordType>) {
     colIndex,
     indent,
     index,
+    [],
   );
 
   const { style: cellStyle, colSpan = 1, rowSpan = 1 } = additionalCellProps;

src/context/TableContext.tsx

@@ -14,7 +14,7 @@ import type {
   TriggerEventHandler,
 } from '../interface';
 import type { FixedInfo } from '../utils/fixUtil';
-import { TableProps } from '../Table';
+import type { TableProps } from '../Table';
 
 const { makeImmutable, responseImmutable, useImmutableMark } = createImmutable();
 export { makeImmutable, responseImmutable, useImmutableMark };