fix(Table): fix table scroll width not excluding scroll bar width

rsuite · Oct 10, 2023 · 503f75d · 503f75d
1 parent dc78cee
commit 503f75d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -181,13 +181,17 @@ const useTableDimension = <Row extends RowDataType, Key>(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;