Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/demo/expandedRowClassName.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: expandedRowClassName
nav:
title: Demo
path: /demo
---

<code src="../examples/expandedRowClassName.tsx"></code>
4 changes: 4 additions & 0 deletions docs/examples/expandedRowClassName.module.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.tesExpandedRowClassName td {
background-color: red !important;
color: #fff;
}
62 changes: 62 additions & 0 deletions docs/examples/expandedRowClassName.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => (
<div>
<h2>Table expandedRowClassName</h2>
<Table
rowKey={'name'}
columns={columns}
data={data}
expandable={{
expandedRowClassName: () => styles.tesExpandedRowClassName,
}}
/>
</div>
);

export default Demo;
9 changes: 7 additions & 2 deletions src/Body/BodyRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,11 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
devRenderTimes(props);
}

// 若没有 expandedRowRender 参数, 将使用 baseRowNode 渲染 Children
// 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName
const computedExpandedRowClassName =
expandedRowClassName && expandedRowClassName(record, index, indent);

// ======================== Base tr row ========================
const baseRowNode = (
<RowComponent
Expand All @@ -134,6 +139,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
`${prefixCls}-row`,
`${prefixCls}-row-level-${indent}`,
rowProps?.className,
indent >= 1 ? computedExpandedRowClassName : '',
)}
style={{
...style,
Expand Down Expand Up @@ -179,8 +185,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
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 = (
<ExpandedRow
expanded={expanded}
Expand Down
18 changes: 18 additions & 0 deletions tests/ExpandRow.spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -415,6 +415,24 @@ describe('Table.Expand', () => {
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({
Expand Down