diff --git a/src/Table.tsx b/src/Table.tsx index 802a11a42..0fff5530a 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -384,6 +384,7 @@ function Table(props: TableProps(); const scrollHeaderRef = React.useRef(); const scrollBodyRef = React.useRef(); + const scrollBodyContainerRef = React.useRef(); const scrollSummaryRef = React.useRef(); const [pingedLeft, setPingedLeft] = React.useState(false); const [pingedRight, setPingedRight] = React.useState(false); @@ -534,7 +535,11 @@ function Table(props: TableProps { - 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(props: TableProps {title && {title(mergedData)}} -
{groupTableNode}
+
+ {groupTableNode} +
{footer && {footer(mergedData)}} diff --git a/tests/Table.spec.js b/tests/Table.spec.js index 8c80595a5..8b1df9ca2 100644 --- a/tests/Table.spec.js +++ b/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: () => , + }, + }), + ); + 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`] = ` `; +exports[`Table.Basic should get scrollbar size 1`] = ` +
+
+
+ + + + + + + + + + +
+ Name + +
+
+
+
+`; + exports[`Table.Basic syntactic sugar 1`] = `