feat: review

Author: crazyair

docs/demo/colspan-rowspan-expanded.md

@@ -0,0 +1,8 @@
+---
+title: expandedRowSpan
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/expandedRowSpan.tsx"></code>

docs/demo/expandedRowSpan.md

@@ -42,11 +42,12 @@ const data = [
 
 const Demo = () => (
   <div>
-    <h2>colSpan & rowSpan & expanded</h2>
-    <Table
+    <h2>expanded & rowSpan</h2>
+    <Table<Record<string, any>>
+      rowKey="key"
       columns={columns}
       data={data}
-      expandable={{ expandedRowRender: (record: any) => <p style={{ margin: 0 }}>{record.key}</p> }}
+      expandable={{ expandedRowRender: record => <p style={{ margin: 0 }}>{record.key}</p> }}
       className="table"
     />
   </div>

docs/examples/colspan-rowspan-expanded.tsx renamed to docs/examples/expandedRowSpan.tsx

@@ -42,8 +42,12 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     'emptyNode',
   ]);
 
-  const flattenData: { record: RecordType; indent: number; index: number }[] =
-    useFlattenRecords<RecordType>(data, childrenColumnName, expandedKeys, getRowKey);
+  const flattenData = useFlattenRecords<RecordType>(
+    data,
+    childrenColumnName,
+    expandedKeys,
+    getRowKey,
+  );
 
   // =================== Performance ====================
   const perfRef = React.useRef<PerfRecord>({
@@ -59,19 +63,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
-          key={key}
-          rowKey={key}
+          key={rowKey}
+          rowKey={rowKey}
           getRowKey={index => {
-            const thisRecord = flattenData[index]?.record;
-            if (thisRecord) {
-              return getRowKey(thisRecord, index);
-            }
+            const thisRecord = flattenData[index];
+            return thisRecord?.rowKey;
           }}
           record={record}
           index={idx}

src/Body/index.tsx

@@ -15,6 +15,7 @@ function fillRecords<T>(
     record,
     indent,
     index,
+    rowKey: getRowKey(record, index),
   });
 
   const key = getRowKey(record);
@@ -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]);