fix(react-grid): fix column reordering (T1079946)

packages/dx-grid-core/src/plugins/virtual-table/helpers.test.ts

@@ -5,6 +5,7 @@ import {
   getScrollTop,
   getTopRowId,
   getScrollLeft,
+  isColumnsWidthDifferent,
 } from './helpers';
 import { TOP_POSITION, BOTTOM_POSITION, LEFT_POSITION, RIGHT_POSITION } from './constants';
 
@@ -274,3 +275,47 @@ describe('#getScrollLeft', () => {
     expect(getScrollLeft(3, 10, RIGHT_POSITION)).toBe(30);
   });
 });
+
+describe('#isColumnsWidthDifferent', () => {
+  it('should return false, columns reordering only', () => {
+    const prevColumns = [
+      { width: '20px', key: 'column1' },
+      { width: '10px', key: 'column2' },
+      { width: '5px', key: 'column3' },
+    ] as any;
+    const columns = [
+      { width: '10px', key: 'column2' },
+      { width: '20px', key: 'column1' },
+      { width: '5px', key: 'column3' },
+    ] as any;
+    expect(isColumnsWidthDifferent(prevColumns, columns)).toBeFalsy();
+  });
+
+  it('should return true, columns width changed', () => {
+    const prevColumns = [
+      { width: 20, key: 'column1' },
+      { width: 10, key: 'column2' },
+      { width: 5, key: 'column3' },
+    ] as any;
+    const columns = [
+      { width: 20, key: 'column1' },
+      { width: 20, key: 'column2' },
+      { width: 5, key: 'column3' },
+    ] as any;
+    expect(isColumnsWidthDifferent(prevColumns, columns)).toBeTruthy();
+  });
+
+  it('should return true, columns changed', () => {
+    const prevColumns = [
+      { width: 20, key: 'column1' },
+      { width: 10, key: 'column2' },
+      { width: 5, key: 'column3' },
+    ] as any;
+    const columns = [
+      { width: 20, key: 'column1' },
+      { width: 10, key: 'column2' },
+      { width: 5, key: 'column4' },
+    ] as any;
+    expect(isColumnsWidthDifferent(prevColumns, columns)).toBeTruthy();
+  });
+});

packages/dx-grid-core/src/plugins/virtual-table/helpers.ts

@@ -9,6 +9,7 @@ import {
   GetScrollPosition,
   GetTopRowId,
   GetScrollLeft,
+  IsColumnsWidthDifferent,
 } from '../../types';
 import { arraysEqual } from './utils';
 import { TOP_POSITION, BOTTOM_POSITION, LEFT_POSITION } from './constants';
@@ -141,3 +142,10 @@ export const getTopRowId: GetTopRowId = (viewport, tableBodyRows, isDataRemote)
 
   return undefined;
 };
+
+export const isColumnsWidthDifferent: IsColumnsWidthDifferent = (prevColumns, columns) => {
+  return prevColumns.some((column) => {
+    const currentColumn = columns.find(c => c.key === column.key);
+    return currentColumn ? currentColumn.width !== column.width : true;
+  });
+};

packages/dx-grid-core/src/types/virtual-table.types.ts

@@ -176,3 +176,5 @@ export type GetTopRowId = PureComputed<
 export type GetScrollLeft = PureComputed<
   [number, number, typeof LEFT_POSITION | typeof RIGHT_POSITION | undefined], number | undefined
 >;
+/** @internal */
+export type IsColumnsWidthDifferent = PureComputed<[TableColumn[], TableColumn[]], boolean>;

packages/dx-react-grid/src/components/table-layout/virtual-table-layout.test.tsx

@@ -15,6 +15,7 @@ jest.mock('@devexpress/dx-grid-core', () => {
   jest.spyOn(actual, 'getCollapsedGrids');
   jest.spyOn(actual, 'getColumnWidthGetter');
   jest.spyOn(actual, 'getScrollLeft');
+  jest.spyOn(actual, 'isColumnsWidthDifferent');
   return actual;
 });
 jest.mock('./column-group', () => ({
@@ -238,7 +239,6 @@ describe('VirtualTableLayout', () => {
           footerRows={defaultProps.bodyRows.slice(0, 2)}
         />
       ));
-
       expect(tree.find(defaultProps.containerComponent).props().style)
         .toMatchObject({ height: defaultProps.height });
 

packages/dx-react-grid/src/components/table-layout/virtual-table-layout.tsx

@@ -3,6 +3,7 @@ import { MemoizedFunction, memoize } from '@devexpress/dx-core';
 import {
   TableColumn, GetColumnWidthFn, getCollapsedGrids,
   getColumnWidthGetter, TABLE_STUB_TYPE, getViewport, GridViewport, getScrollLeft,
+  isColumnsWidthDifferent,
 } from '@devexpress/dx-grid-core';
 import { VirtualTableLayoutState, VirtualTableLayoutProps } from '../../types';
 import { VirtualTableLayoutBlock } from './virtual-table-layout-block';
@@ -67,9 +68,7 @@ export class VirtualTableLayout extends React.PureComponent<PropsType, VirtualTa
     const columnCountChanged = prevProps.columns.length !== columns.length;
 
     if (bodyRowsChanged || columnCountChanged || columns[0].width !== undefined &&
-        prevProps.columns.some((column, index) => {
-          return column.width !== columns[index].width;
-        })
+      isColumnsWidthDifferent(prevProps.columns, columns)
       ) {
       this.updateViewport();
     }