feat(table): add class to identify expanded and folded row

src/table/PrimaryTable.tsx

@@ -36,8 +36,14 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
   // 自定义列配置功能
   const { tDisplayColumns, renderColumnController } = useColumnController(props, { onColumnReduce });
   // 展开/收起行功能
-  const { showExpandedRow, showExpandIconColumn, getExpandColumn, renderExpandedRow, onInnerExpandRowClick } =
-    useRowExpand(props);
+  const {
+    showExpandedRow,
+    showExpandIconColumn,
+    getExpandColumn,
+    renderExpandedRow,
+    onInnerExpandRowClick,
+    getExpandedRowClass,
+  } = useRowExpand(props);
   // 排序功能
   const { renderSortIcon } = useSorter(props);
   // 行选中功能
@@ -75,7 +81,7 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
 
   // 如果想给 TR 添加类名，请在这里补充，不要透传更多额外 Props 到 BaseTable
   const tRowClassNames = (() => {
-    const tClassNames = [props.rowClassName, selectedRowClassNames];
+    const tClassNames = [props.rowClassName, selectedRowClassNames, getExpandedRowClass];
     return tClassNames.filter((v) => v);
   })();
 
@@ -264,7 +270,6 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
   if (props.expandOnRowClick || props.selectOnRowClick) {
     baseTableProps.onRowClick = onInnerRowClick;
   }
-
   return (
     <BaseTable
       ref={primaryTableRef}

src/table/TR.tsx

@@ -97,7 +97,7 @@ export default function TR(props: TrProps) {
   );
 
   const classes = useMemo(() => {
-    const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, type: 'body' }, rowKey || 'id');
+    const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, rowKey, type: 'body' }, rowKey || 'id');
     return [trStyles?.classes, customClasses];
   }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]);
 

src/table/hooks/useClassName.ts

@@ -108,6 +108,8 @@ export default function useClassName() {
       tableExpandClasses: {
         iconBox: `${classPrefix}-table__expand-box`,
         iconCell: `${classPrefix}-table__expandable-icon-cell`,
+        rowExpanded: `${classPrefix}-table__row--expanded`,
+        rowFolded: `${classPrefix}-table__row--folded`,
         row: `${classPrefix}-table__expanded-row`,
         rowInner: `${classPrefix}-table__expanded-row-inner`,
         expanded: `${classPrefix}-table__row--expanded`,

src/table/hooks/useRowExpand.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { MouseEvent, ReactNode, useCallback } from 'react';
 import { ChevronRightCircleIcon as TdChevronRightCircleIcon } from 'tdesign-icons-react';
 import get from 'lodash/get';
 import isFunction from 'lodash/isFunction';
@@ -10,6 +10,7 @@ import {
   PrimaryTableCellParams,
   TableExpandedRowParams,
   RowEventContext,
+  RowClassNameParams,
 } from '../type';
 import useClassName from './useClassName';
 import useControlled from '../../hooks/useControlled';
@@ -31,6 +32,17 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
 
   const showExpandedRow = Boolean(expandedRow);
 
+  const getExpandedRowClass = useCallback(
+    (params: RowClassNameParams<TableRowData>) => {
+      // 如果没有配置展开行，则不需要增加展开收起相关的类名
+      if (!showExpandedRow) return null;
+      const { row, rowKey } = params;
+      const currentRowKey = get(row, rowKey || 'id');
+      return tableExpandClasses[tExpandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'];
+    },
+    [tExpandedRowKeys, tableExpandClasses, showExpandedRow],
+  );
+
   const showExpandIconColumn = props.expandIcon !== false && showExpandedRow;
 
   const isFirstColumnFixed = props.columns?.[0]?.fixed === 'left';
@@ -117,5 +129,6 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
     getExpandColumn,
     renderExpandedRow,
     onInnerExpandRowClick,
+    getExpandedRowClass,
   };
 }

src/table/type.ts

@@ -963,6 +963,7 @@ export type TableRowAttributes<T> =
 export interface RowClassNameParams<T> {
   row: T;
   rowIndex: number;
+  rowKey?: string;
   type?: 'body' | 'foot';
 }