diff --git a/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.test.tsx b/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.test.tsx index 48abb91528..d59df9b08d 100644 --- a/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.test.tsx +++ b/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.test.tsx @@ -323,6 +323,37 @@ describe('VirtualTableLayout', () => { expect(defaultProps.setViewport).not.toHaveBeenCalled(); }); + it('should update viewport if column width changed', () => { + const columns = [ + { key: 'a', column: { name: 'a' }, width: 10 }, + { key: 'b', column: { name: 'b' }, width: 10 }, + { key: 'c', column: { name: 'c' }, width: 10 }, + { key: 'd', column: { name: 'd' }, width: 10 }, + { key: 'e', column: { name: 'e' }, width: 10 }, + ]; + const tree = mount(( + + )); + const setViewportMock = defaultProps.setViewport.mock; + const initialCallCount = setViewportMock.calls.length; + + tree.setProps({ columns: [ + { key: 'a', column: { name: 'a' }, width: 20 }, + { key: 'b', column: { name: 'b' }, width: 20 }, + { key: 'c', column: { name: 'c' }, width: 20 }, + { key: 'd', column: { name: 'd' }, width: 20 }, + { key: 'e', column: { name: 'e' }, width: 20 }, + ] }); + + expect(setViewportMock.calls.length) + .toBeGreaterThan(initialCallCount); + }); + describe('scroll bounce', () => { const assertRerenderOnBounce = (shouldRerender, scrollArgs) => { const tree = mount(( diff --git a/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.tsx b/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.tsx index e9662a6817..3ee174e4b5 100644 --- a/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.tsx +++ b/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.tsx @@ -66,7 +66,11 @@ export class VirtualTableLayout extends React.PureComponent { + return column.width !== columns[index].width; + }) + ) { this.updateViewport(); } }