fix(react-grid): correct columns on remove banded column in runtime

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

@@ -12,6 +12,7 @@ import {
   isBandedOrHeaderRow,
   getColumnMeta,
   getBandComponent,
+  calculateBand,
 } from './helpers';
 import { tableHeaderColumnChainsWithBands } from './computeds';
 import { tableHeaderColumnChainsWithFixed } from '../table-fixed-columns/computeds';
@@ -127,7 +128,7 @@ describe('TableBandHeader Plugin helpers', () => {
         tableRow: {},
       };
 
-      expect(getBandComponent(params, {}, {}, {}, [], columnVisibleBoundaries, levelsVisibility))
+      expect(getBandComponent(params, {}, [], {}, [], columnVisibleBoundaries, levelsVisibility))
         .toEqual({ type: BAND_DUPLICATE_RENDER, payload: null });
     });
 
@@ -231,6 +232,29 @@ describe('TableBandHeader Plugin helpers', () => {
         });
     });
 
+    it('should return a null-typed band component for column without key', () => {
+      const params = {
+        tableColumn: {
+          type: TABLE_DATA_TYPE,
+          column: { name: 'd' },
+        },
+        tableRow: {
+          level: 1,
+        },
+      };
+      const chains = computeColumnChains(tableColumns, tableHeaderRows, columnBands);
+
+      expect(
+        getBandComponent(
+          params, tableHeaderRows, tableColumns, columnBands,
+          chains, columnVisibleBoundaries, levelsVisibility,
+      ))
+        .toEqual({
+          type: null,
+          payload: null,
+        });
+    });
+
     describe('with fixed columns', () => {
       it('should return correct data for cells in a fixed column', () => {
         const columns = [
@@ -591,4 +615,27 @@ describe('TableBandHeader Plugin helpers', () => {
       });
     });
   });
+
+  describe('#calculateBand', () => {
+    const headerChain = {
+      start: 1,
+      columns: [{}, {}, {}],
+    };
+
+    it('should work', () => {
+      expect(calculateBand([0, 5], headerChain))
+        .toEqual([1, 4]);
+      expect(calculateBand([2, 5], headerChain))
+        .toEqual([2, 4]);
+      expect(calculateBand([2, 2], headerChain))
+        .toEqual([2, 3]);
+      expect(calculateBand([0, 2], headerChain))
+        .toEqual([1, 3]);
+    });
+
+    it('should return chain range if visibleBound is not defined', () => {
+      expect(calculateBand(undefined, headerChain))
+        .toEqual([1, 4]);
+    });
+  });
 });

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

@@ -6,7 +6,7 @@ import { TABLE_HEADING_TYPE } from '../table-header-row/constants';
 import { TABLE_DATA_TYPE } from '../table/constants';
 import { findChainByColumnIndex } from '../table-header-row/helpers';
 import {
-  IsSpecificRowFn, GetColumnBandMetaFn, GetBandComponentFn,
+  IsSpecificRowFn, GetColumnBandMetaFn, GetBandComponentFn, CalculateBandFn,
 } from '../../types';
 import { TABLE_STUB_TYPE } from '../../utils/virtual-table';
 
@@ -40,7 +40,21 @@ export const getColumnMeta: GetColumnBandMetaFn = (
   return acc;
 }, result || { level, title, key: title });
 
-// TODO: refactor
+export const calculateBand: CalculateBandFn = (visibleBound, headerChain) => {
+  if (visibleBound) {
+    const bandStart = Math.max(visibleBound[0], headerChain.start);
+
+    const bandEnd = Math.min(
+      visibleBound[1] + 1,
+      headerChain.start + headerChain.columns.length,
+    );
+
+    return [bandStart, bandEnd];
+  }
+
+  return [headerChain.start, headerChain.start + headerChain.columns.length];
+};
+
 export const getBandComponent: GetBandComponentFn = (
   { tableColumn: currentTableColumn, tableRow, rowSpan },
   tableHeaderRows, tableColumns, columnBands, tableHeaderColumnChains,
@@ -79,8 +93,11 @@ export const getBandComponent: GetBandComponentFn = (
     beforeBorder = true;
   }
 
+  const isStubColumn = currentTableColumn.type === TABLE_STUB_TYPE;
+  const isColumnVisible = currentColumnIndex >= 0;
+
   if (currentColumnMeta.level === currentRowLevel) {
-    if (currentTableColumn.type === TABLE_STUB_TYPE) {
+    if (isStubColumn) {
       const cellRowSpan = visibleLevelsCount < levelsCount
         ? visibleLevelsCount || 1
         : maxLevel;
@@ -93,34 +110,34 @@ export const getBandComponent: GetBandComponentFn = (
       };
     }
 
-    return {
-      type: BAND_HEADER_CELL,
-      payload: {
-        tableRow: tableHeaderRows.find(row => row.type === TABLE_HEADING_TYPE),
-        rowSpan: maxLevel - currentRowLevel,
-        ...beforeBorder && { beforeBorder },
-      },
-    };
+    if (isColumnVisible) {
+      return {
+        type: BAND_HEADER_CELL,
+        payload: {
+          tableRow: tableHeaderRows.find(row => row.type === TABLE_HEADING_TYPE),
+          rowSpan: maxLevel - currentRowLevel,
+          ...beforeBorder && { beforeBorder },
+        },
+      };
+    }
   }
 
+  if (!isColumnVisible) return { type: null, payload: null };
+
   const currentColumnChain = findChainByColumnIndex(
     tableHeaderColumnChains[currentRowLevel],
     currentColumnIndex,
   );
-
   const columnVisibleBoundary = columnVisibleIntervals.find(([start, end]) => (
     start <= currentColumnIndex && currentColumnIndex <= end
-  ))!;
-  const bandStart = Math.max(columnVisibleBoundary[0], currentColumnChain.start);
+  ));
+
+  const [bandStart, bandEnd] = calculateBand(columnVisibleBoundary, currentColumnChain);
+
   if (bandStart < currentColumnIndex) {
     return { type: null, payload: null };
   }
 
-  const bandEnd = Math.min(
-    columnVisibleBoundary[1] + 1,
-    currentColumnChain.start + currentColumnChain.columns.length,
-  );
-
   return {
     type: BAND_GROUP_CELL,
     payload: {

packages/dx-grid-core/src/types/band-header.types.ts

@@ -1,5 +1,5 @@
 import { TableColumn, TableRow } from './table.types';
-import { HeaderColumnChainRows } from './header-row.types';
+import { HeaderColumnChainRows, HeaderColumnChain } from './header-row.types';
 import { VisibleBoundary } from './virtual-table.types';
 
 /** Describes properties of column bands that the TableBandHeader plugin renders. */
@@ -61,3 +61,8 @@ export type GetBandComponentFn = (
   columnVisibleIntervals: VisibleBoundary[],
   bandLevelsVisibility: boolean[],
 ) => { type: string | null; payload: BandComponentPayload | null };
+/** @internal */
+export type CalculateBandFn = (
+  pvisibleBound: VisibleBoundary | undefined ,
+  headerChain: HeaderColumnChain,
+) => number[];