Skip to content

Commit eba59a8

Browse files
afc163afc163
authored
fix: Table column align issue when scroll.x is true (#1341)
1 parent c9d0c5f commit eba59a8

File tree

9 files changed

+64
-36
lines changed

9 files changed

+64
-36
lines changed

‎assets/index.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@
4444

4545
padding: @cell-padding;
4646
white-space: normal;
47-
word-break: break-word;
4847
border: @border;
4948
border-top: 0;
5049
border-left: 0;

‎docs/examples/scrollY.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,9 @@ const Test = () => {
7676
rowKey={record => record.key}
7777
onRow={(record, index) => ({ style: { backgroundColor: 'red' } })}
7878
/>
79+
<h3>Column align issue</h3>
80+
<p>https://github.com/ant-design/ant-design/issues/54889</p>
81+
<Table columns={columns} data={data} sticky scroll={{ y: 300, x: 2000 }} />
7982
</div>
8083
);
8184
};

‎docs/examples/stickyHeader.tsx‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,34 @@ const data = [
137137
{ a: '1333', c: 'eee', d: 2, key: '20' },
138138
];
139139

140+
const columns3: ColumnType<RecordType>[] = [
141+
{ title: '', dataIndex: 'name', key: '0' },
142+
{ title: 'First column', dataIndex: 'name', key: '1' },
143+
{ title: 'Second column', dataIndex: 'address', key: '2' },
144+
{ title: 'Third column', dataIndex: 'age', key: '3' },
145+
{ title: 'Another column', dataIndex: 'address', key: '4' },
146+
{ title: 'Extra column', dataIndex: 'name', key: '5' },
147+
{ title: 'And yet another column', dataIndex: 'address', key: '6' },
148+
{
149+
title: 'Column 7 with extraaaaaaaaa long word',
150+
dataIndex: 'age',
151+
key: '7',
152+
},
153+
{ title: 'Column 8', dataIndex: 'address', key: '8' },
154+
{ title: 'Column 9', dataIndex: 'name', key: '9' },
155+
{ title: 'Column 10', dataIndex: 'address', key: '10' },
156+
{ title: 'Column 11', dataIndex: 'address', key: '11' },
157+
{ title: 'Column 12', dataIndex: 'age', key: '12' },
158+
{ title: 'Column 13', dataIndex: 'address', key: '13' },
159+
{ title: 'Column 14', dataIndex: 'name', key: '14' },
160+
{ title: 'Column 15', dataIndex: 'address', key: '15' },
161+
{ title: 'Column 16', dataIndex: 'address', key: '16' },
162+
{ title: 'Column 17', dataIndex: 'name', key: '17' },
163+
{ title: 'Column 18', dataIndex: 'address', key: '18' },
164+
{ title: 'Column 19', dataIndex: 'address', key: '19' },
165+
{ title: 'Column 20', dataIndex: 'age', key: '20' },
166+
];
167+
140168
const Demo = () => {
141169
const container = useRef();
142170
return (
@@ -274,7 +302,7 @@ const Demo = () => {
274302
<br />
275303
<Table
276304
columns={fixedColumns}
277-
data={[{}]}
305+
data={[{ key: '1' }]}
278306
scroll={{
279307
x: 'max-content',
280308
}}
@@ -283,7 +311,7 @@ const Demo = () => {
283311
<br />
284312
<Table
285313
columns={columnsWithWidth}
286-
data={[{}]}
314+
data={[{ key: '1' }]}
287315
scroll={{
288316
x: 1200,
289317
}}
@@ -301,7 +329,7 @@ const Demo = () => {
301329
<br />
302330
<Table
303331
columns={fixedColumns.map(column => ({ ...column, width: undefined }))}
304-
data={[{}]}
332+
data={[{ key: '1' }]}
305333
scroll={{
306334
x: 'max-content',
307335
}}
@@ -310,12 +338,26 @@ const Demo = () => {
310338
<br />
311339
<Table
312340
columns={columnsGrouped}
313-
data={[{}, {}]}
341+
data={[{ key: '1' }, { key: '2' }]}
314342
scroll={{
315343
x: 'max-content',
316344
}}
317345
sticky
318346
/>
347+
<br />
348+
<h3>scroll.x is true</h3>
349+
<p>https://github.com/ant-design/ant-design/issues/54894</p>
350+
<Table
351+
columns={columns3}
352+
data={
353+
[
354+
{ key: '1', name: 'Test', age: 1, address: '2' },
355+
{ key: '2', name: '0', age: 1, address: '2' },
356+
] as any
357+
}
358+
sticky
359+
scroll={{ x: true }}
360+
/>
319361
</div>
320362
);
321363
};

‎src/ColGroup.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function ColGroup<RecordType>({ colWidths, columns, columCount }: ColGroupProps<
4040
}
4141
}
4242

43-
return <colgroup>{cols}</colgroup>;
43+
return cols.length > 0 ? <colgroup>{cols}</colgroup> : null;
4444
}
4545

4646
export default ColGroup;

‎src/FixedHolder/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
3434
stickyTopOffset?: number;
3535
stickyBottomOffset?: number;
3636
stickyClassName?: string;
37-
scrollTableStyle?: React.CSSProperties;
37+
scrollX?: number | string | true;
3838
tableLayout?: TableLayout;
3939
onScroll: (info: { currentTarget: HTMLDivElement; scrollLeft?: number }) => void;
4040
children: (info: HeaderProps<RecordType>) => React.ReactNode;
@@ -60,7 +60,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
6060
stickyTopOffset,
6161
stickyBottomOffset,
6262
stickyClassName,
63-
scrollTableStyle,
63+
scrollX,
6464
tableLayout = 'fixed',
6565
onScroll,
6666
children,
@@ -179,7 +179,9 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
179179
style={{
180180
tableLayout,
181181
visibility: noData || mergedColumnWidth ? null : 'hidden',
182-
...scrollTableStyle,
182+
minWidth: '100%',
183+
// https://github.com/ant-design/ant-design/issues/54894
184+
width: scrollX,
183185
}}
184186
>
185187
{colGroupNode}

‎src/Table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -684,7 +684,7 @@ function Table<RecordType extends DefaultRecordType>(
684684
...columnContext,
685685
direction,
686686
stickyClassName,
687-
scrollTableStyle,
687+
scrollX: mergedScrollX,
688688
tableLayout: mergedTableLayout,
689689
onScroll: onInternalScroll,
690690
};

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ LoadedCheerio {
1414
<table
1515
style="table-layout: auto;"
1616
>
17-
<colgroup />
1817
<thead
1918
class="rc-table-thead"
2019
>
@@ -519,7 +518,6 @@ LoadedCheerio {
519518
<table
520519
style="table-layout: auto;"
521520
>
522-
<colgroup />
523521
<thead
524522
class="rc-table-thead"
525523
>
@@ -861,7 +859,6 @@ LoadedCheerio {
861859
<table
862860
style="table-layout: auto;"
863861
>
864-
<colgroup />
865862
<thead
866863
class="rc-table-thead"
867864
>
@@ -996,7 +993,6 @@ LoadedCheerio {
996993
<table
997994
style="table-layout: auto;"
998995
>
999-
<colgroup />
1000996
<thead
1001997
class="rc-table-thead"
1002998
>

‎tests/__snapshots__/FixedColumn.spec.tsx.snap‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1941,7 +1941,7 @@ LoadedCheerio {
19411941
style="overflow: hidden;"
19421942
>
19431943
<table
1944-
style="table-layout: fixed; width: 1200px; min-width: 100%;"
1944+
style="table-layout: fixed; min-width: 100%; width: 1200px;"
19451945
>
19461946
<colgroup>
19471947
<col
@@ -2814,7 +2814,7 @@ LoadedCheerio {
28142814
style="overflow: hidden;"
28152815
>
28162816
<table
2817-
style="table-layout: fixed; width: 1200px; min-width: 100%;"
2817+
style="table-layout: fixed; min-width: 100%; width: 1200px;"
28182818
>
28192819
<colgroup>
28202820
<col
@@ -3136,7 +3136,7 @@ exports[`Table.FixedColumn > shadow should be shown when there are columns where
31363136
style="overflow: hidden;"
31373137
>
31383138
<table
3139-
style="table-layout: fixed; width: 1500px; min-width: 100%;"
3139+
style="table-layout: fixed; min-width: 100%; width: 1500px;"
31403140
>
31413141
<colgroup>
31423142
<col
@@ -3200,7 +3200,6 @@ exports[`Table.FixedColumn > shadow should be shown when there are columns where
32003200
<table
32013201
style="width: 1500px; min-width: 100%; table-layout: fixed;"
32023202
>
3203-
<colgroup />
32043203
<tbody
32053204
class="rc-table-tbody"
32063205
>
@@ -5567,7 +5566,7 @@ exports[`Table.FixedColumn > shadow should display correctly 1`] = `
55675566
style="overflow: hidden;"
55685567
>
55695568
<table
5570-
style="table-layout: fixed; width: 1500px; min-width: 100%;"
5569+
style="table-layout: fixed; min-width: 100%; width: 1500px;"
55715570
>
55725571
<colgroup>
55735572
<col
@@ -11653,7 +11652,7 @@ exports[`Table.FixedColumn > shadow should display correctly 2`] = `
1165311652
style="overflow: hidden;"
1165411653
>
1165511654
<table
11656-
style="table-layout: fixed; width: 1500px; min-width: 100%;"
11655+
style="table-layout: fixed; min-width: 100%; width: 1500px;"
1165711656
>
1165811657
<colgroup>
1165911658
<col

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

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ LoadedCheerio {
1717
<table
1818
style="table-layout: auto;"
1919
>
20-
<colgroup />
2120
<thead
2221
class="rc-table-thead"
2322
>
@@ -120,7 +119,6 @@ LoadedCheerio {
120119
name="my-table"
121120
style="table-layout: auto;"
122121
>
123-
<colgroup />
124122
<thead
125123
class="rc-table-thead"
126124
name="my-header-wrapper"
@@ -214,9 +212,8 @@ LoadedCheerio {
214212
style="overflow: hidden;"
215213
>
216214
<table
217-
style="table-layout: fixed; width: 100px; min-width: 100%;"
215+
style="table-layout: fixed; min-width: 100%; width: 100px;"
218216
>
219-
<colgroup />
220217
<thead
221218
class="rc-table-thead"
222219
name="my-header-wrapper"
@@ -264,7 +261,6 @@ LoadedCheerio {
264261
name="my-table"
265262
style="width: 100px; min-width: 100%; table-layout: fixed;"
266263
>
267-
<colgroup />
268264
<tbody
269265
class="rc-table-tbody"
270266
name="my-body-wrapper"
@@ -377,7 +373,7 @@ LoadedCheerio {
377373
style="overflow: hidden;"
378374
>
379375
<table
380-
style="table-layout: fixed; width: 100px; min-width: 100%;"
376+
style="table-layout: fixed; min-width: 100%; width: 100px;"
381377
>
382378
<colgroup>
383379
<col
@@ -457,7 +453,6 @@ LoadedCheerio {
457453
<table
458454
style="table-layout: auto;"
459455
>
460-
<colgroup />
461456
<thead
462457
class="rc-table-thead"
463458
>
@@ -567,7 +562,6 @@ LoadedCheerio {
567562
<table
568563
style="table-layout: auto;"
569564
>
570-
<colgroup />
571565
<thead
572566
class="rc-table-thead"
573567
>
@@ -660,7 +654,6 @@ LoadedCheerio {
660654
<table
661655
style="table-layout: auto;"
662656
>
663-
<colgroup />
664657
<thead
665658
class="test-prefix-thead"
666659
>
@@ -746,7 +739,6 @@ LoadedCheerio {
746739
<table
747740
style="table-layout: auto;"
748741
>
749-
<colgroup />
750742
<thead
751743
class="test-prefix-thead"
752744
>
@@ -832,7 +824,6 @@ LoadedCheerio {
832824
<table
833825
style="table-layout: auto;"
834826
>
835-
<colgroup />
836827
<thead
837828
class="rc-table-thead"
838829
>
@@ -930,7 +921,6 @@ LoadedCheerio {
930921
<table
931922
style="table-layout: auto;"
932923
>
933-
<colgroup />
934924
<thead
935925
class="rc-table-thead"
936926
>
@@ -1016,7 +1006,6 @@ LoadedCheerio {
10161006
<table
10171007
style="table-layout: auto;"
10181008
>
1019-
<colgroup />
10201009
<thead
10211010
class="rc-table-thead"
10221011
>
@@ -1095,7 +1084,6 @@ LoadedCheerio {
10951084
<table
10961085
style="table-layout: auto;"
10971086
>
1098-
<colgroup />
10991087
<thead
11001088
class="rc-table-thead"
11011089
>
@@ -1192,7 +1180,7 @@ LoadedCheerio {
11921180
style="overflow: hidden;"
11931181
>
11941182
<table
1195-
style="table-layout: fixed;"
1183+
style="table-layout: fixed; min-width: 100%;"
11961184
>
11971185
<colgroup>
11981186
<col
@@ -1266,7 +1254,6 @@ LoadedCheerio {
12661254
<table
12671255
style="table-layout: auto;"
12681256
>
1269-
<colgroup />
12701257
<thead
12711258
class="rc-table-thead"
12721259
>

0 commit comments

Comments
 (0)