From 3f35212e362c37d95c794bebee5004653a2bc645 Mon Sep 17 00:00:00 2001
From: Andrey Ignatovskiy <43685423+LazyLahtak@users.noreply.github.com>
Date: Sat, 20 Feb 2021 19:21:04 +0300
Subject: [PATCH] fix(react-grid): take into account flex columns for colspan
 calculating (#3254)

---
 .../plugins/table-group-row/helpers.test.ts   | 31 ++++++++++---------
 .../src/plugins/table-group-row/helpers.ts    | 10 ++++--
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/dx-grid-core/src/plugins/table-group-row/helpers.test.ts b/packages/dx-grid-core/src/plugins/table-group-row/helpers.test.ts
index 1b868b3817..73760ce3a6 100644
--- a/packages/dx-grid-core/src/plugins/table-group-row/helpers.test.ts
+++ b/packages/dx-grid-core/src/plugins/table-group-row/helpers.test.ts
@@ -11,7 +11,7 @@ import {
 } from './helpers';
 import { TABLE_STUB_TYPE } from '../../utils/virtual-table';
 import { sortAndSpliceColumns } from '../..';
-import { TABLE_DATA_TYPE } from '../table/constants';
+import { TABLE_DATA_TYPE, TABLE_FLEX_TYPE } from '../table/constants';
 
 describe('TableRowDetail Plugin helpers', () => {
   const key = { key: 'key' };
@@ -142,39 +142,40 @@ describe('TableRowDetail Plugin helpers', () => {
     const dataColumn = { type: TABLE_DATA_TYPE };
     const groupColumn = { type: TABLE_GROUP_TYPE };
     const otherColumn = { type: Symbol('undefined') };
+    const flexColumn = { type: TABLE_FLEX_TYPE };
 
     it('should work with the Table (firstVisibleColumnIndex is not defined)', () => {
-      expect(sortAndSpliceColumns([groupColumn, otherColumn, dataColumn]))
-        .toEqual([groupColumn, otherColumn, dataColumn]);
+      expect(sortAndSpliceColumns([groupColumn, otherColumn, dataColumn, flexColumn]))
+        .toEqual([groupColumn, otherColumn, dataColumn, flexColumn]);
 
-      expect(sortAndSpliceColumns([otherColumn, groupColumn, dataColumn]))
-        .toEqual([groupColumn, otherColumn, dataColumn]);
+      expect(sortAndSpliceColumns([otherColumn, groupColumn, dataColumn, flexColumn]))
+        .toEqual([groupColumn, otherColumn, dataColumn, flexColumn]);
 
-      expect(sortAndSpliceColumns([otherColumn, groupColumn, otherColumn, dataColumn]))
-        .toEqual([groupColumn, otherColumn, otherColumn, dataColumn]);
+      expect(sortAndSpliceColumns([otherColumn, groupColumn, otherColumn, dataColumn, flexColumn]))
+        .toEqual([groupColumn, otherColumn, otherColumn, dataColumn, flexColumn]);
     });
 
     describe('should work with the Virtual Table (firstVisibleColumnIndex is defined)', () => {
       it('should work with one group', () => {
         expect(sortAndSpliceColumns(
-          [otherColumn, otherColumn, groupColumn, otherColumn, dataColumn], 0,
+          [otherColumn, otherColumn, groupColumn, otherColumn, dataColumn, flexColumn], 0,
         ))
-          .toEqual([groupColumn, otherColumn, otherColumn, otherColumn, dataColumn]);
+          .toEqual([groupColumn, otherColumn, otherColumn, otherColumn, dataColumn, flexColumn]);
 
         expect(sortAndSpliceColumns(
-          [otherColumn, otherColumn, groupColumn, otherColumn, dataColumn], 1,
+          [otherColumn, otherColumn, groupColumn, otherColumn, dataColumn, flexColumn], 1,
         ))
-          .toEqual([groupColumn, otherColumn, otherColumn, dataColumn]);
+          .toEqual([groupColumn, otherColumn, otherColumn, dataColumn, flexColumn]);
 
         expect(sortAndSpliceColumns(
-          [otherColumn, otherColumn, groupColumn, otherColumn, dataColumn], 2,
+          [otherColumn, otherColumn, groupColumn, otherColumn, dataColumn, flexColumn], 2,
         ))
-          .toEqual([groupColumn, otherColumn, dataColumn]);
+          .toEqual([groupColumn, otherColumn, dataColumn, flexColumn]);
 
         expect(sortAndSpliceColumns(
-          [otherColumn, otherColumn, groupColumn, otherColumn, dataColumn], 3,
+          [otherColumn, otherColumn, groupColumn, otherColumn, dataColumn, flexColumn], 3,
         ))
-          .toEqual([groupColumn, otherColumn, dataColumn]);
+          .toEqual([groupColumn, otherColumn, dataColumn, flexColumn]);
       });
 
       it('should work with two groups', () => {
diff --git a/packages/dx-grid-core/src/plugins/table-group-row/helpers.ts b/packages/dx-grid-core/src/plugins/table-group-row/helpers.ts
index 45f0d1a8c6..b245ab3e89 100644
--- a/packages/dx-grid-core/src/plugins/table-group-row/helpers.ts
+++ b/packages/dx-grid-core/src/plugins/table-group-row/helpers.ts
@@ -2,7 +2,7 @@ import { PureComputed } from '@devexpress/dx-core';
 import { TABLE_GROUP_TYPE } from './constants';
 import { TableRow, TableColumn, IsSpecificCellFn, Grouping, GroupSummaryItem } from '../../types';
 import { TABLE_STUB_TYPE } from '../../utils/virtual-table';
-import { TABLE_DATA_TYPE } from '../table/constants';
+import { TABLE_DATA_TYPE, TABLE_FLEX_TYPE } from '../table/constants';
 
 type IsGroupIndentCellFn = PureComputed<[TableRow, TableColumn, Grouping[]], boolean>;
 
@@ -93,8 +93,12 @@ export const sortAndSpliceColumns: PureComputed<[TableColumn[], number]> = (
 ) => {
   const groupColumns = tableColumns.filter(col => col.type === TABLE_GROUP_TYPE);
   const dataColumns = tableColumns.filter(col => col.type === TABLE_DATA_TYPE);
+  const flexColumns = tableColumns.filter(col => col.type === TABLE_FLEX_TYPE);
   const otherColumns = tableColumns.filter(
-    col => col.type !== TABLE_DATA_TYPE && col.type !== TABLE_GROUP_TYPE,
+    col =>
+      col.type !== TABLE_DATA_TYPE &&
+      col.type !== TABLE_GROUP_TYPE &&
+      col.type !== TABLE_FLEX_TYPE,
   );
 
   if (firstVisibleColumnIndex) {
@@ -102,5 +106,5 @@ export const sortAndSpliceColumns: PureComputed<[TableColumn[], number]> = (
     otherColumns.splice(0, Math.min(firstVisibleColumnIndex, firstGroupIndex));
   }
 
-  return [...groupColumns, ...otherColumns, ...dataColumns];
+  return [...groupColumns, ...otherColumns, ...dataColumns, ...flexColumns];
 };