fix(Table): fix horizontal scroll can not scroll to the end (#336)

rsuite · Apr 7, 2022 · ecd2494 · ecd2494
1 parent 991bc2f
commit ecd2494
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 3 deletions.
diff --git a/docs/md/AutoHeightTable.md b/docs/md/AutoHeightTable.md
@@ -22,7 +22,7 @@ const App = () => {
           console.log(data);
         }}
       >
-        <Column width={70} align="center">
+        <Column width={70} align="center" fixed>
           <HeaderCell>Id</HeaderCell>
           <Cell dataKey="id" />
         </Column>
@@ -67,7 +67,7 @@ const App = () => {
           <Cell dataKey="email" />
         </Column>
 
-        <Column width={200}>
+        <Column width={200} fixed="right">
           <HeaderCell>Email</HeaderCell>
           <Cell dataKey="email" />
         </Column>

diff --git a/src/utils/useTableDimension.ts b/src/utils/useTableDimension.ts
@@ -149,7 +149,7 @@ const useTableDimension = (props: TableDimensionProps) => {
     const row = table?.querySelector(`.${prefix('row')}:not(.virtualized)`);
     const nextContentWidth = row ? getWidth(row) : 0;
 
-    contentWidth.current = nextContentWidth;
+    contentWidth.current = nextContentWidth - (autoHeight ? SCROLLBAR_WIDTH : 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.

diff --git a/test/TableSpec.js b/test/TableSpec.js
@@ -7,6 +7,7 @@ import Cell from '../src/Cell';
 import { getDOMNode, getInstance, render } from './utils';
 import HeaderCell from '../src/HeaderCell';
 import getHeight from 'dom-lib/getHeight';
+import getWidth from 'dom-lib/getWidth';
 
 describe('Table', () => {
   it('Should output a table', () => {
@@ -263,6 +264,58 @@ describe('Table', () => {
     assert.equal(instance.style.height, `${height}px`);
   });
 
+  // https://github.com/rsuite/rsuite-table/issues/300
+  it('Should be a full horizontal scrolling range', () => {
+    const instance = getDOMNode(
+      <Table
+        autoHeight
+        style={{ width: 200 }}
+        data={[
+          {
+            id: 1,
+            name: 'a'
+          },
+          {
+            id: 2,
+            name: 'b'
+          }
+        ]}
+      >
+        <Column width={50} fixed>
+          <HeaderCell>id</HeaderCell>
+          <Cell dataKey="id" />
+        </Column>
+        <Column width={100}>
+          <HeaderCell>name</HeaderCell>
+          <Cell dataKey="name" />
+        </Column>
+        <Column width={100}>
+          <HeaderCell>name</HeaderCell>
+          <Cell dataKey="name" />
+        </Column>
+        <Column width={100}>
+          <HeaderCell>name</HeaderCell>
+          <Cell dataKey="name" />
+        </Column>
+        <Column width={50} fixed="right">
+          <HeaderCell>name</HeaderCell>
+          <Cell dataKey="name" />
+        </Column>
+      </Table>
+    );
+
+    const SCROLLBAR_WIDTH = 10;
+    const tableWidth = 200;
+    const contextWidth = 400;
+    const width = Math.floor((tableWidth / (contextWidth - SCROLLBAR_WIDTH)) * tableWidth);
+
+    const scrollbarHandleWidth = Math.floor(
+      getWidth(instance.querySelector('.rs-table-scrollbar-handle'))
+    );
+
+    assert.equal(width, scrollbarHandleWidth);
+  });
+
   it('Should be min height', () => {
     const instance = getDOMNode(
       <Table