feat: expandedRowClassName support receive a string (#1195)

Author: li-jia-nan

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

@@ -6,6 +6,7 @@ import devRenderTimes from '../hooks/useRenderTimes';
 import useRowInfo from '../hooks/useRowInfo';
 import type { ColumnType, CustomizeComponent, GetRowKey } from '../interface';
 import ExpandedRow from './ExpandedRow';
+import { computedExpandedClassName } from '../utils/expandUtil';
 
 export interface BodyRowProps<RecordType> {
   record: RecordType;
@@ -126,8 +127,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
 
   // 若没有 expandedRowRender 参数, 将使用 baseRowNode 渲染 Children
   // 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName
-  const computedExpandedRowClassName =
-    expandedRowClassName && expandedRowClassName(record, index, indent);
+  const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
 
   // ======================== Base tr row ========================
   const baseRowNode = (
@@ -139,12 +139,11 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         `${prefixCls}-row`,
         `${prefixCls}-row-level-${indent}`,
         rowProps?.className,
-        indent >= 1 ? computedExpandedRowClassName : '',
+        {
+          [expandedClsName]: indent >= 1,
+        },
       )}
-      style={{
-        ...style,
-        ...rowProps?.style,
-      }}
+      style={{ ...style, ...rowProps?.style }}
     >
       {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
         const { render, dataIndex, className: columnClassName } = column;
@@ -192,7 +191,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         className={classNames(
           `${prefixCls}-expanded-row`,
           `${prefixCls}-expanded-row-level-${indent + 1}`,
-          computedExpandedRowClassName,
+          expandedClsName,
         )}
         prefixCls={prefixCls}
         component={RowComponent}

src/VirtualTable/BodyLine.tsx

@@ -7,6 +7,7 @@ import type { FlattenData } from '../hooks/useFlattenRecords';
 import useRowInfo from '../hooks/useRowInfo';
 import VirtualCell from './VirtualCell';
 import { StaticContext } from './context';
+import { computedExpandedClassName } from '../utils/expandUtil';
 
 export interface BodyLineProps<RecordType = any> {
   data: FlattenData<RecordType>;
@@ -41,7 +42,8 @@ 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);
+
+    const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
 
     let additionalProps: React.TdHTMLAttributes<HTMLElement> = {};
     if (fixColumn) {
@@ -59,7 +61,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
         className={classNames(
           `${prefixCls}-expanded-row`,
           `${prefixCls}-expanded-row-level-${indent + 1}`,
-          computedExpandedRowClassName,
+          expandedClsName,
         )}
       >
         <Cell

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;

src/utils/expandUtil.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import type { RenderExpandIconProps, Key, GetRowKey } from '../interface';
+import type { RenderExpandIconProps, Key, GetRowKey, ExpandableConfig } from '../interface';
 
 export function renderExpandIcon<RecordType>({
   prefixCls,
@@ -50,3 +50,18 @@ export function findAllChildrenKeys<RecordType>(
 
   return keys;
 }
+
+export function computedExpandedClassName<RecordType>(
+  cls: ExpandableConfig<RecordType>['expandedRowClassName'],
+  record: RecordType,
+  index: number,
+  indent: number,
+) {
+  if (typeof cls === 'string') {
+    return cls;
+  }
+  if (typeof cls === 'function') {
+    return cls(record, index, indent);
+  }
+  return '';
+}

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', () => {