diff --git a/src/utils/usePosition.ts b/src/utils/usePosition.ts index c1dcd05..ef734df 100644 --- a/src/utils/usePosition.ts +++ b/src/utils/usePosition.ts @@ -100,11 +100,15 @@ const usePosition = (props: PositionProps) => { updateWheelElementPosition(true); + // Whether to show the horizontal scroll bar + const hasHorizontalScrollbar = contentWidth.current > tableWidth.current; + const scrollbarWidth = hasHorizontalScrollbar ? 0 : SCROLLBAR_WIDTH; + const leftShadowClassName = prefix('cell-group-left-shadow'); const rightShadowClassName = prefix('cell-group-right-shadow'); const showLeftShadow = scrollX.current < 0; const showRightShadow = - tableWidth.current - contentWidth.current - SCROLLBAR_WIDTH !== scrollX.current; + tableWidth.current - contentWidth.current - scrollbarWidth !== scrollX.current; toggleClass(fixedLeftGroups as unknown as HTMLElement[], leftShadowClassName, showLeftShadow); toggleClass( diff --git a/src/utils/useTableDimension.ts b/src/utils/useTableDimension.ts index cb1e223..04b5cb3 100644 --- a/src/utils/useTableDimension.ts +++ b/src/utils/useTableDimension.ts @@ -181,13 +181,17 @@ const useTableDimension = (props: TableDimensionPr const row = table?.querySelector(`.${prefix('row')}:not(.virtualized)`); const nextContentWidth = row ? getWidth(row) : 0; - contentWidth.current = nextContentWidth - (autoHeight ? SCROLLBAR_WIDTH : 0); + // Whether to show the horizontal scroll bar + const hasHorizontalScrollbar = contentWidth.current > tableWidth.current; + const scrollbarWidth = hasHorizontalScrollbar ? 0 : SCROLLBAR_WIDTH; + + contentWidth.current = nextContentWidth - (autoHeight ? scrollbarWidth : 0); columnCount.current = row?.querySelectorAll(`.${prefix('cell')}`).length || 0; // The value of SCROLLBAR_WIDTH is subtracted so that the scroll bar does not block the content part. // There is no vertical scroll bar after autoHeight. const minScrollWidth = - -(nextContentWidth - tableWidth.current) - (autoHeight ? 0 : SCROLLBAR_WIDTH); + -(nextContentWidth - tableWidth.current) - (autoHeight ? 0 : scrollbarWidth); if (minScrollX.current !== minScrollWidth) { minScrollX.current = minScrollWidth;