Skip to content

Commit a7152ad

Browse files
zombieJzombieJ
authored
fix: VirtualTable should auto collapse if items is less than scrollY (#1020)
* fix: auto collapse if needed * docs: update demo
1 parent 5ab30cf commit a7152ad

File tree

3 files changed

+142
-143
lines changed

3 files changed

+142
-143
lines changed

‎docs/examples/virtual.tsx‎

Lines changed: 140 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -12,154 +12,152 @@ interface RecordType {
1212
}
1313

1414
const columns: ColumnsType = [
15-
{ title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
16-
{ title: 'title1', dataIndex: 'a', key: 'a', width: 800 },
17-
{ title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
18-
// { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left', ellipsis: true },
19-
// {
20-
// title: 'title3',
21-
// dataIndex: 'c',
22-
// key: 'c',
23-
// onCell: (_, index) => {
24-
// if (index % 4 === 0) {
25-
// return {
26-
// rowSpan: 3,
27-
// };
28-
// }
15+
{ title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
16+
{ title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left', ellipsis: true },
17+
{
18+
title: 'title3',
19+
dataIndex: 'c',
20+
key: 'c',
21+
onCell: (_, index) => {
22+
if (index % 4 === 0) {
23+
return {
24+
rowSpan: 3,
25+
};
26+
}
2927

30-
// if (index % 4 === 3) {
31-
// return {
32-
// rowSpan: 1,
33-
// colSpan: 3,
34-
// };
35-
// }
28+
if (index % 4 === 3) {
29+
return {
30+
rowSpan: 1,
31+
colSpan: 3,
32+
};
33+
}
3634

37-
// return {
38-
// rowSpan: 0,
39-
// };
40-
// },
41-
// },
42-
// {
43-
// title: 'title4',
44-
// key: 'd',
45-
// children: [
46-
// // Children columns
47-
// {
48-
// title: 'title4-1',
49-
// dataIndex: 'b',
50-
// onCell: (_, index) => {
51-
// if (index % 4 === 0) {
52-
// return {
53-
// colSpan: 3,
54-
// };
55-
// }
35+
return {
36+
rowSpan: 0,
37+
};
38+
},
39+
},
40+
{
41+
title: 'title4',
42+
key: 'd',
43+
children: [
44+
// Children columns
45+
{
46+
title: 'title4-1',
47+
dataIndex: 'b',
48+
onCell: (_, index) => {
49+
if (index % 4 === 0) {
50+
return {
51+
colSpan: 3,
52+
};
53+
}
5654

57-
// if (index % 4 === 3) {
58-
// return {
59-
// colSpan: 0,
60-
// };
61-
// }
62-
// },
63-
// },
64-
// {
65-
// title: 'title4-2',
66-
// dataIndex: 'b',
67-
// onCell: (_, index) => {
68-
// if (index % 4 === 0 || index % 4 === 3) {
69-
// return {
70-
// colSpan: 0,
71-
// };
72-
// }
73-
// },
74-
// },
75-
// ],
76-
// },
77-
// {
78-
// title: 'title6',
79-
// dataIndex: 'b',
80-
// key: 'f',
81-
// onCell: (_, index) => {
82-
// if (index % 4 === 0) {
83-
// return {
84-
// rowSpan: 0,
85-
// colSpan: 0,
86-
// };
87-
// }
55+
if (index % 4 === 3) {
56+
return {
57+
colSpan: 0,
58+
};
59+
}
60+
},
61+
},
62+
{
63+
title: 'title4-2',
64+
dataIndex: 'b',
65+
onCell: (_, index) => {
66+
if (index % 4 === 0 || index % 4 === 3) {
67+
return {
68+
colSpan: 0,
69+
};
70+
}
71+
},
72+
},
73+
],
74+
},
75+
{
76+
title: 'title6',
77+
dataIndex: 'b',
78+
key: 'f',
79+
onCell: (_, index) => {
80+
if (index % 4 === 0) {
81+
return {
82+
rowSpan: 0,
83+
colSpan: 0,
84+
};
85+
}
8886

89-
// if (index % 4 === 1) {
90-
// return {
91-
// rowSpan: 3,
92-
// };
93-
// }
87+
if (index % 4 === 1) {
88+
return {
89+
rowSpan: 3,
90+
};
91+
}
9492

95-
// return {
96-
// rowSpan: 0,
97-
// };
98-
// },
99-
// },
100-
// {
101-
// title: (
102-
// <div>
103-
// title7
104-
// <br />
105-
// <br />
106-
// <br />
107-
// Hello world!
108-
// </div>
109-
// ),
110-
// dataIndex: 'bk',
111-
// key: 'g',
112-
// },
113-
// {
114-
// title: 'title8',
115-
// dataIndex: 'b',
116-
// onCell: (_, index) => {
117-
// if (index % 2 === 0) {
118-
// return {
119-
// rowSpan: 2,
120-
// colSpan: 2,
121-
// };
122-
// }
93+
return {
94+
rowSpan: 0,
95+
};
96+
},
97+
},
98+
{
99+
title: (
100+
<div>
101+
title7
102+
<br />
103+
<br />
104+
<br />
105+
Hello world!
106+
</div>
107+
),
108+
dataIndex: 'bk',
109+
key: 'g',
110+
},
111+
{
112+
title: 'title8',
113+
dataIndex: 'b',
114+
onCell: (_, index) => {
115+
if (index % 2 === 0) {
116+
return {
117+
rowSpan: 2,
118+
colSpan: 2,
119+
};
120+
}
123121

124-
// return {
125-
// rowSpan: 0,
126-
// };
127-
// },
128-
// },
129-
// {
130-
// title: 'title9 i',
131-
// dataIndex: 'b',
132-
// key: 'i',
133-
// onCell: () => ({
134-
// colSpan: 0,
135-
// }),
136-
// },
137-
// { title: 'title10', dataIndex: 'b', key: 'j' },
138-
// {
139-
// title: 'title11',
140-
// dataIndex: 'b',
141-
// key: 'k',
142-
// width: 50,
143-
// fixed: 'right',
144-
// onCell: (_, index) => {
145-
// return {
146-
// rowSpan: index % 2 === 0 ? 2 : 0,
147-
// // colSpan: 2,
148-
// };
149-
// },
150-
// },
151-
// {
152-
// title: 'title12',
153-
// dataIndex: 'b',
154-
// key: 'l',
155-
// width: 100,
156-
// fixed: 'right',
157-
// onCell: () => {
158-
// return {
159-
// // colSpan: 0,
160-
// };
161-
// },
162-
// },
122+
return {
123+
rowSpan: 0,
124+
};
125+
},
126+
},
127+
{
128+
title: 'title9 i',
129+
dataIndex: 'b',
130+
key: 'i',
131+
onCell: () => ({
132+
colSpan: 0,
133+
}),
134+
},
135+
{ title: 'title10', dataIndex: 'b', key: 'j' },
136+
{
137+
title: 'title11',
138+
dataIndex: 'b',
139+
key: 'k',
140+
width: 50,
141+
fixed: 'right',
142+
onCell: (_, index) => {
143+
return {
144+
rowSpan: index % 2 === 0 ? 2 : 0,
145+
// colSpan: 2,
146+
};
147+
},
148+
},
149+
{
150+
title: 'title12',
151+
dataIndex: 'b',
152+
key: 'l',
153+
width: 100,
154+
fixed: 'right',
155+
onCell: () => {
156+
return {
157+
// colSpan: 0,
158+
};
159+
},
160+
},
163161
];
164162

165163
export function cleanOnCell(cols: any = []) {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
"classnames": "^2.2.5",
5959
"rc-resize-observer": "^1.1.0",
6060
"rc-util": "^5.36.0",
61-
"rc-virtual-list": "^3.10.4"
61+
"rc-virtual-list": "^3.10.7"
6262
},
6363
"devDependencies": {
6464
"@rc-component/father-plugin": "^1.0.2",

‎src/VirtualTable/BodyGrid.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
197197
if (flattenData.length) {
198198
bodyContent = (
199199
<VirtualList<FlattenData<any>>
200+
fullHeight={false}
200201
ref={listRef}
201202
className={classNames(tblPrefixCls, `${tblPrefixCls}-virtual`)}
202203
height={scrollY}

0 commit comments

Comments
 (0)