Angular Cell Merging

La cuadrícula de árbol Ignite UI for Angular proporciona una función de combinación de celdas que combina dos o más celdas adyacentes con el mismo valor en una sola celda más grande. La combinación se aplica verticalmente dentro de una columna y ayuda a mejorar la legibilidad al reducir los valores duplicados. La función se puede configurar para combinar celdas de forma predeterminada haciendo coincidir valores de datos o aplicando una condición personalizada.

Angular Cell Merging Example

Enabling and Using Cell Merging

La fusión de celdas en la cuadrícula se controla en dos niveles:

Modo de fusión a nivel de cuadrícula: determina cuándo se aplica la combinación.
Alternancia de combinación de nivel de columna: determina qué columnas pueden combinar celdas.

Grid Merge Mode

The grid exposes a cellMergeMode property that accepts values from the GridCellMergeMode enum:

always - Merges any adjacent cells that meet the merging condition, regardless of sort state.
onSort - Merges adjacent cells only when the column is sorted (default value).

<igx-tree-grid [data]="data" [cellMergeMode]="cellMergeMode">
    ...
</igx-tree-grid>

protected cellMergeMode: GridCellMergeMode = 'always';

Column Merge Toggle

At the column level, merging can be enabled or disabled with the merge property.

<igx-column field="OrderID" [merge]="true"></igx-column>
<igx-column field="ShipperName" [merge]="false"></igx-column>

En el ejemplo anterior:

The OrderID column will merge adjacent duplicate values.
La columna ShipperName se representará normalmente sin combinarse.

Combined Example

<igx-tree-grid [data]="data" [cellMergeMode]="cellMergeMode" [autoGenerate]="false">
    <igx-column field="OrderID" header="Order ID" [merge]="true"></igx-column>
    <igx-column field="ShipperName" header="Shipper Name" [merge]="true"></igx-column>
    <igx-column field="Salesperson" header="Salesperson"></igx-column>
</igx-tree-grid>

protected cellMergeMode: GridCellMergeMode = 'onSort';

Aquí, la cuadrícula está configurada para combinarse solo cuando se ordenan las columnas y las columnas Categoría y Producto están configuradas para la combinación.

Custom Merge Conditions

In addition to the built-in always and onSort modes, the grid allows you to define a custom condition for merging cells through the mergeStrategy property. This strategy controls both how cells are compared and how merged ranges are calculated.

Merge Strategy Interface

A custom merge strategy must implement the IGridMergeStrategy interface:

export interface IGridMergeStrategy {
    merge: (
        data: any[],
        field: string,
        comparer: (prevRecord: any, currentRecord: any, field: string) => boolean,
        result: any[],
        activeRowIndex?: number,
        grid?: GridType
    ) => any[];

    comparer: (prevRecord: any, record: any, field: string) => boolean;    
}

merge - defines how merged cells are produced.
comparer - defines the condition to decide if two adjacent records should be merged.

The IgxTreeGrid provides two built-in strategies that implement the IGridMergeStrategy interface: DefaultTreeGridMergeStrategy and ByLevelTreeGridMergeStrategy. DefaultTreeGridMergeStrategy merges all cells with the same value, regardless of their hierarchical level. In contrast, ByLevelTreeGridMergeStrategy only merges cells if they have the same value and are located at the same level, making level a required condition for merging.

Extending the Default Strategy

If you only want to customize part of the behavior (for example, the comparer logic), you can extend one of the built-in strategies, either DefaultTreeGridMergeStrategy or ByLevelTreeGridMergeStrategy, and override the relevant methods.

export class MyCustomStrategy extends DefaultTreeGridMergeStrategy {
    /* Merge only cells within their respective projects */
    public override comparer(prevRecord: any, record: any, field: string): boolean {
        const a = prevRecord[field];
        const b = record[field];
        const projA = prevRecord['ProjectName'];
        const projB = record['ProjectName'];
        return a === b && projA === projB;
    }
}

Applying a Custom Strategy

Once defined, assign the strategy to the grid through the mergeStrategy property:

<igx-tree-grid [data]="data" [mergeStrategy]="customStrategy">
  <igx-column field="ActionID" [merge]="true"></igx-column>
  <igx-column field="ProjectName" [merge]="true"></igx-column>
</igx-tree-grid>

protected customStrategy = new MyCustomStrategy();

Feature Integration

Debido al comportamiento específico de las celdas combinadas, debe tenerse en cuenta cómo se relaciona exactamente con algunas de las otras características de la cuadrícula:

Exportación de Excel: las celdas combinadas permanecen combinadas cuando se exportan a Excel.
Anclaje de columnas: las celdas permanecen combinadas cuando se fija una columna y se muestran en el área anclada.
Fijación de filas: las celdas se fusionan solo dentro de su área contenedora, es decir, las celdas de las filas ancladas se fusionan solo con las celdas de otras filas ancladas, mientras que las celdas de las filas no ancladas se fusionan solo con las celdas de las filas no ancladas.
Navegación/Activación: cuando una celda está activa, todas las celdas combinadas en la misma fila se convierten en celdas individuales, es decir, su secuencia de fusión se rompe. Esto también incluye la activación a través de la navegación con teclado.

Note

Si se hace clic en una celda combinada, se activará la celda más cercana de la secuencia de fusión.

Actualización/Edición: dado que la activación rompe la secuencia de fusión, solo una celda estará en modo de edición.
Selección de filas: si las filas seleccionadas intersecan celdas combinadas, todas las celdas combinadas relacionadas deben marcarse como parte de la selección.

API References

Additional Resources

Descripción general de la cuadrícula de árbol

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

Angular Cell Merging