feat: add forceRender api

Author: ouxiaofeng.utlf

docs/examples/expandedRowRender.tsx

@@ -146,6 +146,9 @@ const Demo = () => {
           rowExpandable,
           expandIconColumnIndex: expandIconPosition ? 1 : null,
           fixed: fixExpand,
+          forceRender: record => {
+            return record?.key === 0;
+          },
         }}
         scroll={{ x: fixColumns || scrollX ? 2000 : null, y: fixHeader ? 300 : null }}
         data={data}

src/Body/BodyRow.tsx

@@ -31,6 +31,7 @@ export interface BodyRowProps<RecordType> {
     colSpan: number;
     sticky: number;
   };
+  forceRender?: boolean | ((record: RecordType, index: number) => boolean);
 }
 
 // ==================================================================================
@@ -138,6 +139,7 @@ const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
     cellComponent,
     scopeCellComponent,
     expandedRowInfo,
+    forceRender,
   } = props;
 
   const rowInfo = useRowInfo(record, rowKey, index, indent);
@@ -157,6 +159,13 @@ const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
   const expandedRef = React.useRef(false);
   expandedRef.current ||= expanded;
 
+  const shouldForceRender = () => {
+    if (typeof forceRender === 'function') {
+      return forceRender(record, index);
+    }
+    return !!forceRender;
+  };
+
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
@@ -224,7 +233,7 @@ const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
 
   // ======================== Expand Row =========================
   let expandRowNode: React.ReactElement<ExpandedRowProps>;
-  if (rowSupportExpand && (expandedRef.current || expanded)) {
+  if (rowSupportExpand && (expandedRef.current || expanded || shouldForceRender?.())) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
 
     expandRowNode = (

src/Body/index.tsx

@@ -36,6 +36,7 @@ const Body = <RecordType,>(props: BodyProps<RecordType>) => {
     styles,
     expandedRowOffset = 0,
     colWidths,
+    forceRender
   } = useContext(TableContext, [
     'prefixCls',
     'getComponent',
@@ -50,6 +51,7 @@ const Body = <RecordType,>(props: BodyProps<RecordType>) => {
     'expandedRowOffset',
     'fixedInfoList',
     'colWidths',
+    'forceRender'
   ]);
   const { body: bodyCls = {} } = classNames || {};
   const { body: bodyStyles = {} } = styles || {};
@@ -111,6 +113,7 @@ const Body = <RecordType,>(props: BodyProps<RecordType>) => {
           indent={indent}
           // Expanded row info
           expandedRowInfo={expandedRowInfo}
+          forceRender={forceRender}
         />
       );
     });

src/Table.tsx

@@ -892,6 +892,7 @@ const Table = <RecordType extends DefaultRecordType>(
       expandableType,
       expandRowByClick: expandableConfig.expandRowByClick,
       expandedRowRender: expandableConfig.expandedRowRender,
+      forceRender: expandableConfig.forceRender,
       expandedRowOffset: expandableConfig.expandedRowOffset,
       onTriggerExpand,
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
@@ -953,6 +954,8 @@ const Table = <RecordType extends DefaultRecordType>(
       onTriggerExpand,
       expandableConfig.expandIconColumnIndex,
       expandableConfig.indentSize,
+      expandableConfig.forceRender,
+      expandableConfig,
       emptyNode,
 
       // Column

src/context/TableContext.tsx

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

src/interface.ts

@@ -267,6 +267,7 @@ export interface ExpandableConfig<RecordType> {
   columnWidth?: number | string;
   fixed?: FixedType;
   expandedRowOffset?: number;
+  forceRender?: boolean|((record: RecordType) => boolean);
 }
 
 // =================== Render ===================