feat: 增加table相同字段扩展

packages/app/src/components/table/hooks.tsx

@@ -7,6 +7,8 @@ import {
   SortingState,
   getSortedRowModel,
   ColumnSort,
+  getExpandedRowModel,
+  ExpandedState,
 } from '@tanstack/react-table';
 import {
   CSSProperties,
@@ -40,8 +42,8 @@ function parseColumn<T extends Record<string, unknown>>(
       dataIndex: 'no',
       align: 'center',
       width: TABLE_CELL_WIDTH.no,
-      render(_, index) {
-        return index + 1;
+      render(_, index, row) {
+        return row.depth > 0 ? null : index + 1;
       },
     });
   }
@@ -118,7 +120,6 @@ function parseColumn<T extends Record<string, unknown>>(
     return helper.accessor(dataIndex.toString(), {
       header: title?.toString(),
       cell: props => props.getValue(),
-      minSize: 0,
       size: width,
       meta,
     });
@@ -171,6 +172,7 @@ export function useTable<T extends Record<string, any>>(
     setRowSelection?: Dispatch<SetStateAction<RowSelectionState>>;
     rawKey?: keyof T;
     onSortingChange?: (state: ColumnSort | null) => void;
+    subRowKey?: keyof T;
   },
 ) {
   const {
@@ -179,6 +181,7 @@ export function useTable<T extends Record<string, any>>(
     setRowSelection,
     rawKey,
     onSortingChange,
+    subRowKey,
   } = options;
 
   const {columnList, hasSort, hasGroup} = useMemo(
@@ -213,6 +216,7 @@ export function useTable<T extends Record<string, any>>(
   useEffect(function() {
     onSortingChangeFn.current?.(sorting.length ? sorting[0] : null);
   }, [onSortingChangeFn, sorting]);
+  const [expanded, setExpanded] = useState<ExpandedState>({});
 
   const table = useReactTable({
     data,
@@ -222,6 +226,7 @@ export function useTable<T extends Record<string, any>>(
       columnOrder,
       rowSelection,
       sorting,
+      expanded,
     },
     getSortedRowModel: onSortingChange ? void 0 : getSortedRowModel(),
     getCoreRowModel: getCoreRowModel(),
@@ -231,6 +236,9 @@ export function useTable<T extends Record<string, any>>(
     onRowSelectionChange: setRowSelection,
     getRowId: row => row[rawKey as string | undefined ?? 'id'],
     onSortingChange: setSorting,
+    getSubRows: subRowKey ? row => row[subRowKey as string] : void 0,
+    getExpandedRowModel: subRowKey ? getExpandedRowModel() : void 0,
+    onExpandedChange: setExpanded,
   });
 
   type ActiveState = Header<Record<string, any>, unknown> | null;

packages/app/src/components/table/index.tsx

@@ -57,6 +57,7 @@ type Props<T extends Record<string, unknown>> = {
   enableRowDnd?: boolean;
   rawKey?: keyof T;
   onSortingChange?: (state: ColumnSort | null) => void;
+  subRowKey?: keyof T;
 };
 
 function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
@@ -78,6 +79,7 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
     rawKey,
     enableRowDnd,
     onSortingChange,
+    subRowKey,
   } = props;
   const [klonaData, setKlonaData] = useState(klona(data));
   const [{page, pageSize}, {setPageContext}] = useTablePageContext(pageContext);
@@ -102,6 +104,7 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
       setRowSelection,
       rawKey,
       onSortingChange,
+      subRowKey,
     },
   );