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

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

* fix: update test

Author: simonguo

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(

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;

test/TableSpec.js

@@ -330,10 +330,9 @@ describe('Table', () => {
       </Table>
     );
 
-    const SCROLLBAR_WIDTH = 10;
     const tableWidth = 200;
     const contextWidth = 400;
-    const width = Math.floor((tableWidth / (contextWidth - SCROLLBAR_WIDTH)) * tableWidth);
+    const width = Math.floor((tableWidth / contextWidth) * tableWidth);
 
     const scrollbarHandleWidth = Math.floor(
       getWidth(instance.querySelector('.rs-table-scrollbar-handle'))