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();
}
}