Skip to content

fix: fix sticky header column width with empty data #1323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
afc163 merged 6 commits into from
Aug 29, 2025
Merged

fix: fix sticky header column width with empty data #1323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1f9b5a4
feat: add sticky header with empty data and max-content scroll support
afc163 Aug 26, 2025
398cc72
fix: sticky header column width test and colGroup handling
afc163 Aug 29, 2025
9d62c0c
fix: adjust sticky header width calculation and remove unused props
afc163 Aug 29, 2025
593d858
fix: remove unnecessary -1 from expanded row width calculation
afc163 Aug 29, 2025
4cbf636
fix: adjust column widths in FixedColumn snapshot test
afc163 Aug 29, 2025
434ccd6
Update docs/examples/stickyHeader.tsx
afc163 Aug 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 54 additions & 5 deletions docs/examples/stickyHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,13 @@ const columns: ColumnType<RecordType>[] = [
},
];

const columnsWithWidth: ColumnType<RecordType>[] = [
{ title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
Copy link
Contributor

@crazyair crazyair Sep 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

使用了 max-content，这里不应该再加 width 的，这样会忽略掉问题。

{ title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
{ title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
{ title: 'title4', dataIndex: 'd', key: 'd', width: 100 },
];

const data = [
{ a: '123', key: '1' },
{ a: 'cdd', b: 'edd', key: '2' },
Expand All @@ -105,11 +112,7 @@ const data = [
const Demo = () => {
const container = useRef();
return (
<div
style={{
height: 10000,
}}
>
<div>
<h2>Sticky</h2>
<Table<RecordType>
columns={columns}
Expand Down Expand Up @@ -212,6 +215,52 @@ const Demo = () => {
suscipit asperiores, id ullam in iste soluta dignissimos vero incidunt, rem ex consectetur
beatae totam aperiam. Sunt, laudantium?
</div>

<h2>Sticky header with empty data</h2>
<Table
columns={fixedColumns}
data={[]}
scroll={{
x: 'max-content',
}}
sticky
/>
<br />
<Table
columns={fixedColumns}
data={[]}
scroll={{
x: 1200,
}}
sticky
/>
<br />
<Table
columns={columnsWithWidth}
data={[]}
scroll={{
x: 'max-content',
}}
sticky
/>
<br />
<Table
columns={fixedColumns}
data={[{}]}
scroll={{
x: 'max-content',
}}
sticky
/>
<br />
<Table
columns={columnsWithWidth}
data={[{}]}
scroll={{
x: 1200,
}}
sticky
/>
</div>
);
};
Expand Down
15 changes: 6 additions & 9 deletions src/FixedHolder/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ function useColumnWidth(colWidths: readonly number[], columCount: number) {
export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
className: string;
noData: boolean;
maxContentScroll: boolean;
colWidths: readonly number[];
columCount: number;
direction: Direction;
Expand All @@ -37,6 +36,7 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
stickyClassName?: string;
onScroll: (info: { currentTarget: HTMLDivElement; scrollLeft?: number }) => void;
children: (info: HeaderProps<RecordType>) => React.ReactNode;
colGroup?: React.ReactNode;
}

const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((props, ref) => {
Expand All @@ -50,6 +50,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
columns,
flattenColumns,
colWidths,
colGroup,
columCount,
stickyOffsets,
direction,
Expand All @@ -58,7 +59,6 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
stickyBottomOffset,
stickyClassName,
onScroll,
maxContentScroll,
children,
...restProps
} = props;
Expand Down Expand Up @@ -98,12 +98,6 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
};
}, []);

// Check if all flattenColumns has width
const allFlattenColumnsWithWidth = React.useMemo(
() => flattenColumns.every(column => column.width),
[flattenColumns],
);

// Add scrollbar column
const lastColumn = flattenColumns[flattenColumns.length - 1];
const ScrollBarColumn: ColumnType<unknown> & { scrollbar: true } = {
Expand Down Expand Up @@ -156,7 +150,10 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
visibility: noData || mergedColumnWidth ? null : 'hidden',
}}
>
{(!noData || !maxContentScroll || allFlattenColumnsWithWidth) && (
{/* use original ColGroup if no data, otherwise use calculated column width */}
{noData ? (
Copy link
Contributor

@crazyair crazyair Sep 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果只有 noData 会不会不够，虽然没数据列头不换行了，那还有个场景（列的数据比列头少，也会换行吧？）

我目前的解法是，取 title 的元素，在第一行里 height =0 再渲染一次，撑起宽度

colGroup
) : (
<ColGroup
colWidths={mergedColumnWidth ? [...mergedColumnWidth, combinationScrollBarSize] : []}
columCount={columCount + 1}
Expand Down
3 changes: 2 additions & 1 deletion src/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -680,7 +680,6 @@ function Table<RecordType extends DefaultRecordType>(
// Fixed holder share the props
const fixedHolderProps = {
noData: !mergedData.length,
maxContentScroll: horizonScroll && mergedScrollX === 'max-content',
...headerProps,
...columnContext,
direction,
Expand All @@ -697,6 +696,7 @@ function Table<RecordType extends DefaultRecordType>(
stickyTopOffset={offsetHeader}
className={`${prefixCls}-header`}
ref={scrollHeaderRef}
colGroup={bodyColGroup}
>
{renderFixedHeaderTable}
</FixedHolder>
Expand All @@ -712,6 +712,7 @@ function Table<RecordType extends DefaultRecordType>(
stickyBottomOffset={offsetSummary}
className={`${prefixCls}-summary`}
ref={scrollSummaryRef}
colGroup={bodyColGroup}
>
{renderFixedFooterTable}
</FixedHolder>
Expand Down
45 changes: 12 additions & 33 deletions tests/__snapshots__/FixedColumn.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2818,43 +2818,22 @@ LoadedCheerio {
>
<colgroup>
<col
style="width: 93px;"
/>
<col
style="width: 1000px;"
/>
<col
style="width: 1000px;"
/>
<col
style="width: 1000px;"
/>
<col
style="width: 1000px;"
/>
<col
style="width: 1000px;"
/>
<col
style="width: 1000px;"
/>
<col
style="width: 1000px;"
/>
<col
style="width: 1000px;"
/>
<col
style="width: 1000px;"
/>
<col
style="width: 1000px;"
style="width: 100px;"
/>
<col
style="width: 1000px;"
style="width: 100px;"
/>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col
style="width: 15px;"
style="width: 100px;"
/>
</colgroup>
<thead
Expand Down