diff --git a/src/Table.tsx b/src/Table.tsx index 086ea9359..4c7d5574e 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -313,6 +313,7 @@ function Table(props: TableProps(); const scrollHeaderRef = React.useRef(); const scrollBodyRef = React.useRef(); const [pingedLeft, setPingedLeft] = React.useState(false); @@ -388,7 +389,7 @@ function Table(props: TableProps { triggerOnScroll(); - setComponentWidth(width); + setComponentWidth(fullTableRef.current ? fullTableRef.current.offsetWidth : width); }; // Sync scroll bar when init or `fixColumn` changed @@ -586,6 +587,7 @@ function Table(props: TableProps {title && {title(mergedData)}} diff --git a/tests/ExpandRow.spec.js b/tests/ExpandRow.spec.js index 3a6cfbf77..1e66bbe93 100644 --- a/tests/ExpandRow.spec.js +++ b/tests/ExpandRow.spec.js @@ -2,6 +2,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { act } from 'react-dom/test-utils'; import { resetWarned } from 'rc-util/lib/warning'; +import { spyElementPrototype } from 'rc-util/lib/test/domHook'; import Table from '../src'; describe('Table.Expand', () => { @@ -87,33 +88,47 @@ describe('Table.Expand', () => { expect(wrapper.render()).toMatchSnapshot(); }); - it('renders fixed column correctly', () => { - const columns = [ - { title: 'Name', dataIndex: 'name', key: 'name', fixed: true }, - { title: 'Age', dataIndex: 'age', key: 'age' }, - { title: 'Gender', dataIndex: 'gender', key: 'gender', fixed: 'right' }, - ]; - const data = [ - { key: 0, name: 'Lucy', age: 27, gender: 'F' }, - { key: 1, name: 'Jack', age: 28, gender: 'M' }, - ]; - const wrapper = mount( - createTable({ - columns, - data, - scroll: { x: 903 }, - expandable: { expandedRowRender, defaultExpandAllRows: true }, - }), - ); - act(() => { - wrapper - .find('ResizeObserver') - .first() - .props() - .onResize({ width: 1128 }); + describe('renders fixed column correctly', () => { + let domSpy; + + beforeAll(() => { + domSpy = spyElementPrototype(HTMLDivElement, 'offsetWidth', { + get: () => 1128, + }); + }); + + afterAll(() => { + domSpy.mockRestore(); + }); + + it('work', () => { + const columns = [ + { title: 'Name', dataIndex: 'name', key: 'name', fixed: true }, + { title: 'Age', dataIndex: 'age', key: 'age' }, + { title: 'Gender', dataIndex: 'gender', key: 'gender', fixed: 'right' }, + ]; + const data = [ + { key: 0, name: 'Lucy', age: 27, gender: 'F' }, + { key: 1, name: 'Jack', age: 28, gender: 'M' }, + ]; + const wrapper = mount( + createTable({ + columns, + data, + scroll: { x: 903 }, + expandable: { expandedRowRender, defaultExpandAllRows: true }, + }), + ); + act(() => { + wrapper + .find('ResizeObserver') + .first() + .props() + .onResize({ width: 1128 }); + }); + wrapper.update(); + expect(wrapper.render()).toMatchSnapshot(); }); - wrapper.update(); - expect(wrapper.render()).toMatchSnapshot(); }); it('renders expand icon to the specify column', () => { diff --git a/tests/__snapshots__/ExpandRow.spec.js.snap b/tests/__snapshots__/ExpandRow.spec.js.snap index 8c17c0b04..880dabf1b 100644 --- a/tests/__snapshots__/ExpandRow.spec.js.snap +++ b/tests/__snapshots__/ExpandRow.spec.js.snap @@ -101,7 +101,7 @@ exports[`Table.Expand childrenColumnName 1`] = ` `; -exports[`Table.Expand renders fixed column correctly 1`] = ` +exports[`Table.Expand renders fixed column correctly work 1`] = `