Skip to content

Commit 668a9fd

Browse files
inottnafc163
inottn
and
afc163
authored
fix: expand column not visible when expandable.fixed is true (#1312)
Co-authored-by: afc163 <[email protected]>
1 parent 40e2a17 commit 668a9fd

File tree

3 files changed

+140
-25
lines changed

3 files changed

+140
-25
lines changed

‎src/hooks/useColumns/index.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -159,14 +159,12 @@ function useColumns<RecordType>(
159159
// >>> Insert expand column if not exist
160160
if (!cloneColumns.includes(EXPAND_COLUMN)) {
161161
const expandColIndex = expandIconColumnIndex || 0;
162-
if (
163-
expandColIndex >= 0 &&
164-
(expandColIndex || fixed === 'left' || fixed === 'start' || !fixed)
165-
) {
166-
cloneColumns.splice(expandColIndex, 0, EXPAND_COLUMN);
167-
}
168-
if (fixed === 'right' || fixed === 'end') {
169-
cloneColumns.splice(baseColumns.length, 0, EXPAND_COLUMN);
162+
const insertIndex =
163+
expandColIndex === 0 && (fixed === 'right' || fixed === 'end')
164+
? baseColumns.length
165+
: expandColIndex;
166+
if (insertIndex >= 0) {
167+
cloneColumns.splice(insertIndex, 0, EXPAND_COLUMN);
170168
}
171169
}
172170

‎tests/ExpandRow.spec.jsx

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -219,27 +219,36 @@ describe('Table.Expand', () => {
219219
{ key: 0, name: 'Lucy', age: 27, gender: 'F' },
220220
{ key: 1, name: 'Jack', age: 28, gender: 'M' },
221221
];
222-
const { container, rerender } = render(
222+
const { container } = render(
223223
createTable({
224224
columns,
225225
data,
226226
scroll: { x: 903 },
227227
expandable: { expandedRowRender, fixed: 'left', expandIconColumnIndex: 1 },
228228
}),
229229
);
230-
const { container: container2, rerender: rerender2 } = render(
230+
const { container: container2 } = render(
231+
createTable({
232+
columns,
233+
data,
234+
scroll: { x: 903 },
235+
expandable: { expandedRowRender, fixed: true, expandIconColumnIndex: 1 },
236+
}),
237+
);
238+
const { container: container3 } = render(
231239
createTable({
232240
columns,
233241
data,
234242
scroll: { x: 903 },
235243
expandable: { expandedRowRender, fixed: 'right', expandIconColumnIndex: 2 },
236244
}),
237245
);
238-
expect(container.querySelectorAll('.rc-table-has-fix-left').length).toBe(0);
239-
expect(container2.querySelectorAll('.rc-table-has-fix-right').length).toBe(0);
246+
expect(container.querySelectorAll('.rc-table-has-fix-start').length).toBe(0);
247+
expect(container2.querySelectorAll('.rc-table-has-fix-start').length).toBe(0);
248+
expect(container3.querySelectorAll('.rc-table-has-fix-end').length).toBe(0);
240249
});
241250

242-
it('fixed in expandable Fixed in expandable', () => {
251+
it('fixed in expandable', () => {
243252
const columns = [
244253
{ title: 'Name', dataIndex: 'name', key: 'name' },
245254
{ title: 'Age', dataIndex: 'age', key: 'age' },
@@ -249,15 +258,23 @@ describe('Table.Expand', () => {
249258
{ key: 0, name: 'Lucy', age: 27, gender: 'F' },
250259
{ key: 1, name: 'Jack', age: 28, gender: 'M' },
251260
];
252-
const { container, rerender } = render(
261+
const { container } = render(
253262
createTable({
254263
columns,
255264
data,
256265
scroll: { x: 903 },
257266
expandable: { expandedRowRender, fixed: 'left' },
258267
}),
259268
);
260-
const { container: container2, rerender: rerender2 } = render(
269+
const { container: container2 } = render(
270+
createTable({
271+
columns,
272+
data,
273+
scroll: { x: 903 },
274+
expandable: { expandedRowRender, fixed: true },
275+
}),
276+
);
277+
const { container: container3 } = render(
261278
createTable({
262279
columns,
263280
data,
@@ -266,7 +283,8 @@ describe('Table.Expand', () => {
266283
}),
267284
);
268285
expect(container.querySelector('.rc-table-has-fix-start')).toBeTruthy();
269-
expect(container2.querySelector('.rc-table-has-fix-end')).toBeTruthy();
286+
expect(container2.querySelector('.rc-table-has-fix-start')).toBeTruthy();
287+
expect(container3.querySelector('.rc-table-has-fix-end')).toBeTruthy();
270288
});
271289

272290
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
@@ -107,7 +107,7 @@ exports[`Table.Expand > childrenColumnName 1`] = `
107107

108108
exports[`Table.Expand > does not crash if scroll is not set 1`] = `
109109
<div
110-
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
110+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start"
111111
>
112112
<div
113113
class="rc-table-container"
@@ -117,13 +117,21 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
117117
style="overflow-x: auto; overflow-y: hidden;"
118118
>
119119
<table
120-
style="min-width: 100%; table-layout: auto;"
120+
style="min-width: 100%; table-layout: fixed;"
121121
>
122-
<colgroup />
122+
<colgroup>
123+
<col
124+
class="rc-table-expand-icon-col"
125+
/>
126+
</colgroup>
123127
<thead
124128
class="rc-table-thead"
125129
>
126130
<tr>
131+
<th
132+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
133+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
134+
/>
127135
<th
128136
class="rc-table-cell"
129137
scope="col"
@@ -179,11 +187,28 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
179187
 
180188
</div>
181189
</td>
190+
<td
191+
style="padding: 0px; border: 0px; height: 0px;"
192+
>
193+
<div
194+
style="height: 0px; overflow: hidden;"
195+
>
196+
 
197+
</div>
198+
</td>
182199
</tr>
183200
<tr
184201
class="rc-table-row rc-table-row-level-0"
185202
data-row-key="0"
186203
>
204+
<td
205+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
206+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
207+
>
208+
<span
209+
class="rc-table-row-expand-icon rc-table-row-collapsed"
210+
/>
211+
</td>
187212
<td
188213
class="rc-table-cell"
189214
>
@@ -204,6 +229,14 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
204229
class="rc-table-row rc-table-row-level-0"
205230
data-row-key="1"
206231
>
232+
<td
233+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
234+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
235+
>
236+
<span
237+
class="rc-table-row-expand-icon rc-table-row-collapsed"
238+
/>
239+
</td>
207240
<td
208241
class="rc-table-cell"
209242
>
@@ -229,7 +262,7 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
229262

230263
exports[`Table.Expand > does not crash if scroll is not set 2`] = `
231264
<div
232-
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
265+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start"
233266
>
234267
<div
235268
class="rc-table-container"
@@ -239,13 +272,21 @@ exports[`Table.Expand > does not crash if scroll is not set 2`] = `
239272
style="overflow-x: auto; overflow-y: hidden;"
240273
>
241274
<table
242-
style="min-width: 100%; table-layout: auto;"
275+
style="min-width: 100%; table-layout: fixed;"
243276
>
244-
<colgroup />
277+
<colgroup>
278+
<col
279+
class="rc-table-expand-icon-col"
280+
/>
281+
</colgroup>
245282
<thead
246283
class="rc-table-thead"
247284
>
248285
<tr>
286+
<th
287+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
288+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
289+
/>
249290
<th
250291
class="rc-table-cell"
251292
scope="col"
@@ -301,11 +342,28 @@ exports[`Table.Expand > does not crash if scroll is not set 2`] = `
301342
 
302343
</div>
303344
</td>
345+
<td
346+
style="padding: 0px; border: 0px; height: 0px;"
347+
>
348+
<div
349+
style="height: 0px; overflow: hidden;"
350+
>
351+
 
352+
</div>
353+
</td>
304354
</tr>
305355
<tr
306356
class="rc-table-row rc-table-row-level-0"
307357
data-row-key="0"
308358
>
359+
<td
360+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
361+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
362+
>
363+
<span
364+
class="rc-table-row-expand-icon rc-table-row-collapsed"
365+
/>
366+
</td>
309367
<td
310368
class="rc-table-cell"
311369
>
@@ -326,6 +384,14 @@ exports[`Table.Expand > does not crash if scroll is not set 2`] = `
326384
class="rc-table-row rc-table-row-level-0"
327385
data-row-key="1"
328386
>
387+
<td
388+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
389+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
390+
>
391+
<span
392+
class="rc-table-row-expand-icon rc-table-row-collapsed"
393+
/>
394+
</td>
329395
<td
330396
class="rc-table-cell"
331397
>
@@ -906,7 +972,7 @@ exports[`Table.Expand > renders tree row correctly with different children 1`] =
906972

907973
exports[`Table.Expand > work in expandable fix 1`] = `
908974
<div
909-
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
975+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start"
910976
>
911977
<div
912978
class="rc-table-container"
@@ -916,13 +982,21 @@ exports[`Table.Expand > work in expandable fix 1`] = `
916982
style="overflow-x: auto; overflow-y: hidden;"
917983
>
918984
<table
919-
style="width: 903px; min-width: 100%; table-layout: auto;"
985+
style="width: 903px; min-width: 100%; table-layout: fixed;"
920986
>
921-
<colgroup />
987+
<colgroup>
988+
<col
989+
class="rc-table-expand-icon-col"
990+
/>
991+
</colgroup>
922992
<thead
923993
class="rc-table-thead"
924994
>
925995
<tr>
996+
<th
997+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
998+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
999+
/>
9261000
<th
9271001
class="rc-table-cell"
9281002
scope="col"
@@ -978,11 +1052,28 @@ exports[`Table.Expand > work in expandable fix 1`] = `
9781052
 
9791053
</div>
9801054
</td>
1055+
<td
1056+
style="padding: 0px; border: 0px; height: 0px;"
1057+
>
1058+
<div
1059+
style="height: 0px; overflow: hidden;"
1060+
>
1061+
 
1062+
</div>
1063+
</td>
9811064
</tr>
9821065
<tr
9831066
class="rc-table-row rc-table-row-level-0"
9841067
data-row-key="0"
9851068
>
1069+
<td
1070+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
1071+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
1072+
>
1073+
<span
1074+
class="rc-table-row-expand-icon rc-table-row-collapsed"
1075+
/>
1076+
</td>
9861077
<td
9871078
class="rc-table-cell"
9881079
>
@@ -1003,6 +1094,14 @@ exports[`Table.Expand > work in expandable fix 1`] = `
10031094
class="rc-table-row rc-table-row-level-0"
10041095
data-row-key="1"
10051096
>
1097+
<td
1098+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
1099+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
1100+
>
1101+
<span
1102+
class="rc-table-row-expand-icon rc-table-row-collapsed"
1103+
/>
1104+
</td>
10061105
<td
10071106
class="rc-table-cell"
10081107
>

0 commit comments

Comments
 (0)