chore: back of part

Author: zombieJ

docs/examples/expandedSticky.tsx

@@ -27,33 +27,45 @@ const Demo = () => {
     { key: 'b', a: '张三', d: '文一西路' },
     { key: 'c', a: '张三', d: '文二西路' },
   ];
-  const rowKeys = data.map(item => item.key);
+  // const rowKeys = data.map(item => item.key);
 
-  const rowSpanList = getRowSpan(data.map(item => item.a));
+  // const rowSpanList = getRowSpan(data.map(item => item.a));
 
   const columns: ColumnType<Record<string, any>>[] = [
     {
       title: '手机号',
       dataIndex: 'a',
       width: 100,
+      colSpan: 2,
       // fixed: 'left',
       onCell: (_, index) => {
-        const { rowSpan = 1 } = rowSpanList[index];
-        const props: React.TdHTMLAttributes<HTMLTableCellElement> = {};
-        props.rowSpan = rowSpan;
-        if (rowSpan >= 1) {
-          let currentRowSpan = rowSpan;
-          for (let i = index; i < index + rowSpan; i += 1) {
-            const rowKey = rowKeys[i];
-            if (expandedRowKeys.includes(rowKey)) {
-              currentRowSpan += 1;
-            }
-          }
-          props.rowSpan = currentRowSpan;
+        // const { rowSpan = 1 } = rowSpanList[index];
+        // const props: React.TdHTMLAttributes<HTMLTableCellElement> = {};
+        // props.rowSpan = rowSpan;
+        // if (rowSpan >= 1) {
+        //   let currentRowSpan = rowSpan;
+        //   for (let i = index; i < index + rowSpan; i += 1) {
+        //     const rowKey = rowKeys[i];
+        //     if (expandedRowKeys.includes(rowKey)) {
+        //       currentRowSpan += 1;
+        //     }
+        //   }
+        //   props.rowSpan = currentRowSpan;
+        // }
+        // return props;
+
+        if (index === 1) {
+          return {
+            rowSpan: 2,
+          };
+        } else if (index === 2) {
+          return {
+            rowSpan: 0,
+          };
         }
-        return props;
       },
     },
+    { title: 'key', dataIndex: 'key2', colSpan: 0, width: 100 },
     Table.EXPAND_COLUMN,
     { title: 'key', dataIndex: 'key' },
     { title: 'Address', fixed: 'right', dataIndex: 'd', width: 200 },
@@ -65,11 +77,11 @@ const Demo = () => {
       <Table<Record<string, any>>
         rowKey="key"
         sticky
-        scroll={{ x: 2000 }}
+        scroll={{ x: 1000 }}
         columns={columns}
         data={data}
         expandable={{
-          expandedRowOffset: 1,
+          expandedRowOffset: 2,
           expandedRowKeys,
           onExpandedRowsChange: keys => setExpandedRowKeys(keys),
           expandedRowRender: record => <p style={{ margin: 0 }}>expandedRowRender: {record.key}</p>,

src/Body/BodyRow.tsx

@@ -22,9 +22,11 @@ export interface BodyRowProps<RecordType> {
   scopeCellComponent: CustomizeComponent;
   indent?: number;
   rowKey: React.Key;
+  rowKeys: React.Key[];
 
   // Expanded Row
   expandedRowInfo?: {
+    offset: number;
     colSpan: number;
     sticky: number;
   };
@@ -39,6 +41,8 @@ export function getCellProps<RecordType>(
   colIndex: number,
   indent: number,
   index: number,
+  rowKeys: React.Key[],
+  expandedRowOffset = 0,
 ) {
   const {
     record,
@@ -52,6 +56,8 @@ export function getCellProps<RecordType>(
     expanded,
     hasNestChildren,
     onTriggerExpand,
+    expandable,
+    expandedKeys,
   } = rowInfo;
 
   const key = columnsKey[colIndex];
@@ -77,16 +83,32 @@ export function getCellProps<RecordType>(
     );
   }
 
-  let additionalCellProps: React.TdHTMLAttributes<HTMLElement>;
-  if (column.onCell) {
-    additionalCellProps = column.onCell(record, index);
+  const additionalCellProps = column.onCell?.(record, index) || {};
+
+  // Expandable row has offset
+  if (expandedRowOffset) {
+    const { rowSpan = 1 } = additionalCellProps;
+
+    // For expandable row with rowSpan,
+    // We should increase the rowSpan if the row is expanded
+    if (expandable && rowSpan && colIndex < expandedRowOffset) {
+      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 {
     key,
     fixedInfo,
     appendCellNode,
-    additionalCellProps: additionalCellProps || {},
+    additionalCellProps: additionalCellProps,
   };
 }
 
@@ -109,6 +131,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     index,
     renderIndex,
     rowKey,
+    rowKeys,
     indent = 0,
     rowComponent: RowComponent,
     cellComponent,
@@ -171,6 +194,8 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
           colIndex,
           indent,
           index,
+          rowKeys,
+          expandedRowInfo?.offset,
         );
 
         return (

src/Body/index.tsx

@@ -54,8 +54,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>({
@@ -74,6 +80,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     }
 
     return {
+      offset: expandedRowOffset,
       colSpan: expandedColSpan,
       sticky: expandedStickyStart,
     };
@@ -88,16 +95,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/hooks/useFlattenRecords.ts

@@ -11,14 +11,15 @@ function fillRecords<T>(
   getRowKey: GetRowKey<T>,
   index: number,
 ) {
+  const key = getRowKey(record, index);
+
   list.push({
     record,
     indent,
     index,
+    rowKey: key,
   });
 
-  const key = getRowKey(record);
-
   const expanded = expandedKeys?.has(key);
 
   if (record && Array.isArray(record[childrenColumnName]) && expanded) {
@@ -41,6 +42,7 @@ export interface FlattenData<RecordType> {
   record: RecordType;
   indent: number;
   index: number;
+  rowKey: Key;
 }
 
 /**
@@ -80,6 +82,7 @@ export default function useFlattenRecords<T>(
         record: item,
         indent: 0,
         index,
+        rowKey: getRowKey(item, index),
       };
     });
   }, [data, childrenColumnName, expandedKeys, getRowKey]);