From 7e6699499b0e4ec97f2e31622a8654a6805c02a0 Mon Sep 17 00:00:00 2001
From: yangpj17 <yangpj17@chianunicom.com>
Date: Tue, 24 May 2022 21:34:24 +0800
Subject: [PATCH 1/3] fix: no scrollbar size issue

---
 src/Table.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Table.tsx b/src/Table.tsx
index 802a11a42..96c5ed3cc 100644
--- a/src/Table.tsx
+++ b/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 scrollBodyConainerRef = 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(scrollBodyConainerRef.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={scrollBodyConainerRef} className={`${prefixCls}-container`}>
+          {groupTableNode}
+        </div>
         {footer && <Panel className={`${prefixCls}-footer`}>{footer(mergedData)}</Panel>}
       </MemoTableContent>
     </div>

From 65c496d08d7fd541fc3a2924a207ffacd46dc9d5 Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Thu, 26 May 2022 13:30:18 +0800
Subject: [PATCH 2/3] test: add test case of scrollbar size

---
 tests/Table.spec.js                           | 18 ++++++++
 .../__mocks__/rc-util/lib/getScrollBarSize.ts |  7 +++-
 tests/__snapshots__/Table.spec.js.snap        | 42 +++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/tests/Table.spec.js b/tests/Table.spec.js
index 8c80595a5..57187c89e 100644
--- a/tests/Table.spec.js
+++ b/tests/Table.spec.js
@@ -1020,4 +1020,22 @@ describe('Table.Basic', () => {
       expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1);
     });
   });
+  it('should get scrollbar size', () => {
+    const tData = [
+      { key: 'key0', name: 'Lucy' },
+      { key: 'key1', name: 'Jack' },
+    ];
+    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);
+  });
 });
diff --git a/tests/__mocks__/rc-util/lib/getScrollBarSize.ts b/tests/__mocks__/rc-util/lib/getScrollBarSize.ts
index bb12934b0..e967052ef 100644
--- a/tests/__mocks__/rc-util/lib/getScrollBarSize.ts
+++ b/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 };
+};
diff --git a/tests/__snapshots__/Table.spec.js.snap b/tests/__snapshots__/Table.spec.js.snap
index be9a4b6d7..e985aa68c 100644
--- a/tests/__snapshots__/Table.spec.js.snap
+++ b/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"

From 9e898d418110e44a504fb9324ea5fe474e133c2d Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Thu, 26 May 2022 13:31:29 +0800
Subject: [PATCH 3/3] refactor

---
 src/Table.tsx       | 6 +++---
 tests/Table.spec.js | 4 ----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/Table.tsx b/src/Table.tsx
index 96c5ed3cc..0fff5530a 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -384,7 +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 scrollBodyConainerRef = 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);
@@ -538,7 +538,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     if (scrollBodyRef.current instanceof Element) {
       setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.current).width);
     } else {
-      setScrollbarSize(getTargetScrollBarSize(scrollBodyConainerRef.current).width);
+      setScrollbarSize(getTargetScrollBarSize(scrollBodyContainerRef.current).width);
     }
     setSupportSticky(isStyleSupport('position', 'sticky'));
   }, []);
@@ -786,7 +786,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
         props={{ ...props, stickyOffsets, mergedExpandedKeys }}
       >
         {title && <Panel className={`${prefixCls}-title`}>{title(mergedData)}</Panel>}
-        <div ref={scrollBodyConainerRef} className={`${prefixCls}-container`}>
+        <div ref={scrollBodyContainerRef} className={`${prefixCls}-container`}>
           {groupTableNode}
         </div>
         {footer && <Panel className={`${prefixCls}-footer`}>{footer(mergedData)}</Panel>}
diff --git a/tests/Table.spec.js b/tests/Table.spec.js
index 57187c89e..8b1df9ca2 100644
--- a/tests/Table.spec.js
+++ b/tests/Table.spec.js
@@ -1021,10 +1021,6 @@ describe('Table.Basic', () => {
     });
   });
   it('should get scrollbar size', () => {
-    const tData = [
-      { key: 'key0', name: 'Lucy' },
-      { key: 'key1', name: 'Jack' },
-    ];
     const tColumns = [{ title: 'Name', dataIndex: 'name', key: 'name', width: 100 }];
     const wrapper = mount(
       createTable({