diff --git a/docs/demo/expandedRowClassName.md b/docs/demo/expandedRowClassName.md new file mode 100644 index 000000000..c3f7833e0 --- /dev/null +++ b/docs/demo/expandedRowClassName.md @@ -0,0 +1,8 @@ +--- +title: expandedRowClassName +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/examples/expandedRowClassName.module.less b/docs/examples/expandedRowClassName.module.less new file mode 100644 index 000000000..1f2c8a205 --- /dev/null +++ b/docs/examples/expandedRowClassName.module.less @@ -0,0 +1,4 @@ +.tesExpandedRowClassName td { + background-color: red !important; + color: #fff; +} diff --git a/docs/examples/expandedRowClassName.tsx b/docs/examples/expandedRowClassName.tsx new file mode 100644 index 000000000..0771414fc --- /dev/null +++ b/docs/examples/expandedRowClassName.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import Table from 'rc-table'; + +import styles from './expandedRowClassName.module.less'; + +const columns = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + }, + { + title: 'Age', + dataIndex: 'age', + key: 'age', + }, + { + title: 'Address', + dataIndex: 'address', + key: 'address', + }, +]; + +const data = [ + { + name: 'John', + age: '25', + address: '1 A Street', + children: [ + { name: 'C-John', age: '31', address: '1 A Stree2t' }, + { + name: 'C-Fred', + age: '532', + address: '2 B Str1eet', + children: [ + { name: 'D-John', age: '31', address: '1 A Stree2t' }, + { name: 'D-Fred', age: '532', address: '2 B Str1eet' }, + { name: 'D-Anne', age: '43217', address: '3 C S3treet' }, + ], + }, + { name: 'C-Anne', age: '43217', address: '3 C S3treet' }, + ], + }, + { name: 'Fred', age: '38', address: '2 B Street' }, + { name: 'Anne', age: '47', address: '3 C Street' }, +]; + +const Demo = () => ( +
+

Table expandedRowClassName

+ styles.tesExpandedRowClassName, + }} + /> + +); + +export default Demo; diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx index 1b6be8393..7d9290bbc 100644 --- a/src/Body/BodyRow.tsx +++ b/src/Body/BodyRow.tsx @@ -124,6 +124,11 @@ function BodyRow( devRenderTimes(props); } + // 若没有 expandedRowRender 参数, 将使用 baseRowNode 渲染 Children + // 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName + const computedExpandedRowClassName = + expandedRowClassName && expandedRowClassName(record, index, indent); + // ======================== Base tr row ======================== const baseRowNode = ( ( `${prefixCls}-row`, `${prefixCls}-row-level-${indent}`, rowProps?.className, + indent >= 1 ? computedExpandedRowClassName : '', )} style={{ ...style, @@ -179,8 +185,7 @@ function BodyRow( let expandRowNode: React.ReactElement; if (rowSupportExpand && (expandedRef.current || expanded)) { const expandContent = expandedRowRender(record, index, indent + 1, expanded); - const computedExpandedRowClassName = - expandedRowClassName && expandedRowClassName(record, index, indent); + expandRowNode = ( { expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy(); }); + it('renders expend row class correctly using children without expandedRowRender', () => { + const expandedRowClassName = vi.fn().mockReturnValue('expand-row-test-class-name'); + + const _data = [{ ...sampleData[0], children: [sampleData[1]] }]; + + const wrapper = mount( + createTable({ + data: _data, + expandable: { + expandedRowKeys: [0], + expandedRowClassName, + }, + }), + ); + + expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy(); + }); + it('renders expend column title', () => { const wrapper = mount( createTable({