diff --git a/src/FixedHolder/index.tsx b/src/FixedHolder/index.tsx index 419637eaa..cffb145b4 100644 --- a/src/FixedHolder/index.tsx +++ b/src/FixedHolder/index.tsx @@ -131,20 +131,22 @@ const FixedHolder = React.forwardRef>((pro className: `${prefixCls}-cell-scrollbar`, }), }; + const shouldAppendScrollBarColumn = combinationScrollBarSize && !noData; const columnsWithScrollbar = useMemo>( - () => (combinationScrollBarSize ? [...columns, ScrollBarColumn] : columns), - [combinationScrollBarSize, columns], + () => (shouldAppendScrollBarColumn ? [...columns, ScrollBarColumn] : columns), + [shouldAppendScrollBarColumn, columns], ); const flattenColumnsWithScrollbar = useMemo( - () => (combinationScrollBarSize ? [...flattenColumns, ScrollBarColumn] : flattenColumns), - [combinationScrollBarSize, flattenColumns], + () => (shouldAppendScrollBarColumn ? [...flattenColumns, ScrollBarColumn] : flattenColumns), + [shouldAppendScrollBarColumn, flattenColumns], ); // Calculate the sticky offsets const headerStickyOffsets = useMemo(() => { const { start, end } = stickyOffsets; + const scrollbarOffset = shouldAppendScrollBarColumn ? combinationScrollBarSize : 0; return { ...stickyOffsets, // left: @@ -152,10 +154,10 @@ const FixedHolder = React.forwardRef>((pro // right: // direction === 'rtl' ? right : [...right.map(width => width + combinationScrollBarSize), 0], start: start, - end: [...end.map(width => width + combinationScrollBarSize), 0], + end: [...end.map(width => width + scrollbarOffset), 0], isSticky, }; - }, [combinationScrollBarSize, stickyOffsets, isSticky]); + }, [shouldAppendScrollBarColumn, combinationScrollBarSize, stickyOffsets, isSticky]); const mergedColumnWidth = useColumnWidth(colWidths, columCount); diff --git a/tests/FixedColumn.spec.tsx b/tests/FixedColumn.spec.tsx index 3e7a5b493..091fd5579 100644 --- a/tests/FixedColumn.spec.tsx +++ b/tests/FixedColumn.spec.tsx @@ -119,6 +119,30 @@ describe('Table.FixedColumn', () => { expect(container.querySelector('colgroup')?.outerHTML).toMatchSnapshot(); }); + + it('does not render scrollbar header cell when data is empty', async () => { + const { container } = render( + , + ); + + await triggerResize(container.querySelector('.rc-table')); + + act(() => { + const coll = container.querySelector('.rc-table-resize-collection'); + if (coll) { + triggerResize(coll as HTMLElement); + } + }); + + await act(async () => { + vi.runAllTimers(); + await Promise.resolve(); + }); + + expect(container.querySelectorAll('thead .rc-table-cell-scrollbar')).toHaveLength(0); + expect(container.querySelector('.rc-table-placeholder')).toBeTruthy(); + vi.useRealTimers(); + }); }); it('has correct scroll classNames when table resize', async () => { diff --git a/tests/__snapshots__/FixedColumn.spec.tsx.snap b/tests/__snapshots__/FixedColumn.spec.tsx.snap index f56c89857..85d62a343 100644 --- a/tests/__snapshots__/FixedColumn.spec.tsx.snap +++ b/tests/__snapshots__/FixedColumn.spec.tsx.snap @@ -2723,14 +2723,14 @@ exports[`Table.FixedColumn > renders correctly > scrollXY - without data 1`] = ` -
title1 renders correctly > scrollXY - without data 1`] = ` title12