Skip to content

Commit ba7597b

Browse files
authored
fix: Header flicker (#507)
* fix: Not use row even fixed header do not have a data * update test case
1 parent 10adf12 commit ba7597b

File tree

4 files changed

+68
-77
lines changed

4 files changed

+68
-77
lines changed

src/Header/FixedHeader.tsx

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
import * as React from 'react';
2+
import { useMemo } from 'react';
23
import Header, { HeaderProps } from './Header';
34
import ColGroup from '../ColGroup';
45
import { ColumnsType, ColumnType } from '../interface';
56
import TableContext from '../context/TableContext';
67

8+
function useColumnWidth(colWidths: number[], columCount: number) {
9+
return useMemo(() => {
10+
const cloneColumns: number[] = [];
11+
for (let i = 0; i < columCount; i += 1) {
12+
const val = colWidths[i];
13+
if (val) {
14+
cloneColumns[i] = val;
15+
} else {
16+
return null;
17+
}
18+
}
19+
return cloneColumns;
20+
}, [colWidths.join('_'), columCount]);
21+
}
22+
723
export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
824
colWidths: number[];
925
columCount: number;
@@ -30,18 +46,18 @@ function FixedHeader<RecordType>({
3046
}),
3147
};
3248

33-
const columnsWithScrollbar = React.useMemo<ColumnsType<RecordType>>(
49+
const columnsWithScrollbar = useMemo<ColumnsType<RecordType>>(
3450
() => (scrollbarSize ? [...columns, ScrollBarColumn] : columns),
3551
[scrollbarSize, columns],
3652
);
3753

38-
const flattenColumnsWithScrollbar = React.useMemo<ColumnType<RecordType>[]>(
54+
const flattenColumnsWithScrollbar = useMemo<ColumnType<RecordType>[]>(
3955
() => (scrollbarSize ? [...flattenColumns, ScrollBarColumn] : flattenColumns),
4056
[scrollbarSize, flattenColumns],
4157
);
4258

4359
// Calculate the sticky offsets
44-
const headerStickyOffsets = React.useMemo(() => {
60+
const headerStickyOffsets = useMemo(() => {
4561
const { right, left } = stickyOffsets;
4662
return {
4763
...stickyOffsets,
@@ -50,16 +66,12 @@ function FixedHeader<RecordType>({
5066
};
5167
}, [scrollbarSize, stickyOffsets]);
5268

53-
const cloneWidths: number[] = [];
54-
for (let i = 0; i < columCount; i += 1) {
55-
cloneWidths[i] = colWidths[i];
56-
}
57-
const columnWidthsReady = !colWidths.every(width => !width);
69+
const mergedColumnWidth = useColumnWidth(colWidths, columCount);
5870

5971
return (
60-
<table style={{ tableLayout: 'fixed', visibility: columnWidthsReady ? null : 'hidden' }}>
72+
<table style={{ tableLayout: 'fixed', visibility: mergedColumnWidth ? null : 'hidden' }}>
6173
<ColGroup
62-
colWidths={[...colWidths, scrollbarSize]}
74+
colWidths={mergedColumnWidth ? [...mergedColumnWidth, scrollbarSize] : []}
6375
columCount={columCount + 1}
6476
columns={flattenColumnsWithScrollbar}
6577
/>

src/Table.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -373,7 +373,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
373373
const pureColWidths = colsKeys.map(columnKey => colsWidths.get(columnKey));
374374
const colWidths = React.useMemo(() => pureColWidths, [pureColWidths.join('_')]);
375375
const stickyOffsets = useStickyOffsets(colWidths, flattenColumns.length, direction);
376-
const fixHeader = hasData && scroll && validateValue(scroll.y);
376+
const fixHeader = scroll && validateValue(scroll.y);
377377
const horizonScroll = scroll && validateValue(scroll.x);
378378
const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed);
379379

tests/__snapshots__/FixedColumn.spec.js.snap

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1428,27 +1428,9 @@ exports[`Table.FixedColumn renders correctly scrollXY - with data 1`] = `
14281428
style="overflow: hidden;"
14291429
>
14301430
<table
1431-
style="table-layout: fixed;"
1431+
style="table-layout: fixed; visibility: hidden;"
14321432
>
1433-
<colgroup>
1434-
<col
1435-
style="width: 93px; min-width: 93px;"
1436-
/>
1437-
<col />
1438-
<col />
1439-
<col />
1440-
<col />
1441-
<col />
1442-
<col />
1443-
<col />
1444-
<col />
1445-
<col />
1446-
<col />
1447-
<col />
1448-
<col
1449-
style="width: 15px; min-width: 15px;"
1450-
/>
1451-
</colgroup>
1433+
<colgroup />
14521434
<thead
14531435
class="rc-table-thead"
14541436
>
@@ -2073,38 +2055,19 @@ exports[`Table.FixedColumn renders correctly scrollXY - with data 1`] = `
20732055

20742056
exports[`Table.FixedColumn renders correctly scrollXY - without data 1`] = `
20752057
<div
2076-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
2058+
class="rc-table rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
20772059
>
20782060
<div
20792061
class="rc-table-container"
20802062
>
20812063
<div
2082-
class="rc-table-content"
2083-
style="overflow-x: auto; overflow-y: hidden;"
2064+
class="rc-table-header"
2065+
style="overflow: hidden;"
20842066
>
20852067
<table
2086-
style="width: 1200px; min-width: 100%; table-layout: fixed;"
2068+
style="table-layout: fixed; visibility: hidden;"
20872069
>
2088-
<colgroup>
2089-
<col
2090-
style="width: 100px; min-width: 100px;"
2091-
/>
2092-
<col
2093-
style="width: 100px; min-width: 100px;"
2094-
/>
2095-
<col />
2096-
<col />
2097-
<col />
2098-
<col />
2099-
<col />
2100-
<col />
2101-
<col />
2102-
<col />
2103-
<col />
2104-
<col
2105-
style="width: 100px; min-width: 100px;"
2106-
/>
2107-
</colgroup>
2070+
<colgroup />
21082071
<thead
21092072
class="rc-table-thead"
21102073
>
@@ -2168,12 +2131,45 @@ exports[`Table.FixedColumn renders correctly scrollXY - without data 1`] = `
21682131
</th>
21692132
<th
21702133
class="rc-table-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
2171-
style="position: sticky; right: 0px;"
2134+
style="position: sticky; right: 15px;"
21722135
>
21732136
title12
21742137
</th>
2138+
<th
2139+
class="rc-table-cell rc-table-cell-fix-right rc-table-cell-scrollbar"
2140+
style="position: sticky; right: 0px;"
2141+
/>
21752142
</tr>
21762143
</thead>
2144+
</table>
2145+
</div>
2146+
<div
2147+
class="rc-table-body"
2148+
style="overflow-x: auto; overflow-y: scroll; max-height: 100px;"
2149+
>
2150+
<table
2151+
style="width: 1200px; min-width: 100%; table-layout: fixed;"
2152+
>
2153+
<colgroup>
2154+
<col
2155+
style="width: 100px; min-width: 100px;"
2156+
/>
2157+
<col
2158+
style="width: 100px; min-width: 100px;"
2159+
/>
2160+
<col />
2161+
<col />
2162+
<col />
2163+
<col />
2164+
<col />
2165+
<col />
2166+
<col />
2167+
<col />
2168+
<col />
2169+
<col
2170+
style="width: 100px; min-width: 100px;"
2171+
/>
2172+
</colgroup>
21772173
<tbody
21782174
class="rc-table-tbody"
21792175
>
@@ -2228,7 +2224,7 @@ exports[`Table.FixedColumn renders correctly scrollXY - without data 1`] = `
22282224
>
22292225
<div
22302226
class="rc-table-expanded-row-fixed"
2231-
style="width: 0px; position: sticky; left: 0px; overflow: hidden;"
2227+
style="width: -15px; position: sticky; left: 0px; overflow: hidden;"
22322228
>
22332229
No Data
22342230
</div>

tests/__snapshots__/Table.spec.js.snap

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,7 @@ exports[`Table.Basic custom components renders fixed column and header correctly
7979
<table
8080
style="table-layout: fixed; visibility: hidden;"
8181
>
82-
<colgroup>
83-
<col />
84-
<col />
85-
<col />
86-
<col
87-
style="width: 15px; min-width: 15px;"
88-
/>
89-
</colgroup>
82+
<colgroup />
9083
<thead
9184
class="rc-table-thead"
9285
name="my-header-wrapper"
@@ -196,19 +189,9 @@ exports[`Table.Basic custom components scroll content with scroll 1`] = `
196189
style="overflow: hidden;"
197190
>
198191
<table
199-
style="table-layout: fixed;"
192+
style="table-layout: fixed; visibility: hidden;"
200193
>
201-
<colgroup>
202-
<col
203-
style="width: 0px; min-width: 0;"
204-
/>
205-
<col
206-
style="width: 888px; min-width: 888px;"
207-
/>
208-
<col
209-
style="width: 15px; min-width: 15px;"
210-
/>
211-
</colgroup>
194+
<colgroup />
212195
<thead
213196
class="rc-table-thead"
214197
>

0 commit comments

Comments
 (0)