fix(autoHeight): fix the extra scroll bar width after autoHeight (#236)

rsuite · Aug 13, 2021 · 3ef47cb · 3ef47cb
1 parent 680035a
commit 3ef47cb
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/docs/md/AutoHeightTable.md b/docs/md/AutoHeightTable.md
@@ -22,12 +22,12 @@ const App = () => {
           console.log(data);
         }}
       >
-        <Column width={70} align="center" fixed>
+        <Column width={70} align="center">
           <HeaderCell>Id</HeaderCell>
           <Cell dataKey="id" />
         </Column>
 
-        <Column width={130} fixed>
+        <Column width={130}>
           <HeaderCell>First Name</HeaderCell>
           <Cell dataKey="firstName" />
         </Column>

diff --git a/src/utils/useTableDimension.ts b/src/utils/useTableDimension.ts
@@ -131,13 +131,15 @@ const useTableDimension = (props: TableDimensionProps) => {
 
     contentWidth.current = nextContentWidth;
 
-    // The value of SCROLLBAR_WIDTH is subtracted so that the scroll bar does not block the content part
-    minScrollX.current = -(nextContentWidth - tableWidth.current) - SCROLLBAR_WIDTH;
+    // 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.
+    minScrollX.current =
+      -(nextContentWidth - tableWidth.current) - (autoHeight ? 0 : SCROLLBAR_WIDTH);
 
     if (prevWidth !== contentWidth.current) {
       onTableContentWidthChange(prevWidth);
     }
-  }, [onTableContentWidthChange, prefix, tableRef]);
+  }, [autoHeight, onTableContentWidthChange, prefix, tableRef]);
 
   const calculateTableWidth = useCallback(() => {
     const prevWidth = tableWidth.current;