Skip to content

Commit 17d2d27

Browse files
Barrywwwafc163
Barrywww
and
afc163
authored
fix: table crashes if expandable set without scroll (#765)
* fix: table crashes if expandable set without scroll * fix: minor code fix on src/Table.tsx Co-authored-by: afc163 <[email protected]> * fix: minor code fix on src/Table.tsx Co-authored-by: afc163 <[email protected]> Co-authored-by: afc163 <[email protected]>
1 parent 925ff71 commit 17d2d27

File tree

3 files changed

+336
-3
lines changed

3 files changed

+336
-3
lines changed

‎src/Table.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
432432
scrollYStyle = { overflowY: 'hidden' };
433433
}
434434
scrollTableStyle = {
435-
width: scroll.x === true ? 'auto' : scroll.x,
435+
width: scroll?.x === true ? 'auto' : scroll?.x,
436436
minWidth: '100%',
437437
};
438438
}
@@ -553,7 +553,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
553553
// When scroll.x is max-content, no need to fix table layout
554554
// it's width should stretch out to fit content
555555
if (fixColumn) {
556-
return scroll.x === 'max-content' ? 'auto' : 'fixed';
556+
return scroll?.x === 'max-content' ? 'auto' : 'fixed';
557557
}
558558
if (fixHeader || isSticky || flattenColumns.some(({ ellipsis }) => ellipsis)) {
559559
return 'fixed';
@@ -844,7 +844,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
844844
componentWidth,
845845
fixHeader,
846846
fixColumn,
847-
horizonScroll
847+
horizonScroll,
848848
}),
849849
[componentWidth, fixHeader, fixColumn, horizonScroll],
850850
);

‎tests/ExpandRow.spec.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,35 @@ describe('Table.Expand', () => {
170170
expect(wrapper2.render()).toMatchSnapshot();
171171
});
172172

173+
it('does not crash if scroll is not set', () => {
174+
const columns = [
175+
{ title: 'Name', dataIndex: 'name', key: 'name' },
176+
{ title: 'Age', dataIndex: 'age', key: 'age' },
177+
{ title: 'Gender', dataIndex: 'gender', key: 'gender' },
178+
];
179+
const data = [
180+
{ key: 0, name: 'Lucy', age: 27, gender: 'F' },
181+
{ key: 1, name: 'Jack', age: 28, gender: 'M' },
182+
];
183+
const wrapper = mount(
184+
createTable({
185+
columns,
186+
data,
187+
scroll: {},
188+
expandable: { expandedRowRender, fixed: true },
189+
}),
190+
);
191+
const wrapper2 = mount(
192+
createTable({
193+
columns,
194+
data,
195+
expandable: { expandedRowRender, fixed: true },
196+
}),
197+
);
198+
expect(wrapper.render()).toMatchSnapshot();
199+
expect(wrapper2.render()).toMatchSnapshot();
200+
});
201+
173202
it('expandable fix not when expandIconColumnIndex', () => {
174203
const columns = [
175204
{ title: 'Name', dataIndex: 'name', key: 'name' },

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

Lines changed: 304 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,310 @@ exports[`Table.Expand childrenColumnName 1`] = `
103103
</div>
104104
`;
105105

106+
exports[`Table.Expand does not crash if scroll is not set 1`] = `
107+
<div
108+
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
109+
>
110+
<div
111+
class="rc-table-container"
112+
>
113+
<div
114+
class="rc-table-content"
115+
style="overflow-x: auto; overflow-y: hidden;"
116+
>
117+
<table
118+
style="min-width: 100%; table-layout: fixed;"
119+
>
120+
<colgroup>
121+
<col
122+
class="rc-table-expand-icon-col"
123+
/>
124+
</colgroup>
125+
<thead
126+
class="rc-table-thead"
127+
>
128+
<tr>
129+
<th
130+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
131+
style="position: sticky; left: 0px;"
132+
/>
133+
<th
134+
class="rc-table-cell"
135+
>
136+
Name
137+
</th>
138+
<th
139+
class="rc-table-cell"
140+
>
141+
Age
142+
</th>
143+
<th
144+
class="rc-table-cell"
145+
>
146+
Gender
147+
</th>
148+
</tr>
149+
</thead>
150+
<tbody
151+
class="rc-table-tbody"
152+
>
153+
<tr
154+
aria-hidden="true"
155+
class="rc-table-measure-row"
156+
style="height: 0px; font-size: 0;"
157+
>
158+
<td
159+
style="padding: 0px; border: 0px; height: 0px;"
160+
>
161+
<div
162+
style="height: 0px; overflow: hidden;"
163+
>
164+
 
165+
</div>
166+
</td>
167+
<td
168+
style="padding: 0px; border: 0px; height: 0px;"
169+
>
170+
<div
171+
style="height: 0px; overflow: hidden;"
172+
>
173+
 
174+
</div>
175+
</td>
176+
<td
177+
style="padding: 0px; border: 0px; height: 0px;"
178+
>
179+
<div
180+
style="height: 0px; overflow: hidden;"
181+
>
182+
 
183+
</div>
184+
</td>
185+
<td
186+
style="padding: 0px; border: 0px; height: 0px;"
187+
>
188+
<div
189+
style="height: 0px; overflow: hidden;"
190+
>
191+
 
192+
</div>
193+
</td>
194+
</tr>
195+
<tr
196+
class="rc-table-row rc-table-row-level-0"
197+
data-row-key="0"
198+
>
199+
<td
200+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
201+
style="position: sticky; left: 0px;"
202+
>
203+
<span
204+
class="rc-table-row-expand-icon rc-table-row-collapsed"
205+
/>
206+
</td>
207+
<td
208+
class="rc-table-cell"
209+
>
210+
Lucy
211+
</td>
212+
<td
213+
class="rc-table-cell"
214+
>
215+
27
216+
</td>
217+
<td
218+
class="rc-table-cell"
219+
>
220+
F
221+
</td>
222+
</tr>
223+
<tr
224+
class="rc-table-row rc-table-row-level-0"
225+
data-row-key="1"
226+
>
227+
<td
228+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
229+
style="position: sticky; left: 0px;"
230+
>
231+
<span
232+
class="rc-table-row-expand-icon rc-table-row-collapsed"
233+
/>
234+
</td>
235+
<td
236+
class="rc-table-cell"
237+
>
238+
Jack
239+
</td>
240+
<td
241+
class="rc-table-cell"
242+
>
243+
28
244+
</td>
245+
<td
246+
class="rc-table-cell"
247+
>
248+
M
249+
</td>
250+
</tr>
251+
</tbody>
252+
</table>
253+
</div>
254+
</div>
255+
</div>
256+
`;
257+
258+
exports[`Table.Expand does not crash if scroll is not set 2`] = `
259+
<div
260+
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
261+
>
262+
<div
263+
class="rc-table-container"
264+
>
265+
<div
266+
class="rc-table-content"
267+
style="overflow-x: auto; overflow-y: hidden;"
268+
>
269+
<table
270+
style="min-width: 100%; table-layout: fixed;"
271+
>
272+
<colgroup>
273+
<col
274+
class="rc-table-expand-icon-col"
275+
/>
276+
</colgroup>
277+
<thead
278+
class="rc-table-thead"
279+
>
280+
<tr>
281+
<th
282+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
283+
style="position: sticky; left: 0px;"
284+
/>
285+
<th
286+
class="rc-table-cell"
287+
>
288+
Name
289+
</th>
290+
<th
291+
class="rc-table-cell"
292+
>
293+
Age
294+
</th>
295+
<th
296+
class="rc-table-cell"
297+
>
298+
Gender
299+
</th>
300+
</tr>
301+
</thead>
302+
<tbody
303+
class="rc-table-tbody"
304+
>
305+
<tr
306+
aria-hidden="true"
307+
class="rc-table-measure-row"
308+
style="height: 0px; font-size: 0;"
309+
>
310+
<td
311+
style="padding: 0px; border: 0px; height: 0px;"
312+
>
313+
<div
314+
style="height: 0px; overflow: hidden;"
315+
>
316+
 
317+
</div>
318+
</td>
319+
<td
320+
style="padding: 0px; border: 0px; height: 0px;"
321+
>
322+
<div
323+
style="height: 0px; overflow: hidden;"
324+
>
325+
 
326+
</div>
327+
</td>
328+
<td
329+
style="padding: 0px; border: 0px; height: 0px;"
330+
>
331+
<div
332+
style="height: 0px; overflow: hidden;"
333+
>
334+
 
335+
</div>
336+
</td>
337+
<td
338+
style="padding: 0px; border: 0px; height: 0px;"
339+
>
340+
<div
341+
style="height: 0px; overflow: hidden;"
342+
>
343+
 
344+
</div>
345+
</td>
346+
</tr>
347+
<tr
348+
class="rc-table-row rc-table-row-level-0"
349+
data-row-key="0"
350+
>
351+
<td
352+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
353+
style="position: sticky; left: 0px;"
354+
>
355+
<span
356+
class="rc-table-row-expand-icon rc-table-row-collapsed"
357+
/>
358+
</td>
359+
<td
360+
class="rc-table-cell"
361+
>
362+
Lucy
363+
</td>
364+
<td
365+
class="rc-table-cell"
366+
>
367+
27
368+
</td>
369+
<td
370+
class="rc-table-cell"
371+
>
372+
F
373+
</td>
374+
</tr>
375+
<tr
376+
class="rc-table-row rc-table-row-level-0"
377+
data-row-key="1"
378+
>
379+
<td
380+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
381+
style="position: sticky; left: 0px;"
382+
>
383+
<span
384+
class="rc-table-row-expand-icon rc-table-row-collapsed"
385+
/>
386+
</td>
387+
<td
388+
class="rc-table-cell"
389+
>
390+
Jack
391+
</td>
392+
<td
393+
class="rc-table-cell"
394+
>
395+
28
396+
</td>
397+
<td
398+
class="rc-table-cell"
399+
>
400+
M
401+
</td>
402+
</tr>
403+
</tbody>
404+
</table>
405+
</div>
406+
</div>
407+
</div>
408+
`;
409+
106410
exports[`Table.Expand not use nest when children is invalidate 1`] = `
107411
<div
108412
class="rc-table"

0 commit comments

Comments
 (0)