test: update test case

Author: zombieJ

docs/examples/expandedSticky.tsx

@@ -36,7 +36,7 @@ const Demo = () => {
       title: '手机号',
       dataIndex: 'a',
       width: 100,
-      fixed: 'left',
+      // fixed: 'left',
       onCell: (_, index) => {
         const { rowSpan = 1 } = rowSpanList[index];
         const props: React.TdHTMLAttributes<HTMLTableCellElement> = {};

src/Body/BodyRow.tsx

@@ -24,7 +24,7 @@ export interface BodyRowProps<RecordType> {
   rowKey: React.Key;
 
   // Expanded Row
-  expandedRowInfo: {
+  expandedRowInfo?: {
     colSpan: number;
     sticky: number;
   };
@@ -214,9 +214,9 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         prefixCls={prefixCls}
         component={RowComponent}
         cellComponent={cellComponent}
-        colSpan={expandedRowInfo.colSpan}
+        colSpan={expandedRowInfo ? expandedRowInfo.colSpan : flattenColumns.length}
         isEmpty={false}
-        stickyOffset={expandedRowInfo.sticky}
+        stickyOffset={expandedRowInfo?.sticky}
       >
         {expandContent}
       </ExpandedRow>

src/Body/index.tsx

@@ -34,8 +34,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     emptyNode,
     classNames,
     styles,
-    expandedRowOffset,
-    fixedInfoList,
+    expandedRowOffset = 0,
     colWidths,
   } = useContext(TableContext, [
     'prefixCls',

src/hooks/useColumns/index.tsx

@@ -104,6 +104,7 @@ function useColumns<RecordType>(
     expandIcon,
     rowExpandable,
     expandIconColumnIndex,
+    expandedRowOffset = 0,
     direction,
     expandRowByClick,
     columnWidth,
@@ -128,6 +129,7 @@ function useColumns<RecordType>(
     clientWidth: number;
     fixed?: FixedType;
     scrollWidth?: number;
+    expandedRowOffset?: number;
   },
   transformColumns: (columns: ColumnsType<RecordType>) => ColumnsType<RecordType>,
 ): [
@@ -220,7 +222,16 @@ function useColumns<RecordType>(
         },
       };
 
-      return cloneColumns.map(col => (col === EXPAND_COLUMN ? expandColumn : col));
+      return cloneColumns.map((col, index) => {
+        const column = col === EXPAND_COLUMN ? expandColumn : col;
+        if (index < expandedRowOffset) {
+          return {
+            ...column,
+            fixed: column.fixed || 'start',
+          };
+        }
+        return column;
+      });
     }
 
     if (process.env.NODE_ENV !== 'production' && baseColumns.includes(EXPAND_COLUMN)) {
@@ -229,7 +240,7 @@ function useColumns<RecordType>(
 
     return baseColumns.filter(col => col !== EXPAND_COLUMN);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [expandable, baseColumns, getRowKey, expandedKeys, expandIcon, direction]);
+  }, [expandable, baseColumns, getRowKey, expandedKeys, expandIcon, direction, expandedRowOffset]);
 
   // ========================= Transform ========================
   const mergedColumns = React.useMemo(() => {

tests/Expanded.spec.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { render, act } from '@testing-library/react';
+import { _rs } from '@rc-component/resize-observer';
+import Table, { type ColumnsType } from '../src';
+
+async function triggerResize(ele: HTMLElement) {
+  await act(async () => {
+    _rs([{ target: ele }] as any);
+    await Promise.resolve();
+  });
+}
+
+describe('Table.ExpandedOffset', () => {
+  let domSpy: ReturnType<typeof spyElementPrototypes>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  beforeAll(() => {
+    domSpy = spyElementPrototypes(HTMLElement, {
+      offsetParent: {
+        get: () => ({}),
+      },
+      offsetWidth: {
+        get: () => 50,
+      },
+    });
+  });
+
+  afterAll(() => {
+    domSpy.mockRestore();
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.useRealTimers();
+  });
+
+  it('expanded + sticky', async () => {
+    const columns: ColumnsType = [
+      {
+        title: 'a',
+        // `fixed` will auto patch to fill the space
+        // fixed: 'left',
+      },
+      Table.EXPAND_COLUMN,
+      { title: 'b' },
+      { title: 'c' },
+    ];
+
+    const data = [{ key: 'a' }];
+    const { container } = render(
+      <Table<Record<string, any>>
+        columns={columns}
+        data={data}
+        sticky
+        scroll={{ x: 1200 }}
+        expandable={{
+          expandedRowOffset: 1,
+          defaultExpandAllRows: true,
+          expandedRowRender: record => <div>{record.key}</div>,
+        }}
+      />,
+    );
+
+    await triggerResize(container.querySelector<HTMLElement>('.rc-table'));
+
+    act(() => {
+      const coll = container.querySelector('.rc-table-resize-collection');
+      if (coll) {
+        triggerResize(coll as HTMLElement);
+      }
+    });
+
+    await act(async () => {
+      vi.runAllTimers();
+      await Promise.resolve();
+    });
+
+    expect(container.querySelector('.rc-table-expanded-row .rc-table-cell')).toHaveAttribute(
+      'colspan',
+      '3',
+    );
+    expect(container.querySelector('.rc-table-expanded-row .rc-table-cell div')).toHaveStyle({
+      position: 'sticky',
+      left: '50px',
+    });
+  });
+});