From fb2c424071b7df2e2de83fb7f72cc9ab316e1ece Mon Sep 17 00:00:00 2001
From: Yury Orlov <mpcteam.kvet@gmail.com>
Date: Tue, 25 Jul 2017 15:54:40 +0300
Subject: [PATCH] revert: fix(react-grid): fix grouping if TableGroupRow is
 placed before any other table plugin

---
 packages/dx-grid-core/src/index.js            |   2 +-
 .../src/plugins/grouping-state/computeds.js   |   1 +
 .../plugins/grouping-state/computeds.test.js  |   5 +
 .../src/plugins/table-group-row/computeds.js  |   9 +-
 .../plugins/table-group-row/computeds.test.js |  22 +--
 .../src/plugins/table-row-detail/computeds.js |   2 +-
 .../table-row-detail/computeds.test.js        |   6 +-
 packages/dx-grid-core/src/utils/table.js      |  18 +--
 packages/dx-grid-core/src/utils/table.test.js |  30 ----
 .../src/templates/virtual-table.jsx           |  13 +-
 .../src/components/table-layout.test.jsx      |   2 +-
 .../components/table-layout/row-layout.jsx    |   8 +-
 .../src/plugins/table-group-row.jsx           |  12 +-
 .../src/plugins/table-group-row.test.jsx      | 150 ++++++------------
 .../dx-react-grid/src/plugins/table-view.jsx  |   2 +-
 .../src/plugins/table-view.test.jsx           |  16 +-
 16 files changed, 87 insertions(+), 211 deletions(-)

diff --git a/packages/dx-grid-core/src/index.js b/packages/dx-grid-core/src/index.js
index 5a7473576a..fc124dcb1b 100644
--- a/packages/dx-grid-core/src/index.js
+++ b/packages/dx-grid-core/src/index.js
@@ -37,7 +37,7 @@ export * from './plugins/table-selection/computeds';
 export {
   tableRowKeyGetter,
   tableColumnKeyGetter,
-  getTableRowColumnsWithColSpan,
+  getTableCellInfo,
   findTableCellTarget,
   getTableColumnGeometries,
   getTableTargetColumnIndex,
diff --git a/packages/dx-grid-core/src/plugins/grouping-state/computeds.js b/packages/dx-grid-core/src/plugins/grouping-state/computeds.js
index 5ed9cab998..1da2381c6b 100644
--- a/packages/dx-grid-core/src/plugins/grouping-state/computeds.js
+++ b/packages/dx-grid-core/src/plugins/grouping-state/computeds.js
@@ -18,6 +18,7 @@ const groupRows = (originalRows, groupedColumns, parentGroup) => {
       group = {
         _headerKey: `groupRow_${groupColumn.name}`,
         key: (parentGroup ? `${parentGroup.key}${SEPARATOR}` : '') + groupKey,
+        colspan: (parentGroup ? parentGroup.colspan + 1 : 0),
         value: groupKey,
         type: 'groupRow',
         column: groupColumn,
diff --git a/packages/dx-grid-core/src/plugins/grouping-state/computeds.test.js b/packages/dx-grid-core/src/plugins/grouping-state/computeds.test.js
index 25284ade1c..62d797e6cc 100644
--- a/packages/dx-grid-core/src/plugins/grouping-state/computeds.test.js
+++ b/packages/dx-grid-core/src/plugins/grouping-state/computeds.test.js
@@ -28,6 +28,7 @@ describe('GroupingPlugin computeds', () => {
         value: '1',
         type: 'groupRow',
         column: { name: 'a' },
+        colspan: 0,
       });
       expect(grouped[0].rows).toHaveLength(2);
       expect(grouped[0].rows[0]).toMatchObject(rows[0]);
@@ -38,6 +39,7 @@ describe('GroupingPlugin computeds', () => {
         value: '2',
         type: 'groupRow',
         column: { name: 'a' },
+        colspan: 0,
       });
       expect(grouped[1].rows).toHaveLength(2);
       expect(grouped[1].rows[0]).toMatchObject(rows[2]);
@@ -54,6 +56,7 @@ describe('GroupingPlugin computeds', () => {
         value: '1',
         type: 'groupRow',
         column: { name: 'a' },
+        colspan: 0,
       });
       expect(grouped[0].rows).toHaveLength(2);
       expect(grouped[0].rows[0]).toMatchObject({
@@ -61,12 +64,14 @@ describe('GroupingPlugin computeds', () => {
         value: '1',
         type: 'groupRow',
         column: { name: 'b' },
+        colspan: 1,
       });
       expect(grouped[0].rows[1]).toMatchObject({
         key: '1|2',
         value: '2',
         type: 'groupRow',
         column: { name: 'b' },
+        colspan: 1,
       });
       expect(grouped[0].rows[0].rows).toHaveLength(1);
       expect(grouped[0].rows[1].rows).toHaveLength(1);
diff --git a/packages/dx-grid-core/src/plugins/table-group-row/computeds.js b/packages/dx-grid-core/src/plugins/table-group-row/computeds.js
index 1934abb539..21d3bd96c4 100644
--- a/packages/dx-grid-core/src/plugins/table-group-row/computeds.js
+++ b/packages/dx-grid-core/src/plugins/table-group-row/computeds.js
@@ -13,13 +13,6 @@ const tableColumnsWithDraftGrouping = (columns, grouping) => columns.reduce((acc
 
 export const tableColumnsWithGrouping = (columns, grouping,
   draftGrouping, groupIndentColumnWidth) => [
-    ...grouping.map(group =>
-      ({ type: 'groupColumn', id: group.columnName, group, width: groupIndentColumnWidth })),
+    ...grouping.map(group => ({ type: 'groupColumn', group, width: groupIndentColumnWidth })),
     ...tableColumnsWithDraftGrouping(columns, draftGrouping),
   ];
-
-export const tableRowsWithGrouping = rows =>
-  rows.map((row) => {
-    if (row.type !== 'groupRow') return row;
-    return { ...row, colSpanStart: `groupColumn_${row.column.name}` };
-  });
diff --git a/packages/dx-grid-core/src/plugins/table-group-row/computeds.test.js b/packages/dx-grid-core/src/plugins/table-group-row/computeds.test.js
index 6635d66749..508aaccc8c 100644
--- a/packages/dx-grid-core/src/plugins/table-group-row/computeds.test.js
+++ b/packages/dx-grid-core/src/plugins/table-group-row/computeds.test.js
@@ -1,7 +1,4 @@
-import {
-  tableColumnsWithGrouping,
-  tableRowsWithGrouping,
-} from './computeds';
+import { tableColumnsWithGrouping } from './computeds';
 
 describe('TableGroupRow Plugin computeds', () => {
   describe('#tableColumnsWithGrouping', () => {
@@ -22,13 +19,11 @@ describe('TableGroupRow Plugin computeds', () => {
       expect(columns).toHaveLength(6);
       expect(columns[0]).toMatchObject({
         type: 'groupColumn',
-        id: 'a',
         group: { columnName: 'a' },
         width: 123,
       });
       expect(columns[1]).toMatchObject({
         type: 'groupColumn',
-        id: 'c',
         group: { columnName: 'c' },
         width: 123,
       });
@@ -82,19 +77,4 @@ describe('TableGroupRow Plugin computeds', () => {
       expect(columns[1]).toBe(allColumns[3]);
     });
   });
-  describe('#tableRowsWithGrouping', () => {
-    it('should add correct colSpanStart to group rows', () => {
-      const rows = [
-        { type: 'groupRow', column: { name: 'a' } },
-        {},
-        {},
-      ];
-
-      expect(tableRowsWithGrouping(rows))
-        .toEqual([
-          { type: 'groupRow', column: { name: 'a' }, colSpanStart: 'groupColumn_a' },
-          ...rows.slice(1),
-        ]);
-    });
-  });
 });
diff --git a/packages/dx-grid-core/src/plugins/table-row-detail/computeds.js b/packages/dx-grid-core/src/plugins/table-row-detail/computeds.js
index d478c99dbb..68bebf75ca 100644
--- a/packages/dx-grid-core/src/plugins/table-row-detail/computeds.js
+++ b/packages/dx-grid-core/src/plugins/table-row-detail/computeds.js
@@ -9,7 +9,7 @@ export const expandedDetailRows = (sourceRows, expandedRows, getRowId, rowHeight
         const row = rows[rowIndex];
         rows = [
           ...rows.slice(0, insertIndex),
-          { type: 'detailRow', id: getRowId(row), for: row, colSpanStart: 0, height: rowHeight },
+          { type: 'detailRow', id: getRowId(row), for: row, colspan: 0, height: rowHeight },
           ...rows.slice(insertIndex),
         ];
       }
diff --git a/packages/dx-grid-core/src/plugins/table-row-detail/computeds.test.js b/packages/dx-grid-core/src/plugins/table-row-detail/computeds.test.js
index 032c6a6684..1a08397755 100644
--- a/packages/dx-grid-core/src/plugins/table-row-detail/computeds.test.js
+++ b/packages/dx-grid-core/src/plugins/table-row-detail/computeds.test.js
@@ -17,7 +17,7 @@ describe('DetailRow computeds', () => {
           type: 'detailRow',
           id: 2,
           for: { id: 2 },
-          colSpanStart: 0,
+          colspan: 0,
           height: 'auto',
         },
       ]);
@@ -34,7 +34,7 @@ describe('DetailRow computeds', () => {
           type: 'detailRow',
           id: 1,
           for: { id: 1 },
-          colSpanStart: 0,
+          colspan: 0,
           height: 'auto',
         },
         { id: 2 },
@@ -42,7 +42,7 @@ describe('DetailRow computeds', () => {
           type: 'detailRow',
           id: 2,
           for: { id: 2 },
-          colSpanStart: 0,
+          colspan: 0,
           height: 'auto',
         },
       ]);
diff --git a/packages/dx-grid-core/src/utils/table.js b/packages/dx-grid-core/src/utils/table.js
index d72d063bbb..61a6b4b998 100644
--- a/packages/dx-grid-core/src/utils/table.js
+++ b/packages/dx-grid-core/src/utils/table.js
@@ -16,20 +16,10 @@ const getColumnId = column => column.name;
 export const tableColumnKeyGetter = (column, columnIndex) =>
   getTableKeyGetter(getColumnId, column, columnIndex);
 
-export const getTableRowColumnsWithColSpan = (columns, colSpanStart) => {
-  if (colSpanStart === undefined) return columns.map(column => ({ original: column }));
-
-  let span = false;
-  return columns
-    .reduce((acc, column, columnIndex) => {
-      if (span) return acc;
-      if (columnIndex === colSpanStart ||
-        tableColumnKeyGetter(column, columnIndex) === colSpanStart) {
-        span = true;
-        return [...acc, { original: column, colspan: columns.length - columnIndex }];
-      }
-      return [...acc, { original: column }];
-    }, []);
+export const getTableCellInfo = ({ row, columnIndex, columns }) => {
+  if (row.colspan !== undefined && columnIndex > row.colspan) return { skip: true };
+  if (row.colspan === columnIndex) return { colspan: columns.length - row.colspan };
+  return {};
 };
 
 export const findTableCellTarget = (e) => {
diff --git a/packages/dx-grid-core/src/utils/table.test.js b/packages/dx-grid-core/src/utils/table.test.js
index 95b4969254..f0c5836c97 100644
--- a/packages/dx-grid-core/src/utils/table.test.js
+++ b/packages/dx-grid-core/src/utils/table.test.js
@@ -3,7 +3,6 @@ import {
   tableRowKeyGetter,
   getTableColumnGeometries,
   getTableTargetColumnIndex,
-  getTableRowColumnsWithColSpan,
 } from './table';
 
 describe('table utils', () => {
@@ -36,35 +35,6 @@ describe('table utils', () => {
     });
   });
 
-  describe('#getTableRowColumnsWithColSpan', () => {
-    it('should return correct columns without colspan', () => {
-      const columns = [{ type: 'a', id: 1 }, { type: 'b', id: 2 }];
-
-      expect(getTableRowColumnsWithColSpan(columns, {}))
-        .toEqual(columns.map(column => ({ original: column })));
-    });
-
-    it('should return correct columns with numeric colspan', () => {
-      const columns = [{ type: 'a', id: 1 }, { type: 'b', id: 2 }, { type: 'c', id: 3 }];
-
-      expect(getTableRowColumnsWithColSpan(columns, 0))
-        .toEqual([{ original: columns[0], colspan: 3 }]);
-
-      expect(getTableRowColumnsWithColSpan(columns, 1))
-        .toEqual([{ original: columns[0] }, { original: columns[1], colspan: 2 }]);
-    });
-
-    it('should return correct columns with string colspan', () => {
-      const columns = [{ type: 'a', id: 1 }, { type: 'b', id: 2 }, { type: 'c', id: 3 }];
-
-      expect(getTableRowColumnsWithColSpan(columns, 'a_1'))
-        .toEqual([{ original: columns[0], colspan: 3 }]);
-
-      expect(getTableRowColumnsWithColSpan(columns, 'b_2'))
-        .toEqual([{ original: columns[0] }, { original: columns[1], colspan: 2 }]);
-    });
-  });
-
   describe('#getTableColumnGeometries', () => {
     it('should correctly return geometries', () => {
       const columns = [{ width: 100 }, {}, {}];
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/virtual-table.jsx b/packages/dx-react-grid-bootstrap3/src/templates/virtual-table.jsx
index 5c30e14694..4886d261a6 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/virtual-table.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/virtual-table.jsx
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getTableRowColumnsWithColSpan } from '@devexpress/dx-grid-core';
 import { WindowedScroller } from './virtual-table/windowed-scroller';
 import { VirtualBox } from './virtual-table/virtual-box';
 
@@ -50,7 +49,8 @@ export class VirtualTable extends React.Component {
     const scrollWidth = columnWidths.reduce((accum, width) => accum + width, 0);
 
     const tableRow = (row, position) => {
-      const columnsWithColSpan = getTableRowColumnsWithColSpan(columns, row.colSpanStart);
+      const colspan = row.colspan;
+      const columnLength = colspan !== undefined ? colspan + 1 : columns.length;
       return (
         <VirtualBox
           rootTag="tr"
@@ -58,12 +58,11 @@ export class VirtualTable extends React.Component {
           position={position}
           crossSize={this.rowHeight(row)}
           direction="horizontal"
-          itemCount={columnsWithColSpan.length}
+          itemCount={columnLength}
           itemInfo={(columnIndex) => {
-            const columnWithColSpan = columnsWithColSpan[columnIndex];
-            const size = !columnWithColSpan.colspan
+            const size = columnIndex !== colspan
               ? columnWidths[columnIndex]
-              : columns.slice(columnIndex).reduce(
+              : columns.slice(colspan).reduce(
                 (accum, column) => accum + columnWidths[columns.indexOf(column)],
                 0,
               );
@@ -74,7 +73,7 @@ export class VirtualTable extends React.Component {
             };
           }}
           itemTemplate={(columnIndex, _, style) =>
-            cellTemplate({ row, column: columnsWithColSpan[columnIndex].original, style })}
+            cellTemplate({ row, column: columns[columnIndex], style })}
         />
       );
     };
diff --git a/packages/dx-react-grid/src/components/table-layout.test.jsx b/packages/dx-react-grid/src/components/table-layout.test.jsx
index c2ad09e6f9..3b0dd9b2e2 100644
--- a/packages/dx-react-grid/src/components/table-layout.test.jsx
+++ b/packages/dx-react-grid/src/components/table-layout.test.jsx
@@ -116,7 +116,7 @@ describe('TableLayout', () => {
   });
 
   it('should span columns if specified', () => {
-    const rows = [{ id: 1, colSpanStart: 0 }, { id: 2, colSpanStart: 1 }];
+    const rows = [{ id: 1, colspan: 0 }, { id: 2, colspan: 1 }];
     const columns = [{ name: 'a' }, { name: 'b' }, { name: 'c' }, { name: 'd' }];
     const tree = mount(
       <TableLayout
diff --git a/packages/dx-react-grid/src/components/table-layout/row-layout.jsx b/packages/dx-react-grid/src/components/table-layout/row-layout.jsx
index 4288087053..7dc7a800ee 100644
--- a/packages/dx-react-grid/src/components/table-layout/row-layout.jsx
+++ b/packages/dx-react-grid/src/components/table-layout/row-layout.jsx
@@ -7,7 +7,7 @@ import {
 
 import {
   tableColumnKeyGetter,
-  getTableRowColumnsWithColSpan,
+  getTableCellInfo,
 } from '@devexpress/dx-grid-core';
 
 const getColumnStyle = ({ column, animationState = {} }) => ({
@@ -36,9 +36,11 @@ export class RowLayout extends React.PureComponent {
         style={getRowStyle({ row })}
       >
         {
-          getTableRowColumnsWithColSpan(columns, row.colSpanStart)
-            .map(({ original: column, colspan }, columnIndex) => {
+          columns
+            .filter((column, columnIndex) => !getTableCellInfo({ row, columns, columnIndex }).skip)
+            .map((column, columnIndex) => {
               const key = tableColumnKeyGetter(column, columnIndex);
+              const colspan = getTableCellInfo({ row, columns, columnIndex }).colspan;
               return (
                 <TemplateRenderer
                   key={key}
diff --git a/packages/dx-react-grid/src/plugins/table-group-row.jsx b/packages/dx-react-grid/src/plugins/table-group-row.jsx
index 317ce8beef..3ee1b353cc 100644
--- a/packages/dx-react-grid/src/plugins/table-group-row.jsx
+++ b/packages/dx-react-grid/src/plugins/table-group-row.jsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Getter, Template, PluginContainer } from '@devexpress/dx-react-core';
-import {
-  tableColumnsWithGrouping,
-  tableRowsWithGrouping,
-} from '@devexpress/dx-grid-core';
+import { tableColumnsWithGrouping } from '@devexpress/dx-grid-core';
 
 export class TableGroupRow extends React.PureComponent {
   render() {
@@ -26,13 +23,6 @@ export class TableGroupRow extends React.PureComponent {
             groupIndentColumnWidth,
           ]}
         />
-        <Getter
-          name="tableBodyRows"
-          pureComputed={tableRowsWithGrouping}
-          connectArgs={getter => [
-            getter('tableBodyRows'),
-          ]}
-        />
 
         <Template
           name="tableViewCell"
diff --git a/packages/dx-react-grid/src/plugins/table-group-row.test.jsx b/packages/dx-react-grid/src/plugins/table-group-row.test.jsx
index a357a6ac73..d1a4f3a3b0 100644
--- a/packages/dx-react-grid/src/plugins/table-group-row.test.jsx
+++ b/packages/dx-react-grid/src/plugins/table-group-row.test.jsx
@@ -3,20 +3,11 @@ import { mount } from 'enzyme';
 
 import { setupConsole } from '@devexpress/dx-testing';
 import {
-  Getter, Template, TemplatePlaceholder, PluginHost,
+  Template, TemplatePlaceholder, PluginHost,
 } from '@devexpress/dx-react-core';
-import {
-  tableColumnsWithGrouping,
-  tableRowsWithGrouping,
-} from '@devexpress/dx-grid-core';
 
 import { TableGroupRow } from './table-group-row';
 
-jest.mock('@devexpress/dx-grid-core', () => ({
-  tableColumnsWithGrouping: jest.fn(),
-  tableRowsWithGrouping: jest.fn(),
-}));
-
 describe('TableGroupRow', () => {
   let resetConsole;
   beforeAll(() => {
@@ -24,110 +15,61 @@ describe('TableGroupRow', () => {
   });
   afterAll(() => {
     resetConsole();
-    jest.resetAllMocks();
   });
 
-  describe('table layout getters extending', () => {
-    it('should extend tableBodyRows', () => {
-      mount(
-        <PluginHost>
-          <Getter name="tableBodyRows" value="tableBodyRows" />
-          <TableGroupRow
-            groupCellTemplate={() => null}
-            groupIndentColumnWidth={40}
+  const testIndentCell = ({
+    cellParams,
+    shouldRender,
+    template = () => <td className="group-indent" />,
+  }) => {
+    const tree = mount(
+      <PluginHost>
+        <Template name="root">
+          <TemplatePlaceholder
+            name="tableViewCell"
+            params={cellParams}
           />
-          <Template
-            name="root"
-            connectGetters={getter => getter('tableBodyRows')}
-          >
-            {() => <div />}
-          </Template>
-        </PluginHost>,
-      );
-
-      expect(tableRowsWithGrouping)
-        .toBeCalledWith('tableBodyRows');
-    });
+        </Template>
+        <TableGroupRow
+          groupCellTemplate={() => null}
+          groupIndentColumnWidth={40}
+          groupIndentCellTemplate={template}
+        />
+      </PluginHost>,
+    );
 
-    it('should extend tableColumns', () => {
-      mount(
-        <PluginHost>
-          <Getter name="tableColumns" value="tableColumns" />
-          <Getter name="grouping" value="grouping" />
-          <Getter name="draftGrouping" value="draftGrouping" />
-          <TableGroupRow
-            groupCellTemplate={() => null}
-            groupIndentColumnWidth={40}
-          />
-          <Template
-            name="root"
-            connectGetters={getter => getter('tableColumns')}
-          >
-            {() => <div />}
-          </Template>
-        </PluginHost>,
-      );
+    expect(tree.find('td.group-indent').exists())
+      .toBe(shouldRender);
+  };
 
-      expect(tableColumnsWithGrouping)
-        .toBeCalledWith('tableColumns', 'grouping', 'draftGrouping', 40);
+  it('should render indent cell in a group column intersection with a foreign group row', () => {
+    testIndentCell({
+      cellParams: {
+        column: { type: 'groupColumn', group: { columnName: 'a' } },
+        row: { type: 'groupRow', column: { name: 'b' } },
+      },
+      shouldRender: true,
     });
   });
 
-  describe('groupIndentCellTemplate', () => {
-    const testIndentCell = ({
-      cellParams,
-      shouldRender,
-      template = () => <td className="group-indent" />,
-    }) => {
-      const tree = mount(
-        <PluginHost>
-          <Template name="root">
-            <TemplatePlaceholder
-              name="tableViewCell"
-              params={cellParams}
-            />
-          </Template>
-          <TableGroupRow
-            groupCellTemplate={() => null}
-            groupIndentColumnWidth={40}
-            groupIndentCellTemplate={template}
-          />
-        </PluginHost>,
-      );
-
-      expect(tree.find('td.group-indent').exists())
-        .toBe(shouldRender);
-    };
-
-    it('should render indent cell in a group column intersection with a foreign group row', () => {
-      testIndentCell({
-        cellParams: {
-          column: { type: 'groupColumn', group: { columnName: 'a' } },
-          row: { type: 'groupRow', column: { name: 'b' } },
-        },
-        shouldRender: true,
-      });
-    });
-
-    it('should render indent cell in a group column intersection with a data row', () => {
-      testIndentCell({
-        cellParams: {
-          column: { type: 'groupColumn', group: { columnName: 'a' } },
-          row: { id: 1 },
-        },
-        shouldRender: true,
-      });
+  it('should render indent cell in a group column intersection with a data row', () => {
+    testIndentCell({
+      cellParams: {
+        column: { type: 'groupColumn', group: { columnName: 'a' } },
+        row: { id: 1 },
+      },
+      shouldRender: true,
     });
+  });
 
-    it('should not render indent cell if it is undefined', () => {
-      testIndentCell({
-        cellParams: {
-          column: { type: 'groupColumn', group: { columnName: 'a' } },
-          row: { id: 1 },
-        },
-        template: null,
-        shouldRender: false,
-      });
+  it('should not render indent cell if it is undefined', () => {
+    testIndentCell({
+      cellParams: {
+        column: { type: 'groupColumn', group: { columnName: 'a' } },
+        row: { id: 1 },
+      },
+      template: null,
+      shouldRender: false,
     });
   });
 });
diff --git a/packages/dx-react-grid/src/plugins/table-view.jsx b/packages/dx-react-grid/src/plugins/table-view.jsx
index ff40cb81a0..fe203e9eb7 100644
--- a/packages/dx-react-grid/src/plugins/table-view.jsx
+++ b/packages/dx-react-grid/src/plugins/table-view.jsx
@@ -21,7 +21,7 @@ export class TableView extends React.PureComponent {
         <Getter name="tableHeaderRows" value={[]} />
         <Getter
           name="tableBodyRows"
-          pureComputed={rows => (rows.length ? rows : [{ type: 'nodata', colSpanStart: 0 }])}
+          pureComputed={rows => (rows.length ? rows : [{ type: 'nodata', colspan: 0 }])}
           connectArgs={getter => [
             getter('rows'),
           ]}
diff --git a/packages/dx-react-grid/src/plugins/table-view.test.jsx b/packages/dx-react-grid/src/plugins/table-view.test.jsx
index 40d623f8e3..13015c84ad 100644
--- a/packages/dx-react-grid/src/plugins/table-view.test.jsx
+++ b/packages/dx-react-grid/src/plugins/table-view.test.jsx
@@ -6,7 +6,7 @@ import {
   Getter, Template, TemplatePlaceholder, PluginHost,
 } from '@devexpress/dx-react-core';
 import {
-  getTableRowColumnsWithColSpan,
+  getTableCellInfo,
 } from '@devexpress/dx-grid-core';
 
 import { TableView } from './table-view';
@@ -186,11 +186,15 @@ describe('TableView', () => {
               <tbody>
                 {bodyRows.map(row => (
                   <tr key={row.id || row.type}>
-                    {getTableRowColumnsWithColSpan(columns, row.colSpanStart)
-                      .map(({ original: column, colspan }) => React.cloneElement(
-                        cellTemplate({ row, column, colspan }),
-                        { key: column.name },
-                      ))}
+                    {columns.map((column, columnIndex) => {
+                      const info = getTableCellInfo({ row, column, columnIndex, columns });
+                      if (info.skip) return null;
+
+                      return React.cloneElement(
+                        cellTemplate({ row, column, colspan: info.colspan }),
+                        { key: column.name || column.type },
+                      );
+                    })}
                   </tr>
                 ))}
               </tbody>