feat: support force rendering expanded rows

README.md

@@ -82,6 +82,7 @@ Then open `http://localhost:8000`.
 | expandable.defaultExpandedRowKeys | String[] | [] | initial expanded rows keys |
 | expandable.expandedRowKeys | String[] |  | current expanded rows keys |
 | expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode |  | Content render to expanded row |
+| expandable.forceRender | Boolean | false | Force render expanded row content before expansion |
 | expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` |  | get expanded row's className |
 | expandable.expandRowByClick | boolean |  | Support expand by click row |
 | expandable.expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false |

README.zh-CN.md

@@ -82,6 +82,7 @@ npm start
 | expandable.defaultExpandedRowKeys | String[] | [] | 初始扩展行键 |
 | expandable.expandedRowKeys | String[] |  | 当前扩展行键 |
 | expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode |  | 内容渲染到扩展行 |
+| expandable.forceRender | Boolean | false | 在展开前强制渲染展开行内容 |
 | expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` |  | 获取扩展行的 className |
 | expandable.expandRowByClick | boolean |  | 支持点击行展开 |
 | expandable.expandIconColumnIndex | Number | 0 | ExpandIconAsCell 为 false 时将插入哪一列的 ExpandIcon 索引 |

src/Body/BodyRow.tsx

@@ -146,14 +146,15 @@ const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
     flattenColumns,
     expandedRowClassName,
     expandedRowRender,
+    forceRender,
     rowProps,
 
     // Misc
     expanded,
     rowSupportExpand,
   } = rowInfo;
 
-  // Force render expand row if expanded before
+  // Keep the expanded row mounted after it has been expanded
   const expandedRef = React.useRef(false);
   expandedRef.current ||= expanded;
 
@@ -224,7 +225,7 @@ const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
 
   // ======================== Expand Row =========================
   let expandRowNode: React.ReactElement<ExpandedRowProps>;
-  if (rowSupportExpand && (expandedRef.current || expanded)) {
+  if (rowSupportExpand && (forceRender || expandedRef.current || expanded)) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
 
     expandRowNode = (

src/Table.tsx

@@ -910,6 +910,7 @@ const Table = <RecordType extends DefaultRecordType>(
       expandableType,
       expandRowByClick: expandableConfig.expandRowByClick,
       expandedRowRender: expandableConfig.expandedRowRender,
+      forceRender: expandableConfig.forceRender,
       expandedRowOffset: expandableConfig.expandedRowOffset,
       onTriggerExpand,
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
@@ -967,6 +968,7 @@ const Table = <RecordType extends DefaultRecordType>(
       expandableType,
       expandableConfig.expandRowByClick,
       expandableConfig.expandedRowRender,
+      expandableConfig.forceRender,
       expandableConfig.expandedRowOffset,
       onTriggerExpand,
       expandableConfig.expandIconColumnIndex,

src/VirtualTable/BodyLine.tsx

@@ -43,12 +43,19 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
   const cellComponent = getComponent(['body', 'cell'], 'div');
 
   // ========================== Expand ==========================
-  const { rowSupportExpand, expanded, rowProps, expandedRowRender, expandedRowClassName } = rowInfo;
+  const {
+    rowSupportExpand,
+    expanded,
+    rowProps,
+    expandedRowRender,
+    expandedRowClassName,
+    forceRender,
+  } = rowInfo;
 
   const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
 
   let expandRowNode: React.ReactElement<any>;
-  if (rowSupportExpand && expanded) {
+  if (rowSupportExpand && (forceRender || expanded)) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
 
     let additionalProps: React.TdHTMLAttributes<HTMLElement> = {};
@@ -69,6 +76,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
           `${prefixCls}-expanded-row-level-${indent + 1}`,
           expandedClsName,
         )}
+        style={{ display: expanded ? undefined : 'none' }}
       >
         <Cell
           component={cellComponent}

src/context/TableContext.tsx

@@ -53,6 +53,7 @@ export interface TableContextProps<RecordType = any> {
   expandableType: ExpandableType;
   expandRowByClick: boolean;
   expandedRowRender: ExpandedRowRender<RecordType>;
+  forceRender: boolean;
   expandIcon: RenderExpandIcon<RecordType>;
   onTriggerExpand: TriggerEventHandler<RecordType>;
   expandIconColumnIndex: number;

src/hooks/useRowInfo.tsx

@@ -23,6 +23,7 @@ export default function useRowInfo<RecordType>(
   | 'indentSize'
   | 'expandIcon'
   | 'expandedRowRender'
+  | 'forceRender'
   | 'expandIconColumnIndex'
   | 'expandedKeys'
   | 'childrenColumnName'
@@ -49,6 +50,7 @@ export default function useRowInfo<RecordType>(
     'indentSize',
     'expandIcon',
     'expandedRowRender',
+    'forceRender',
     'expandIconColumnIndex',
     'expandedKeys',
     'childrenColumnName',

src/interface.ts

@@ -90,10 +90,7 @@ export type Direction = 'ltr' | 'rtl';
 export type SpecialString<T> = T | (string & NonNullable<unknown>);
 
 export type DataIndex<T = any> =
-  | DeepNamePath<T>
-  | SpecialString<T>
-  | number
-  | (SpecialString<T> | number)[];
+  DeepNamePath<T> | SpecialString<T> | number | (SpecialString<T> | number)[];
 
 export type CellEllipsisType = { showTitle?: boolean } | boolean;
 
@@ -139,8 +136,7 @@ export interface ColumnType<RecordType> extends ColumnSharedType<RecordType> {
 }
 
 export type ColumnsType<RecordType = unknown> = readonly (
-  | ColumnGroupType<RecordType>
-  | ColumnType<RecordType>
+  ColumnGroupType<RecordType> | ColumnType<RecordType>
 )[];
 
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
@@ -257,6 +253,7 @@ export interface ExpandableConfig<RecordType> {
   expandedRowKeys?: readonly Key[];
   defaultExpandedRowKeys?: readonly Key[];
   expandedRowRender?: ExpandedRowRender<RecordType>;
+  forceRender?: boolean;
   columnTitle?: React.ReactNode;
   expandRowByClick?: boolean;
   expandIcon?: RenderExpandIcon<RecordType>;

tests/ExpandRow.spec.jsx

@@ -39,6 +39,37 @@ describe('Table.Expand', () => {
     expect(rowRender).toHaveBeenLastCalledWith(sampleData[0], 0, 1, false);
   });
 
+  it('force renders expanded rows before expansion', () => {
+    const rowRender = vi.fn(record => <div>{record.name} expanded row</div>);
+    const { container } = render(
+      createTable({
+        expandable: {
+          expandedRowRender: rowRender,
+          forceRender: true,
+        },
+      }),
+    );
+
+    const expandedRows = container.querySelectorAll('.rc-table-expanded-row');
+
+    expect(rowRender).toHaveBeenCalledTimes(2);
+    expect(rowRender).toHaveBeenNthCalledWith(1, sampleData[0], 0, 1, false);
+    expect(rowRender).toHaveBeenNthCalledWith(2, sampleData[1], 1, 1, false);
+    expect(expandedRows).toHaveLength(2);
+    expect(expandedRows[0]).toHaveStyle({ display: 'none' });
+    expect(expandedRows[1]).toHaveStyle({ display: 'none' });
+
+    fireEvent.click(container.querySelector('.rc-table-row-expand-icon'));
+
+    expect(expandedRows[0]).not.toHaveStyle({ display: 'none' });
+    expect(expandedRows[1]).toHaveStyle({ display: 'none' });
+
+    fireEvent.click(container.querySelector('.rc-table-row-expand-icon'));
+
+    expect(expandedRows[0]).toHaveStyle({ display: 'none' });
+    expect(expandedRows[1]).toHaveStyle({ display: 'none' });
+  });
+
   it('renders tree row correctly', () => {
     const data = [
       {

tests/Virtual.spec.tsx

@@ -180,6 +180,37 @@ describe('Table.Virtual', () => {
       });
     });
 
+    it('force renders expanded rows before expansion', () => {
+      const expandedRowRender = vi.fn((record: { name: string }) => record.name);
+      const { container } = getTable({
+        data: [{ name: 'name0', age: 0, address: 'address0' }],
+        expandable: {
+          expandedRowRender,
+          forceRender: true,
+        },
+      });
+
+      expect(expandedRowRender).toHaveBeenCalledWith(
+        { name: 'name0', age: 0, address: 'address0' },
+        0,
+        1,
+        false,
+      );
+      expect(container.querySelector('.rc-table-expanded-row')).toHaveStyle({ display: 'none' });
+
+      fireEvent.click(container.querySelector('.rc-table-row-expand-icon')!);
+
+      expect(container.querySelector('.rc-table-expanded-row')).not.toHaveStyle({
+        display: 'none',
+      });
+
+      fireEvent.click(container.querySelector('.rc-table-row-expand-icon')!);
+
+      expect(container.querySelector('.rc-table-expanded-row')).toHaveStyle({
+        display: 'none',
+      });
+    });
+
     it('applies expanded row class to tree rows', () => {
       const { container } = getTable({
         data: [