feat: expandedRowClassName support receive a string

README.md

@@ -93,7 +93,7 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 | expandable.defaultExpandedRowKeys | String[] | [] | initial expanded rows keys |
 | expandable.expandedRowKeys | String[] |  | current expanded rows keys |
 | expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode |  | Content render to expanded row |
-| expandable.expandedRowClassName | Function(recode, index, indent):string |  | get expanded row's className |
+| expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` |  | get expanded row's className |
 | expandable.expandRowByClick | boolean |  | Support expand by click row |
 | expandable.expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false |
 | expandable.expandIcon | props => ReactNode |  | Customize expand icon |

docs/examples/virtual.tsx

@@ -188,32 +188,20 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
   // ],
 }));
 
-const Demo = () => {
-  const tblRef = React.useRef<Reference>();
-
+const Demo: React.FC = () => {
+  const tableRef = React.useRef<Reference>();
   return (
     <div style={{ width: 800, padding: `0 64px` }}>
-      <button
-        onClick={() => {
-          tblRef.current?.scrollTo({
-            top: 9999999999999,
-          });
-        }}
-      >
+      <button onClick={() => tableRef.current?.scrollTo({ top: 9999999999999 })}>
         Scroll To End
       </button>
-
-      <button
-        onClick={() => {
-          tblRef.current?.scrollTo({
-            index: data.length - 1,
-          });
-        }}
-      >
+      <button onClick={() => tableRef.current?.scrollTo({ top: 0 })}>Scroll To Start</button>
+      <button onClick={() => tableRef.current?.scrollTo({ index: data.length - 1 })}>
         Scroll To Key
       </button>
-
       <VirtualTable
+        style={{ marginTop: 16 }}
+        ref={tableRef}
         columns={columns}
         // expandedRowRender={({ b, c }) => b || c}
         scroll={{ x: 1300, y: 200 }}
@@ -229,14 +217,10 @@ const Demo = () => {
         rowClassName="nice-try"
         getContainerWidth={(ele, width) => {
           // Minus border
-          const borderWidth = getComputedStyle(
-            ele.querySelector('.rc-table-tbody'),
-          ).borderInlineStartWidth;
-          const mergedWidth = width - parseInt(borderWidth, 10);
-
+          const { borderInlineStartWidth } = getComputedStyle(ele.querySelector('.rc-table-tbody'));
+          const mergedWidth = width - parseInt(borderInlineStartWidth, 10);
           return mergedWidth;
         }}
-        ref={tblRef}
       />
     </div>
   );

src/Body/BodyRow.tsx

@@ -126,8 +126,15 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
 
   // 若没有 expandedRowRender 参数, 将使用 baseRowNode 渲染 Children
   // 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName
-  const computedExpandedRowClassName =
-    expandedRowClassName && expandedRowClassName(record, index, indent);
+  const computedExpandedRowClassName = React.useMemo<string>(() => {
+    if (typeof expandedRowClassName === 'string') {
+      return expandedRowClassName;
+    }
+    if (typeof expandedRowClassName === 'function') {
+      return expandedRowClassName(record, index, indent);
+    }
+    return '';
+  }, [expandedRowClassName, record, index, indent]);
 
   // ======================== Base tr row ========================
   const baseRowNode = (
@@ -139,7 +146,9 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         `${prefixCls}-row`,
         `${prefixCls}-row-level-${indent}`,
         rowProps?.className,
-        indent >= 1 ? computedExpandedRowClassName : '',
+        {
+          [computedExpandedRowClassName]: indent >= 1,
+        },
       )}
       style={{
         ...style,

src/VirtualTable/BodyLine.tsx

@@ -41,7 +41,15 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
   let expandRowNode: React.ReactElement;
   if (rowSupportExpand && expanded) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
-    const computedExpandedRowClassName = expandedRowClassName?.(record, index, indent);
+
+    let computedExpandedRowClassName = '';
+
+    if (typeof expandedRowClassName === 'string') {
+      computedExpandedRowClassName = expandedRowClassName;
+    }
+    if (typeof expandedRowClassName === 'function') {
+      computedExpandedRowClassName = expandedRowClassName(record, index, indent);
+    }
 
     let additionalProps: React.TdHTMLAttributes<HTMLElement> = {};
     if (fixColumn) {

src/context/TableContext.tsx

@@ -37,7 +37,7 @@ export interface TableContextProps<RecordType = any> {
 
   // Body
   rowClassName: string | RowClassName<RecordType>;
-  expandedRowClassName: RowClassName<RecordType>;
+  expandedRowClassName: string | RowClassName<RecordType>;
   onRow?: GetComponentProps<RecordType>;
   emptyNode?: React.ReactNode;
 

src/interface.ts

@@ -247,7 +247,7 @@ export interface ExpandableConfig<RecordType> {
   /** @deprecated Please use `EXPAND_COLUMN` in `columns` directly */
   expandIconColumnIndex?: number;
   showExpandColumn?: boolean;
-  expandedRowClassName?: RowClassName<RecordType>;
+  expandedRowClassName?: string | RowClassName<RecordType>;
   childrenColumnName?: string;
   rowExpandable?: (record: RecordType) => boolean;
   columnWidth?: number | string;

tests/ExpandRow.spec.jsx

@@ -415,6 +415,21 @@ describe('Table.Expand', () => {
     expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy();
   });
 
+  it("renders expend row class correctly when it's string", () => {
+    const expandedRowClassName = 'expand-row-test-str-class-name';
+    const wrapper = mount(
+      createTable({
+        expandable: {
+          expandedRowRender,
+          expandedRowKeys: [0],
+          expandedRowClassName,
+        },
+      }),
+    );
+
+    expect(wrapper.find('tbody tr').at(1).hasClass(expandedRowClassName)).toBeTruthy();
+  });
+
   it('renders expend row class correctly using children without expandedRowRender', () => {
     const expandedRowClassName = vi.fn().mockReturnValue('expand-row-test-class-name');
 

tests/Virtual.spec.tsx

@@ -159,17 +159,20 @@ describe('Table.Virtual', () => {
 
   describe('expandable', () => {
     it('basic', () => {
-      const { container } = getTable({
-        expandable: {
-          expandedRowKeys: ['name0', 'name3'],
-          expandedRowRender: record => record.name,
-        },
+      (['bamboo', () => 'bamboo'] as const).forEach(cls => {
+        const { container } = getTable({
+          expandable: {
+            expandedRowKeys: ['name0', 'name3'],
+            expandedRowRender: record => record.name,
+            expandedRowClassName: cls,
+          },
+        });
+        const expandedCells = container.querySelectorAll('.rc-table-expanded-row-cell');
+        expect(expandedCells).toHaveLength(2);
+        expect(expandedCells[0].textContent).toBe('name0');
+        expect(expandedCells[1].textContent).toBe('name3');
+        expect(container.querySelector('.rc-table-expanded-row')).toHaveClass('bamboo');
       });
-
-      const expandedCells = container.querySelectorAll('.rc-table-expanded-row-cell');
-      expect(expandedCells).toHaveLength(2);
-      expect(expandedCells[0].textContent).toBe('name0');
-      expect(expandedCells[1].textContent).toBe('name3');
     });
 
     it('fixed', () => {