Skip to content

Commit 4a420cb

Browse files
youlunayouluna
committed
fix(Table): merge cell with GroupHeader GroupFooter, close #547 
1 parent e11f1df commit 4a420cb

File tree

3 files changed

+120
-18
lines changed

3 files changed

+120
-18
lines changed

‎docs/table/demo/list.md

+110-15
Original file line numberDiff line numberDiff line change
@@ -18,42 +18,123 @@ Demo the Group list.
1818
import { Table, Button } from '@alifd/next';
1919

2020
const dataSource = [{
21-
price: 'US $2.45',
22-
status: 0,
21+
price: 'US $1',
22+
status: 1,
23+
parent: 'root',
2324
id: 1,
2425
product: [{
2526
title: '2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace',
2627
avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'
2728
}],
2829
children: [{
29-
price: 'US $2.5',
30-
status: 1,
30+
price: 'US $1-1',
31+
status: 11,
3132
id: 2,
33+
parent: 0,
34+
index: 0,
3235
product: [{
3336
title: 'Free shipping women Casual dresses lady dress plus size 2014',
3437
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
3538
}]
3639
}, {
37-
price: 'US $2.5',
38-
status: 1,
40+
price: 'US $1-2',
41+
status: 12,
3942
id: 3,
43+
parent: 0,
44+
product: [{
45+
title: 'Free shipping women Casual dresses lady dress plus size 2014',
46+
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
47+
}]
48+
}, {
49+
price: 'US $1-3',
50+
status: 13,
51+
id: 7,
52+
parent: 0,
4053
product: [{
4154
title: 'Free shipping women Casual dresses lady dress plus size 2014',
4255
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
4356
}]
4457
}]
4558
}, {
46-
price: 'US $2.5',
47-
status: 1,
59+
price: 'US $3',
60+
status: 3,
61+
parent: 'root',
62+
id: 3,
63+
product: [{
64+
title: '2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace',
65+
avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'
66+
}],
67+
children: [{
68+
price: 'US $3-1',
69+
status: 31,
70+
id: 31,
71+
parent: 1,
72+
index: 0,
73+
product: [{
74+
title: 'Free shipping women Casual dresses lady dress plus size 2014',
75+
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
76+
}]
77+
}, {
78+
price: 'US $3-2',
79+
status: 32,
80+
id: 32,
81+
parent: 1,
82+
product: [{
83+
title: 'Free shipping women Casual dresses lady dress plus size 2014',
84+
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
85+
}]
86+
}, {
87+
price: 'US $3-3',
88+
status: 33,
89+
id: 33,
90+
parent: 1,
91+
product: [{
92+
title: 'Free shipping women Casual dresses lady dress plus size 2014',
93+
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
94+
}]
95+
}, {
96+
price: 'US $3-4',
97+
status: 34,
98+
id: 34,
99+
parent: 1,
100+
product: [{
101+
title: 'Free shipping women Casual dresses lady dress plus size 2014',
102+
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
103+
}]
104+
}]
105+
}, {
106+
price: 'US $4',
107+
status: 4,
108+
parent: 'root',
48109
id: 4,
49110
product: [{
50-
title: 'Free shipping women Casual dresses lady dress plus size 2014',
51-
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
111+
title: '2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace',
112+
avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'
52113
}],
53114
children: [{
54-
price: 'US $2.5',
55-
status: 1,
56-
id: 5,
115+
price: 'US $4-1',
116+
status: 31,
117+
id: 31,
118+
parent: 2,
119+
index: 0,
120+
product: [{
121+
title: 'Free shipping women Casual dresses lady dress plus size 2014',
122+
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
123+
}]
124+
}, {
125+
price: 'US $4-2',
126+
status: 32,
127+
id: 32,
128+
parent: 2,
129+
product: [{
130+
title: 'Free shipping women Casual dresses lady dress plus size 2014',
131+
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
132+
}]
133+
}, {
134+
price: 'US $4-3',
135+
status: 33,
136+
id: 33,
137+
parent: 2,
57138
product: [{
58139
title: 'Free shipping women Casual dresses lady dress plus size 2014',
59140
avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
@@ -88,6 +169,20 @@ const dataSource = [{
88169
}
89170
};
90171

172+
const getCellProps = (rowIndex, colIndex, dataIndex, record) => {
173+
if (colIndex === 3 && record.index === 0 ) {
174+
return {
175+
rowSpan: dataSource[record.parent].children.length
176+
};
177+
}
178+
179+
if (colIndex === 4 && record.index === 0 ) {
180+
return {
181+
rowSpan: dataSource[record.parent].children.length
182+
};
183+
}
184+
}
185+
91186
class App extends React.Component {
92187
state = {
93188
hasSelection: false
@@ -102,13 +197,13 @@ class App extends React.Component {
102197
return (
103198
<div>
104199
<p><Button onClick={this.toggleGroupSelection}>Toggle GroupHeader Selection</Button></p>
105-
<Table dataSource={dataSource} rowSelection={rowSelection}>
200+
<Table dataSource={dataSource} rowSelection={rowSelection} getCellProps={getCellProps}>
106201
<Table.GroupHeader cell={groupHeaderRender} hasChildrenSelection={this.state.hasSelection}/>
107202
<Table.GroupFooter cell={groupHeaderRender}/>
108203
<Table.Column cell={productRender} title="Product Details" dataIndex="product"/>
109204
<Table.Column cell={priceRender} title="Price" dataIndex="price" width={120}/>
110205
<Table.Column cell={statusRender} title="Status" dataIndex="status" width={100}/>
111-
<Table.Column cell={operRender} title="" width={100}/>
206+
<Table.Column cell={operRender} title="Operation" width={100}/>
112207
</Table>
113208
</div>
114209
);

‎src/table/base/row.jsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -81,19 +81,22 @@ export default class Row extends React.Component {
8181
}
8282
}
8383

84-
renderCells(record) {
84+
renderCells(record, rowIndex) {
8585
const {
8686
Cell,
8787
columns,
8888
getCellProps,
8989
cellRef,
9090
prefix,
91-
rowIndex,
9291
primaryKey,
9392
pure,
9493
locale,
9594
rtl,
9695
} = this.props;
96+
97+
// use params first, it's for list
98+
rowIndex = rowIndex !== undefined ? rowIndex : this.props.rowIndex;
99+
97100
const { lockType } = this.context;
98101
return columns.map((child, colIndex) => {
99102
/* eslint-disable no-unused-vars, prefer-const */

‎src/table/list/row.jsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ export default class GroupListRow extends Row {
3838
[`${prefix}table-row`]: true,
3939
[className]: className,
4040
});
41+
42+
// clear notRenderCellIndex, incase of cached data
43+
this.context.notRenderCellIndex = [];
44+
4145
return (
4246
<table
4347
className={cls}
@@ -73,7 +77,7 @@ export default class GroupListRow extends Row {
7377
const { children } = record;
7478
if (children) {
7579
return children.map((child, index) => {
76-
const cells = this.renderCells(child);
80+
const cells = this.renderCells(child, index);
7781
if (this.isChildrenSelection()) {
7882
if (!child[primaryKey]) {
7983
log.warning(

0 commit comments

Comments
 (0)