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

DevExpress · Apr 11, 2022 · 7709224 · 7709224
1 parent c168da5
commit 7709224
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 4 deletions.
diff --git a/packages/dx-grid-core/src/plugins/virtual-table/helpers.test.ts b/packages/dx-grid-core/src/plugins/virtual-table/helpers.test.ts
@@ -5,6 +5,7 @@ import {
   getScrollTop,
   getTopRowId,
   getScrollLeft,
+  isColumnsWidthEqual,
 } from './helpers';
 import { TOP_POSITION, BOTTOM_POSITION, LEFT_POSITION, RIGHT_POSITION } from './constants';
 
@@ -274,3 +275,17 @@ describe('#getScrollLeft', () => {
     expect(getScrollLeft(3, 10, RIGHT_POSITION)).toBe(30);
   });
 });
+
+describe('#isColumnsWidthEqual', () => {
+  it('should return true, columns reordering only', () => {
+    const prevColumns = [{ width: 20 }, { width: 10 }, { width: 5 }] as any;
+    const columns = [{ width: 10 }, { width: 20 }, { width: 5 }] as any;
+    expect(isColumnsWidthEqual(prevColumns, columns)).toBeTruthy();
+  });
+
+  it('should return false, columns width changed', () => {
+    const prevColumns = [{ width: 20 }, { width: 10 }, { width: 5 }] as any;
+    const columns = [{ width: 20 }, { width: 20 }, { width: 5 }] as any;
+    expect(isColumnsWidthEqual(prevColumns, columns)).toBeFalsy();
+  });
+});
diff --git a/packages/dx-grid-core/src/plugins/virtual-table/helpers.ts b/packages/dx-grid-core/src/plugins/virtual-table/helpers.ts
@@ -9,6 +9,7 @@ import {
   GetScrollPosition,
   GetTopRowId,
   GetScrollLeft,
+  IsColumnsWidthEqual,
 } from '../../types';
 import { arraysEqual } from './utils';
 import { TOP_POSITION, BOTTOM_POSITION, LEFT_POSITION } from './constants';
@@ -141,3 +142,13 @@ export const getTopRowId: GetTopRowId = (viewport, tableBodyRows, isDataRemote)
 
   return undefined;
 };
+
+export const isColumnsWidthEqual: IsColumnsWidthEqual = (prevColumns, columns) => {
+  const sumColumnsWidths = prevColumns.reduce((acc, column, index) => {
+    return [
+      column.width ? acc[0] + Number(column.width) : acc[0],
+      columns[index].width ? acc[1] + Number(columns[index].width) : acc[1],
+    ];
+  }, [0, 0]);
+  return sumColumnsWidths[0] === sumColumnsWidths[1];
+};
diff --git a/packages/dx-grid-core/src/types/virtual-table.types.ts b/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 IsColumnsWidthEqual = PureComputed<[TableColumn[], TableColumn[]], boolean>;
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
@@ -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, 'isColumnsWidthEqual');
   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 });
 

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
@@ -3,6 +3,7 @@ import { MemoizedFunction, memoize } from '@devexpress/dx-core';
 import {
   TableColumn, GetColumnWidthFn, getCollapsedGrids,
   getColumnWidthGetter, TABLE_STUB_TYPE, getViewport, GridViewport, getScrollLeft,
+  isColumnsWidthEqual,
 } 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;
-        })
+      !isColumnsWidthEqual(prevProps.columns, columns)
       ) {
       this.updateViewport();
     }