feat(Table): Table 支持树形数据显示和可展开同时出现 (#703)

Author: cuilanxin

packages/react-table/README.md

@@ -729,9 +729,6 @@ ReactDOM.render(<Demo />, _mount_);
 
 可以通过设置 indentSize 以控制每一层的缩进宽度
 
-> ⚠️ 注意: 树形数据展示和`expandable.expandedRowRender`请不要同时出现，后续或将支持
-<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
-
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
 import ReactDOM from 'react-dom';
@@ -805,7 +802,7 @@ const Demo = () => {
       <Table 
         rowKey="id"
         columns={columns}
-        data={dataSource} 
+        data={dataSource}
       />
     </div>
   )
@@ -968,7 +965,8 @@ ReactDOM.render(<Demo />, _mount_);
 
 ### expandable
 
-注意 expandedRowKeys 与 onExpandedRowsChange 必须成对出现
+> ⚠️ 注意: expandedRowKeys 与 onExpandedRowsChange 必须同时出现或不出现
+<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
 
 | 参数 | 说明 | 类型 | 默认值 |
 |--------- |-------- |--------- |-------- |

packages/react-table/src/TableTr.tsx

@@ -38,9 +38,11 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
     locationWidth,
   } = props;
   const [isOpacity, setIsOpacity] = useState(false);
+  const [childrenIndex, setChildrenIndex] = useState(0);
   const [expandIndex, setExpandIndex] = useState<Array<T[keyof T] | number>>([]);
   useEffect(() => {
     setIsOpacity(!!data?.find((it) => it[childrenColumnName]));
+    setChildrenIndex(keys?.findIndex((it) => it.key === 'uiw-expanded') === -1 ? 0 : 1);
   }, [data]);
 
   const IconDom = useMemo(() => {
@@ -92,7 +94,7 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
                   }
                 }
                 const isHasChildren = Array.isArray(trData[childrenColumnName]);
-                if (colNum === 0 && (isOpacity || hierarchy || isHasChildren)) {
+                if (colNum === childrenIndex && (isOpacity || hierarchy || isHasChildren)) {
                   objs.children = (
                     <>
                       {IconDom(key, isHasChildren)}
@@ -126,10 +128,10 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
                 );
               })}
             </tr>
+            {isExpandedDom(trData, rowNum)}
             {expandIndex.includes(key) && (
               <TableTr {...props} data={trData[childrenColumnName]} hierarchy={hierarchy + 1} />
             )}
-            {isExpandedDom(trData, rowNum)}
           </React.Fragment>
         );
       })}

packages/react-table/src/index.tsx

@@ -131,9 +131,20 @@ export default function Table<T extends { [key: string]: V }, V>(props: TablePro
     return finalLocationWidth.current;
   };
   useEffect(() => {
+    const childKey = expandable?.childrenColumnName || 'children';
+    const deep = (params: TableColumns<T>) => {
+      const arr1: Array<T[keyof T] | number> = [];
+      const arr = params.map((it: T, index: number) => {
+        if (Array.isArray(it[childKey])) {
+          arr1.push(...deep(it[childKey]));
+        }
+        return rowKey ? it[rowKey] : index;
+      });
+      return [...arr1, ...arr];
+    };
     if (expandable) {
       if (expandable.defaultExpandAllRows) {
-        setExpandIndex(data.map((it, index) => (rowKey ? it[rowKey] : index)));
+        setExpandIndex(deep(data));
         return;
       }
       if (expandable.defaultExpandedRowKeys) {