Skip to content

Commit 3e9410a

Browse files
inottninottn
authored
fix: expand column not visible when expandable.fixed is true (#1314)
1 parent 48c8976 commit 3e9410a

File tree

3 files changed

+133
-17
lines changed

3 files changed

+133
-17
lines changed

‎src/hooks/useColumns/index.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -178,11 +178,10 @@ function useColumns<RecordType>(
178178
// >>> Insert expand column if not exist
179179
if (!cloneColumns.includes(EXPAND_COLUMN)) {
180180
const expandColIndex = expandIconColumnIndex || 0;
181-
if (expandColIndex >= 0 && (expandColIndex || fixed === 'left' || !fixed)) {
182-
cloneColumns.splice(expandColIndex, 0, EXPAND_COLUMN);
183-
}
184-
if (fixed === 'right') {
185-
cloneColumns.splice(baseColumns.length, 0, EXPAND_COLUMN);
181+
const insertIndex =
182+
expandColIndex === 0 && fixed === 'right' ? baseColumns.length : expandColIndex;
183+
if (insertIndex >= 0) {
184+
cloneColumns.splice(insertIndex, 0, EXPAND_COLUMN);
186185
}
187186
}
188187

‎tests/ExpandRow.spec.jsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,14 @@ describe('Table.Expand', () => {
219219
}),
220220
);
221221
const wrapper2 = mount(
222+
createTable({
223+
columns,
224+
data,
225+
scroll: { x: 903 },
226+
expandable: { expandedRowRender, fixed: true, expandIconColumnIndex: 1 },
227+
}),
228+
);
229+
const wrapper3 = mount(
222230
createTable({
223231
columns,
224232
data,
@@ -227,10 +235,11 @@ describe('Table.Expand', () => {
227235
}),
228236
);
229237
expect(wrapper.find('.rc-table-has-fix-left').length).toBe(0);
230-
expect(wrapper2.find('.rc-table-has-fix-right').length).toBe(0);
238+
expect(wrapper2.find('.rc-table-has-fix-left').length).toBe(0);
239+
expect(wrapper3.find('.rc-table-has-fix-right').length).toBe(0);
231240
});
232241

233-
it('fixed in expandable Fixed in expandable', () => {
242+
it('fixed in expandable', () => {
234243
const columns = [
235244
{ title: 'Name', dataIndex: 'name', key: 'name' },
236245
{ title: 'Age', dataIndex: 'age', key: 'age' },
@@ -249,6 +258,14 @@ describe('Table.Expand', () => {
249258
}),
250259
);
251260
const wrapper2 = mount(
261+
createTable({
262+
columns,
263+
data,
264+
scroll: { x: 903 },
265+
expandable: { expandedRowRender, fixed: true },
266+
}),
267+
);
268+
const wrapper3 = mount(
252269
createTable({
253270
columns,
254271
data,
@@ -257,7 +274,8 @@ describe('Table.Expand', () => {
257274
}),
258275
);
259276
expect(wrapper.find('.rc-table-has-fix-left').length).toBe(1);
260-
expect(wrapper2.find('.rc-table-has-fix-right').length).toBe(1);
277+
expect(wrapper2.find('.rc-table-has-fix-left').length).toBe(1);
278+
expect(wrapper3.find('.rc-table-has-fix-right').length).toBe(1);
261279
});
262280

263281
describe('config expand column index', () => {

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

Lines changed: 108 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ LoadedCheerio {
138138
exports[`Table.Expand > does not crash if scroll is not set 1`] = `
139139
LoadedCheerio {
140140
"0": <div
141-
class="rc-table rc-table-scroll-horizontal"
141+
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
142142
>
143143
<div
144144
class="rc-table-container"
@@ -148,13 +148,21 @@ LoadedCheerio {
148148
style="overflow-x: auto; overflow-y: hidden;"
149149
>
150150
<table
151-
style="min-width: 100%; table-layout: auto;"
151+
style="min-width: 100%; table-layout: fixed;"
152152
>
153-
<colgroup />
153+
<colgroup>
154+
<col
155+
class="rc-table-expand-icon-col"
156+
/>
157+
</colgroup>
154158
<thead
155159
class="rc-table-thead"
156160
>
157161
<tr>
162+
<th
163+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
164+
style="position: sticky; left: 0px;"
165+
/>
158166
<th
159167
class="rc-table-cell"
160168
scope="col"
@@ -210,11 +218,28 @@ LoadedCheerio {
210218
 
211219
</div>
212220
</td>
221+
<td
222+
style="padding: 0px; border: 0px; height: 0px;"
223+
>
224+
<div
225+
style="height: 0px; overflow: hidden;"
226+
>
227+
 
228+
</div>
229+
</td>
213230
</tr>
214231
<tr
215232
class="rc-table-row rc-table-row-level-0"
216233
data-row-key="0"
217234
>
235+
<td
236+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
237+
style="position: sticky; left: 0px;"
238+
>
239+
<span
240+
class="rc-table-row-expand-icon rc-table-row-collapsed"
241+
/>
242+
</td>
218243
<td
219244
class="rc-table-cell"
220245
>
@@ -235,6 +260,14 @@ LoadedCheerio {
235260
class="rc-table-row rc-table-row-level-0"
236261
data-row-key="1"
237262
>
263+
<td
264+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
265+
style="position: sticky; left: 0px;"
266+
>
267+
<span
268+
class="rc-table-row-expand-icon rc-table-row-collapsed"
269+
/>
270+
</td>
238271
<td
239272
class="rc-table-cell"
240273
>
@@ -290,7 +323,7 @@ LoadedCheerio {
290323
exports[`Table.Expand > does not crash if scroll is not set 2`] = `
291324
LoadedCheerio {
292325
"0": <div
293-
class="rc-table rc-table-scroll-horizontal"
326+
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
294327
>
295328
<div
296329
class="rc-table-container"
@@ -300,13 +333,21 @@ LoadedCheerio {
300333
style="overflow-x: auto; overflow-y: hidden;"
301334
>
302335
<table
303-
style="min-width: 100%; table-layout: auto;"
336+
style="min-width: 100%; table-layout: fixed;"
304337
>
305-
<colgroup />
338+
<colgroup>
339+
<col
340+
class="rc-table-expand-icon-col"
341+
/>
342+
</colgroup>
306343
<thead
307344
class="rc-table-thead"
308345
>
309346
<tr>
347+
<th
348+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
349+
style="position: sticky; left: 0px;"
350+
/>
310351
<th
311352
class="rc-table-cell"
312353
scope="col"
@@ -362,11 +403,28 @@ LoadedCheerio {
362403
 
363404
</div>
364405
</td>
406+
<td
407+
style="padding: 0px; border: 0px; height: 0px;"
408+
>
409+
<div
410+
style="height: 0px; overflow: hidden;"
411+
>
412+
 
413+
</div>
414+
</td>
365415
</tr>
366416
<tr
367417
class="rc-table-row rc-table-row-level-0"
368418
data-row-key="0"
369419
>
420+
<td
421+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
422+
style="position: sticky; left: 0px;"
423+
>
424+
<span
425+
class="rc-table-row-expand-icon rc-table-row-collapsed"
426+
/>
427+
</td>
370428
<td
371429
class="rc-table-cell"
372430
>
@@ -387,6 +445,14 @@ LoadedCheerio {
387445
class="rc-table-row rc-table-row-level-0"
388446
data-row-key="1"
389447
>
448+
<td
449+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
450+
style="position: sticky; left: 0px;"
451+
>
452+
<span
453+
class="rc-table-row-expand-icon rc-table-row-collapsed"
454+
/>
455+
</td>
390456
<td
391457
class="rc-table-cell"
392458
>
@@ -1117,7 +1183,7 @@ LoadedCheerio {
11171183
exports[`Table.Expand > work in expandable fix 1`] = `
11181184
LoadedCheerio {
11191185
"0": <div
1120-
class="rc-table rc-table-scroll-horizontal"
1186+
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
11211187
>
11221188
<div
11231189
class="rc-table-container"
@@ -1127,13 +1193,21 @@ LoadedCheerio {
11271193
style="overflow-x: auto; overflow-y: hidden;"
11281194
>
11291195
<table
1130-
style="width: 903px; min-width: 100%; table-layout: auto;"
1196+
style="width: 903px; min-width: 100%; table-layout: fixed;"
11311197
>
1132-
<colgroup />
1198+
<colgroup>
1199+
<col
1200+
class="rc-table-expand-icon-col"
1201+
/>
1202+
</colgroup>
11331203
<thead
11341204
class="rc-table-thead"
11351205
>
11361206
<tr>
1207+
<th
1208+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
1209+
style="position: sticky; left: 0px;"
1210+
/>
11371211
<th
11381212
class="rc-table-cell"
11391213
scope="col"
@@ -1189,11 +1263,28 @@ LoadedCheerio {
11891263
 
11901264
</div>
11911265
</td>
1266+
<td
1267+
style="padding: 0px; border: 0px; height: 0px;"
1268+
>
1269+
<div
1270+
style="height: 0px; overflow: hidden;"
1271+
>
1272+
 
1273+
</div>
1274+
</td>
11921275
</tr>
11931276
<tr
11941277
class="rc-table-row rc-table-row-level-0"
11951278
data-row-key="0"
11961279
>
1280+
<td
1281+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
1282+
style="position: sticky; left: 0px;"
1283+
>
1284+
<span
1285+
class="rc-table-row-expand-icon rc-table-row-collapsed"
1286+
/>
1287+
</td>
11971288
<td
11981289
class="rc-table-cell"
11991290
>
@@ -1214,6 +1305,14 @@ LoadedCheerio {
12141305
class="rc-table-row rc-table-row-level-0"
12151306
data-row-key="1"
12161307
>
1308+
<td
1309+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
1310+
style="position: sticky; left: 0px;"
1311+
>
1312+
<span
1313+
class="rc-table-row-expand-icon rc-table-row-collapsed"
1314+
/>
1315+
</td>
12171316
<td
12181317
class="rc-table-cell"
12191318
>

0 commit comments

Comments
 (0)