Skip to content

Commit 4928362

Browse files
zombieJzombieJ
committed
feat: support childrenColumnName
1 parent 7a79d09 commit 4928362

File tree

6 files changed

+125
-4
lines changed

6 files changed

+125
-4
lines changed

‎src/Body/BodyRow.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export interface BodyRowProps<RecordType> {
3333
rowExpandable: (record: RecordType) => boolean;
3434
indent?: number;
3535
getRowKey: GetRowKey<RecordType>;
36+
childrenColumnName: string;
3637
}
3738

3839
function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowProps<RecordType>) {
@@ -49,6 +50,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
4950
rowComponent: RowComponent,
5051
cellComponent,
5152
measureColumnWidth,
53+
childrenColumnName,
5254
} = props;
5355
const { prefixCls } = React.useContext(TableContext);
5456
const {
@@ -84,7 +86,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
8486
const rowSupportExpand = expandableType === 'row' && (!rowExpandable || rowExpandable(record));
8587
// Only when row is not expandable and `children` exist in record
8688
const nestExpandable = expandableType === 'nest';
87-
const hasNestChildren = 'children' in record;
89+
const hasNestChildren = childrenColumnName in record;
8890
const mergedExpandable = rowSupportExpand || nestExpandable;
8991

9092
// =========================== onRow ===========================
@@ -224,7 +226,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
224226
// ========================= Nest Row ==========================
225227
let nestRowNode: React.ReactElement[];
226228
if (hasNestChildren && expanded) {
227-
nestRowNode = (record.children || []).map(
229+
nestRowNode = (record[childrenColumnName] || []).map(
228230
(subRecord: RecordType, subIndex: number): React.ReactElement => {
229231
const subKey = getRowKey(subRecord, subIndex);
230232

‎src/Body/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export interface BodyProps<RecordType> {
1414
onRow: GetComponentProps<RecordType>;
1515
rowExpandable: (record: RecordType) => boolean;
1616
emptyNode: React.ReactNode;
17+
childrenColumnName: string;
1718
}
1819

1920
function Body<RecordType>({
@@ -25,6 +26,7 @@ function Body<RecordType>({
2526
onRow,
2627
rowExpandable,
2728
emptyNode,
29+
childrenColumnName,
2830
}: BodyProps<RecordType>) {
2931
const { prefixCls, getComponent } = React.useContext(TableContext);
3032
const { fixHeader, fixColumn, flattenColumns, componentWidth } = React.useContext(BodyContext);
@@ -53,6 +55,7 @@ function Body<RecordType>({
5355
onRow={onRow}
5456
getRowKey={getRowKey}
5557
rowExpandable={rowExpandable}
58+
childrenColumnName={childrenColumnName}
5659
/>,
5760
];
5861
});

‎src/Table.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
* - onRowMouseLeave
2020
* - getBodyWrapper
2121
* - bodyStyle
22-
* - childrenColumnName
2322
*
2423
* Deprecated:
2524
* - All expanded props, move into expandable
@@ -195,14 +194,16 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
195194
rowExpandable,
196195
expandIconColumnIndex,
197196
expandedRowClassName,
197+
childrenColumnName,
198198
} = expandableConfig;
199199

200200
const mergedExpandIcon = expandIcon || renderExpandIcon;
201+
const mergedChildrenColumnName = childrenColumnName || 'children';
201202
const expandableType = React.useMemo<ExpandableType>(() => {
202203
if (expandedRowRender) {
203204
return 'row';
204205
}
205-
if (mergedData.some(record => 'children' in record)) {
206+
if (mergedData.some(record => mergedChildrenColumnName in record)) {
206207
return 'nest';
207208
}
208209
return false;
@@ -386,6 +387,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
386387
getRowKey={getRowKey}
387388
onRow={onRow}
388389
emptyNode={emptyNode}
390+
childrenColumnName={mergedChildrenColumnName}
389391
/>
390392
);
391393

‎src/interface.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,8 @@ export interface LegacyExpandableProps<RecordType> {
158158
expandIconColumnIndex?: number;
159159
/** @deprecated Use `expandable.expandedRowClassName` instead */
160160
expandedRowClassName?: RowClassName<RecordType>;
161+
/** @deprecated Use `expandable.childrenColumnName` instead */
162+
childrenColumnName?: string;
161163
}
162164

163165
export type ExpandedRowRender<ValueType> = (

‎tests/ExpandRow.spec.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,23 @@ describe('Table.Expand', () => {
5252
expect(wrapper.render()).toMatchSnapshot();
5353
});
5454

55+
it('childrenColumnName', () => {
56+
const data = [
57+
{
58+
key: 0,
59+
name: 'Lucy',
60+
age: 27,
61+
list: [{ key: 2, name: 'Jim', age: 1 }],
62+
},
63+
{ key: 1, name: 'Jack', age: 28 },
64+
];
65+
const wrapper = mount(
66+
createTable({ data, expandable: { defaultExpandAllRows: true, childrenColumnName: 'list' } }),
67+
);
68+
expect(wrapper.find('tbody tr')).toHaveLength(3);
69+
expect(wrapper.render()).toMatchSnapshot();
70+
});
71+
5572
it('renders fixed column correctly', () => {
5673
const columns = [
5774
{ title: 'Name', dataIndex: 'name', key: 'name', fixed: true },

‎tests/__snapshots__/ExpandRow.spec.js.snap‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,100 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Table.Expand childrenColumnName 1`] = `
4+
<div
5+
class="rc-table"
6+
>
7+
<div
8+
class="rc-table-content"
9+
>
10+
<table
11+
style="table-layout: auto;"
12+
>
13+
<colgroup>
14+
<col />
15+
<col />
16+
</colgroup>
17+
<thead>
18+
<tr>
19+
<th
20+
class="rc-table-cell"
21+
>
22+
Name
23+
</th>
24+
<th
25+
class="rc-table-cell"
26+
>
27+
Age
28+
</th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
<tr
33+
class="rc-table-row rc-table-row-level-0"
34+
>
35+
<td
36+
class="rc-table-cell"
37+
>
38+
<span
39+
class="rc-table-indent indent-level-0"
40+
/>
41+
<span
42+
class="rc-table-row-expand-icon rc-table-row-expanded"
43+
/>
44+
Lucy
45+
</td>
46+
<td
47+
class="rc-table-cell"
48+
>
49+
27
50+
</td>
51+
</tr>
52+
<tr
53+
class="rc-table-row rc-table-row-level-1"
54+
>
55+
<td
56+
class="rc-table-cell"
57+
>
58+
<span
59+
class="rc-table-indent indent-level-1"
60+
/>
61+
<span
62+
class="rc-table-row-expand-icon rc-table-row-spaced"
63+
/>
64+
Jim
65+
</td>
66+
<td
67+
class="rc-table-cell"
68+
>
69+
1
70+
</td>
71+
</tr>
72+
<tr
73+
class="rc-table-row rc-table-row-level-0"
74+
>
75+
<td
76+
class="rc-table-cell"
77+
>
78+
<span
79+
class="rc-table-indent indent-level-0"
80+
/>
81+
<span
82+
class="rc-table-row-expand-icon rc-table-row-spaced"
83+
/>
84+
Jack
85+
</td>
86+
<td
87+
class="rc-table-cell"
88+
>
89+
28
90+
</td>
91+
</tr>
92+
</tbody>
93+
</table>
94+
</div>
95+
</div>
96+
`;
97+
398
exports[`Table.Expand renders fixed column correctly 1`] = `
499
<div
5100
class="rc-table rc-table-fixed-column"

0 commit comments

Comments
 (0)