fix(react-grid): fix virtualTable with resizing (T1067026) (#3523)

DevExpress · Feb 24, 2022 · 52a151f · 52a151f
1 parent 41cad0e
commit 52a151f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
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
@@ -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((
+        <VirtualTableLayout
+          {...defaultProps}
+          bodyRows={defaultProps.bodyRows.slice(0, 4)}
+          columns={columns}
+          viewport={defaultProps.viewport}
+        />
+      ));
+      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
@@ -66,7 +66,11 @@ export class VirtualTableLayout extends React.PureComponent<PropsType, VirtualTa
     // Also it's the only place where we can respond to the column count change
     const columnCountChanged = prevProps.columns.length !== columns.length;
 
-    if (bodyRowsChanged || columnCountChanged) {
+    if (bodyRowsChanged || columnCountChanged || columns[0].width !== undefined &&
+        prevProps.columns.some((column, index) => {
+          return column.width !== columns[index].width;
+        })
+      ) {
       this.updateViewport();
     }
   }