fix: no scrollbar size issue (#816)

* fix: no scrollbar size issue

* test: add test case of scrollbar size

* refactor

Co-authored-by: yangpj17 <[email protected]>

Author: yykoypj

src/Table.tsx

@@ -384,6 +384,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
   const fullTableRef = React.useRef<HTMLDivElement>();
   const scrollHeaderRef = React.useRef<HTMLDivElement>();
   const scrollBodyRef = React.useRef<HTMLDivElement>();
+  const scrollBodyContainerRef = React.useRef<HTMLDivElement>();
   const scrollSummaryRef = React.useRef<HTMLDivElement>();
   const [pingedLeft, setPingedLeft] = React.useState(false);
   const [pingedRight, setPingedRight] = React.useState(false);
@@ -534,7 +535,11 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
   const [supportSticky, setSupportSticky] = React.useState(true); // Only IE not support, we mark as support first
 
   React.useEffect(() => {
-    setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.current).width);
+    if (scrollBodyRef.current instanceof Element) {
+      setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.current).width);
+    } else {
+      setScrollbarSize(getTargetScrollBarSize(scrollBodyContainerRef.current).width);
+    }
     setSupportSticky(isStyleSupport('position', 'sticky'));
   }, []);
 
@@ -781,7 +786,9 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
         props={{ ...props, stickyOffsets, mergedExpandedKeys }}
       >
         {title && <Panel className={`${prefixCls}-title`}>{title(mergedData)}</Panel>}
-        <div className={`${prefixCls}-container`}>{groupTableNode}</div>
+        <div ref={scrollBodyContainerRef} className={`${prefixCls}-container`}>
+          {groupTableNode}
+        </div>
         {footer && <Panel className={`${prefixCls}-footer`}>{footer(mergedData)}</Panel>}
       </MemoTableContent>
     </div>

tests/Table.spec.js

@@ -1020,4 +1020,18 @@ describe('Table.Basic', () => {
       expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1);
     });
   });
+  it('should get scrollbar size', () => {
+    const tColumns = [{ title: 'Name', dataIndex: 'name', key: 'name', width: 100 }];
+    const wrapper = mount(
+      createTable({
+        columns: tColumns,
+        scroll: { y: 100 },
+        components: {
+          body: () => <React.Fragment />,
+        },
+      }),
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.find('col')).toHaveLength(tColumns.length + 1);
+  });
 });

tests/__mocks__/rc-util/lib/getScrollBarSize.ts

@@ -1,3 +1,8 @@
 export default () => 15;
 
-export const getTargetScrollBarSize = () => ({ width: 15, height: 15 });
+export const getTargetScrollBarSize = (target: HTMLElement) => {
+  if (!target || !(target instanceof Element)) {
+    return { width: 0, height: 0 };
+  }
+  return { width: 15, height: 15 };
+};

tests/__snapshots__/Table.spec.js.snap

@@ -735,6 +735,48 @@ exports[`Table.Basic renders rowSpan correctly 1`] = `
 </div>
 `;
 
+exports[`Table.Basic should get scrollbar size 1`] = `
+<div
+  class="rc-table rc-table-fixed-header"
+>
+  <div
+    class="rc-table-container"
+  >
+    <div
+      class="rc-table-header"
+      style="overflow: hidden;"
+    >
+      <table
+        style="table-layout: fixed;"
+      >
+        <colgroup>
+          <col
+            style="width: 85px;"
+          />
+          <col
+            style="width: 15px;"
+          />
+        </colgroup>
+        <thead
+          class="rc-table-thead"
+        >
+          <tr>
+            <th
+              class="rc-table-cell"
+            >
+              Name
+            </th>
+            <th
+              class="rc-table-cell rc-table-cell-scrollbar"
+            />
+          </tr>
+        </thead>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Table.Basic syntactic sugar 1`] = `
 <div
   class="rc-table"