Grid Cell merging

CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 20.1.0
+
+### New Features
+
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Introduced a new cell merging feature that allows you to configure and merge cells in a column based on same data or other custom condition, into a single cell.
+
+     It can be enabled on the individual columns:
+
+    ```html
+            <igx-column field="field" [merge]="true"></igx-column>
+    ```
+    The merging can be configured on the grid level to apply either:
+    - `onSort` - only when the column is sorted.
+    - `always` - always, regardless of data operations.
+
+    ```html
+        <igx-grid [cellMergeMode]="'always'">
+        </igx-grid>
+    ```
+
+    The default `cellMergeMode` is `onSort`.
+
+    The functionality can be modified by setting a custom `mergeStrategy` on the grid, in case some other merge conditions or logic is needed for a custom scenario.
+
+    It's possible also to set a `mergeComparer` on the individual columns, in case some custom handling is needed for a particular data field.
+
+
 ## 20.0.6
 ### General
 - `IgxSimpleCombo`

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -95,6 +95,7 @@ export var registerConfig = [
     ],
     numericProps: ["rowEnd", "colEnd", "rowStart", "colStart"],
     boolProps: [
+      "merge",
       "sortable",
       "selectable",
       "groupable",
@@ -158,6 +159,7 @@ export var registerConfig = [
       "expanded",
       "searchable",
       "hidden",
+      "merge",
       "sortable",
       "groupable",
       "editable",
@@ -213,6 +215,7 @@ export var registerConfig = [
       "collapsible",
       "expanded",
       "searchable",
+      "merge",
       "sortable",
       "groupable",
       "editable",

projects/igniteui-angular-elements/src/public_api.ts

@@ -12,7 +12,7 @@ import { IgxPivotDateDimension } from 'projects/igniteui-angular/src/lib/grids/p
 import { PivotDimensionType } from 'projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface';
 import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryOperand, IgxTimeSummaryOperand } from 'projects/igniteui-angular/src/lib/grids/summaries/grid-summary';
 import { HorizontalAlignment, VerticalAlignment } from 'projects/igniteui-angular/src/lib/services/overlay/utilities';
-
+import { ByLevelTreeGridMergeStrategy } from 'projects/igniteui-angular/src/lib/data-operations/merge-strategy';
 
 /** Export Public API, TODO: reorganize, Generate all w/ renames? */
 export {
@@ -35,6 +35,7 @@ export {
 
     NoopSortingStrategy as IgcNoopSortingStrategy,
     NoopFilteringStrategy as IgcNoopFilteringStrategy,
+    ByLevelTreeGridMergeStrategy as IgcByLevelTreeGridMergeStrategy,
 
     // Pivot API
     IgxPivotDateDimension as IgcPivotDateDimension,

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -296,6 +296,19 @@
             @extend %igx-grid__td--edited !optional;
         }
 
+        @include e(td, $m: merged) {
+            @extend %igx-grid__td--merged !optional;
+        }
+
+
+        @include e(td, $m: merged-selected) {
+            @extend %igx-grid__td--merged-selected !optional;
+        }
+
+        @include e(td, $m: merged-hovered) {
+            @extend %igx-grid__td--merged-hovered !optional;
+        }
+
         @include e(td, $m: editing) {
             @extend %igx-grid__td--editing !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1178,6 +1178,7 @@
 
         %grid-row--mrl {
             %igx-grid__hierarchical-expander--header,
+            %igx-grid__hierarchical-expander,
             %igx-grid__header-indentation,
             %igx-grid__row-indentation,
             %grid__cbx-selection {
@@ -1310,6 +1311,7 @@
         }
 
         %grid__cbx-selection,
+        %igx-grid__hierarchical-expander,
         %igx-grid__row-indentation,
         %igx-grid__drag-indicator {
             border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
@@ -1847,6 +1849,27 @@
         color: var-get($theme, 'row-selected-text-color');
         background: var-get($theme, 'row-selected-background');
 
+        &%grid-row--mrl {
+            %grid-mrl-block {
+                %igx-grid__td--merged {
+                    color: var-get($theme, 'row-selected-text-color');
+                    background: var-get($theme, 'row-selected-background');
+
+                    &:hover {
+                        background: var-get($theme, 'row-selected-hover-background');
+                        color: var-get($theme, 'row-selected-hover-text-color');
+                    }
+
+                    &%igx-grid__td--merged-hovered {
+                        background: var-get($theme, 'row-selected-hover-background');
+                        color: var-get($theme, 'row-selected-hover-text-color');
+                    }
+                }
+            }
+        }
+
+
+
         %grid-cell--selected,
         %grid-cell--pinned-selected {
             color: var-get($theme, 'cell-selected-within-text-color');
@@ -1894,6 +1917,31 @@
         }
     }
 
+    %igx-grid__td--merged {
+        z-index: 1;
+        grid-row: 1 / -1;
+    }
+
+    %igx-grid__td--merged-selected {
+        color: var-get($theme, 'row-selected-text-color');
+        background: var-get($theme, 'row-selected-background');
+
+        &%igx-grid__td--merged-hovered {
+            background: var-get($theme, 'row-selected-hover-background');
+            color: var-get($theme, 'row-selected-hover-text-color');
+        }
+    }
+
+    %igx-grid__td--merged-hovered {
+        background: var-get($theme, 'row-hover-background');
+        color: var-get($theme, 'row-hover-text-color');
+
+        &%igx-grid__td--merged-selected {
+            background: var-get($theme, 'row-selected-hover-background');
+            color: var-get($theme, 'row-selected-hover-text-color');
+        }
+    }
+
     %igx-grid__tr--deleted {
         %grid-cell-text {
             font-style: italic;

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -8,7 +8,7 @@ import { IGroupingState } from './groupby-state.interface';
 import { mergeObjects } from '../core/utils';
 import { Transaction, TransactionType, HierarchicalTransaction } from '../services/transaction/transaction';
 import { getHierarchy, isHierarchyMatch } from './operations';
-import { GridType } from '../grids/common/grid.interface';
+import { ColumnType, GridType } from '../grids/common/grid.interface';
 import { ITreeGridRecord } from '../grids/tree-grid/tree-grid.interfaces';
 import { ISortingExpression } from './sorting-strategy';
 import {
@@ -20,6 +20,7 @@ import {
 } from '../grids/common/strategy';
 import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations/data-clone-strategy';
 import { IGroupingExpression } from './grouping-expression.interface';
+import { DefaultMergeStrategy, IGridMergeStrategy } from './merge-strategy';
 
 /**
  * @hidden
@@ -90,6 +91,15 @@ export class DataUtil {
         return grouping.groupBy(data, state, grid, groupsRecords, fullResult);
     }
 
+    public static merge<T>(data: T[], columns: ColumnType[], strategy: IGridMergeStrategy = new DefaultMergeStrategy(), activeRowIndexes = [], grid: GridType = null,
+    ): any[] {
+        let result = [];
+        for (const col of columns) {
+            strategy.merge(data, col.field, col.mergingComparer, result, activeRowIndexes, grid);
+        }
+        return result;
+}
+
     public static page<T>(data: T[], state: IPagingState, dataLength?: number): T[] {
         if (!state) {
             return data;

projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts

@@ -0,0 +1,128 @@
+import { GridType } from '../grids/common/grid.interface';
+
+
+
+
+export interface IMergeByResult {
+    rowSpan: number;
+    root?: any;
+    prev?: any;
+}
+
+export interface IGridMergeStrategy {
+    /* blazorSuppress */
+    merge: (
+        data: any[],
+        field: string,
+        comparer: (prevRecord: any, currentRecord: any, field: string) => boolean,
+        result: any[],
+        activeRowIndexes : number[],
+        grid?: GridType
+    ) => any[];
+    comparer: (prevRecord: any, record: any, field: string) => boolean;
+}
+
+export class DefaultMergeStrategy implements IGridMergeStrategy {
+    protected static _instance: DefaultMergeStrategy = null;
+
+    public static instance(): DefaultMergeStrategy {
+        return this._instance || (this._instance = new this());
+    }
+
+    /* blazorSuppress */
+    public merge(
+        data: any[],
+        field: string,
+        comparer: (prevRecord: any, record: any, field: string) => boolean = this.comparer,
+        result: any[],
+        activeRowIndexes : number[],
+        grid?: GridType
+    ) {
+        let prev = null;
+        let index = 0;
+        for (const rec of data) {
+
+            const recData = result[index];
+            // if this is active row or some special record type - add and skip merging
+            if (activeRowIndexes.indexOf(index) != -1 || (grid && grid.isDetailRecord(rec) || grid.isGroupByRecord(rec) || grid.isChildGridRecord(rec))) {
+                if(!recData) {
+                    result.push(rec);
+                }
+                prev = null;
+                index++;
+                continue;
+            }
+            let recToUpdateData = recData ?? { recordRef: grid.isGhostRecord(rec) ? rec.recordRef : rec, cellMergeMeta: new Map<string, IMergeByResult>(), ghostRecord: rec.ghostRecord };
+            recToUpdateData.cellMergeMeta.set(field, { rowSpan: 1 });
+            if (prev && comparer(prev.recordRef, recToUpdateData.recordRef, field) && prev.ghostRecord === recToUpdateData.ghostRecord) {
+                const root = prev.cellMergeMeta.get(field)?.root ?? prev;
+                root.cellMergeMeta.get(field).rowSpan += 1;
+                recToUpdateData.cellMergeMeta.get(field).root = root;
+            }
+            prev = recToUpdateData;
+            if (!recData) {
+                result.push(recToUpdateData);
+            }
+            index++;
+        }
+        return result;
+    }
+
+    /* blazorSuppress */
+    public comparer(prevRecord: any, record: any, field: string): boolean {
+        const a = prevRecord[field];
+        const b = record[field];
+        const an = (a === null || a === undefined);
+        const bn = (b === null || b === undefined);
+        if (an) {
+            if (bn) {
+                return true;
+            }
+            return false;
+        } else if (bn) {
+            return false;
+        }
+        return a === b;
+    }
+}
+
+
+export class DefaultTreeGridMergeStrategy extends DefaultMergeStrategy {
+    /* blazorSuppress */
+    public override comparer(prevRecord: any, record: any, field: string): boolean {
+        const a = prevRecord.data[field];
+        const b = record.data[field];
+        const an = (a === null || a === undefined);
+        const bn = (b === null || b === undefined);
+        if (an) {
+            if (bn) {
+                return true;
+            }
+            return false;
+        } else if (bn) {
+            return false;
+        }
+        return a === b;
+    }
+}
+
+export class ByLevelTreeGridMergeStrategy extends DefaultMergeStrategy {
+    /* blazorSuppress */
+    public override comparer(prevRecord: any, record: any, field: string): boolean {
+        const a = prevRecord.data[field];
+        const b = record.data[field];
+        const levelA = prevRecord.level;
+        const levelB = record.level;
+        const an = (a === null || a === undefined);
+        const bn = (b === null || b === undefined);
+        if (an) {
+            if (bn) {
+                return true;
+            }
+            return false;
+        } else if (bn) {
+            return false;
+        }
+        return a === b && levelA === levelB;
+    }
+}