feat: support lazy expand

src/Body/BodyRow.tsx

@@ -199,6 +199,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         cellComponent={cellComponent}
         colSpan={flattenColumns.length}
         isEmpty={false}
+        data={record}
       >
         {expandContent}
       </ExpandedRow>

src/Body/ExpandedRow.tsx

@@ -4,6 +4,7 @@
 import TableContext from '../context/TableContext';
 import devRenderTimes from '../hooks/useRenderTimes';
 import type { CustomizeComponent } from '../interface';
+import useResolve from '../hooks/useResolve';
 
 export interface ExpandedRowProps {
   prefixCls: string;
@@ -14,6 +15,7 @@
   children: React.ReactNode;
   colSpan: number;
   isEmpty: boolean;
+  data?: any;
 }
 
 function ExpandedRow(props: ExpandedRowProps) {
@@ -30,8 +32,11 @@
     expanded,
     colSpan,
     isEmpty,
+    data,
   } = props;
 
+  const { data: LazyData, resolve } = useResolve(data.load);
+
   const { scrollbarSize, fixHeader, fixColumn, componentWidth, horizonScroll } = useContext(
     TableContext,
     ['scrollbarSize', 'fixHeader', 'fixColumn', 'componentWidth', 'horizonScroll'],
@@ -60,11 +65,17 @@
     <Component
       className={className}
       style={{
-        display: expanded ? null : 'none',
+        display: data.hasChildren
+          ? expanded && resolve
+            ? null
+            : 'none'
+          : expanded
+            ? null
+            : 'none',
       }}
     >
       <Cell component={cellComponent} prefixCls={prefixCls} colSpan={colSpan}>
-        {contentNode}
+        {data.hasChildren ? LazyData : contentNode}
       </Cell>
     </Component>
   );

src/Table.tsx

@@ -103,6 +103,7 @@ export interface TableProps<RecordType = any>
   expandable?: ExpandableConfig<RecordType>;
   indentSize?: number;
   rowClassName?: string | RowClassName<RecordType>;
+  load?: (data: any) => void;
 
   // Additional Part
   footer?: PanelRender<RecordType>;

src/hooks/useResolve.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect, useCallback } from 'react';
+
+function useResolve(loadFunction) {
+  const [data, setData] = useState(null);
+  const [resolve, setResolve] = useState(false);
+
+  const stableLoadFunction = useCallback(loadFunction, []);
+
+  useEffect(() => {
+    if (stableLoadFunction) {
+      stableLoadFunction().then(result => {
+        setData(result);
+        setResolve(true);
+      });
+    }
+  }, [stableLoadFunction]);
+
+  return { data, resolve };
+}
+
+export default useResolve;