feat: support rowspan-expanded

Author: crazyair

docs/demo/colspan-rowspan-expanded.md

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

docs/examples/colspan-rowspan-expanded.tsx

@@ -0,0 +1,55 @@
+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 = 4;
+      } else if (index === 1) {
+        props.rowSpan = 0;
+      } else if (index === 2) {
+        props.rowSpan = 0;
+      } else if (index === 3) {
+        props.rowSpan = 0;
+      } else if (index === 4) {
+        props.rowSpan = 1;
+      }
+
+      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: '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>colSpan & rowSpan & expanded</h2>
+    <Table
+      columns={columns}
+      data={data}
+      expandable={{ expandedRowRender: (record: any) => <p style={{ margin: 0 }}>{record.key}</p> }}
+      className="table"
+    />
+  </div>
+);
+
+export default Demo;

src/Body/BodyRow.tsx

@@ -19,6 +19,7 @@ export interface BodyRowProps<RecordType> {
   scopeCellComponent: CustomizeComponent;
   indent?: number;
   rowKey: React.Key;
+  getRowKey: (index: number) => React.Key;
 }
 
 // ==================================================================================
@@ -30,6 +31,7 @@ export function getCellProps<RecordType>(
   colIndex: number,
   indent: number,
   index: number,
+  getRowKey: (index: number) => React.Key,
 ) {
   const {
     record,
@@ -43,6 +45,7 @@ export function getCellProps<RecordType>(
     expanded,
     hasNestChildren,
     onTriggerExpand,
+    expandedKeys,
   } = rowInfo;
 
   const key = columnsKey[colIndex];
@@ -68,9 +71,32 @@ export function getCellProps<RecordType>(
     );
   }
 
+  const addChildrenRowSpan = (rowSpan: number, index2: number) => {
+    const _index = index2 + 1;
+    let _rowSpan = rowSpan;
+    // 下面如果是 0 的，增加 +1 逻辑
+    const dd = column.onCell(record, _index);
+    if (dd.rowSpan === 0) {
+      const ddd = expandedKeys.has(getRowKey(_index));
+      if (ddd) {
+        _rowSpan = _rowSpan + 1;
+      }
+      return addChildrenRowSpan(_rowSpan, _index);
+    }
+    return _rowSpan;
+  };
+
   let additionalCellProps: React.TdHTMLAttributes<HTMLElement>;
   if (column.onCell) {
     additionalCellProps = column.onCell(record, index);
+    if (additionalCellProps.rowSpan > 0) {
+      // 本身展开 +1
+      if (expanded) {
+        additionalCellProps.rowSpan = additionalCellProps.rowSpan + 1;
+      }
+      additionalCellProps.rowSpan = addChildrenRowSpan(additionalCellProps.rowSpan, index);
+    }
+    console.log('additionalCellProps.rowSpan', additionalCellProps.rowSpan);
   }
 
   return {
@@ -102,8 +128,10 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     rowComponent: RowComponent,
     cellComponent,
     scopeCellComponent,
+    getRowKey,
   } = props;
   const rowInfo = useRowInfo(record, rowKey, index, indent);
+
   const {
     prefixCls,
     flattenColumns,
@@ -144,7 +172,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
       )}
       style={{ ...style, ...rowProps?.style }}
     >
-      {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
+      {flattenColumns.map((column, colIndex) => {
         const { render, dataIndex, className: columnClassName } = column;
 
         const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps(
@@ -153,8 +181,11 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
           colIndex,
           indent,
           index,
+          getRowKey,
         );
-
+        if (column.title === '手机号') {
+          // console.log('additionalCellProps', column.title, additionalCellProps);
+        }
         return (
           <Cell<RecordType>
             className={columnClassName}

src/Body/index.tsx

@@ -67,6 +67,12 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
         <BodyRow
           key={key}
           rowKey={key}
+          getRowKey={index => {
+            const thisRecord = flattenData[index]?.record;
+            if (thisRecord) {
+              return getRowKey(thisRecord, index);
+            }
+          }}
           record={record}
           index={idx}
           renderIndex={renderIndex}