Angular Cell Merging

La cuadrícula 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

La cuadrícula expone unacellMergeMode propiedad que acepta valores delGridCellMergeMode enum:

always- Fusiona cualquier celda adyacente que cumpla la condición de fusión, independientemente del estado de ordenación.
onSort- Fusiona celdas adyacentes solo cuando la columna está ordenada (valor por defecto).

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

protected cellMergeMode: GridCellMergeMode = 'always';

Column Merge Toggle

A nivel de columna, la fusión puede habilitarse o desactivarse con lamerge propiedad.

<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-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-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

Además de los modos yalwaysonSort modos integrados, la cuadrícula permite definir una condición personalizada para fusionar celdas a través de lamergeStrategy propiedad. Esta estrategia controla tanto cómo se comparan las celdas como cómo se calculan los rangos combinados.

Merge Strategy Interface

Una estrategia de fusión personalizada debe implementar laIGridMergeStrategy interfaz:

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- define cómo se producen las celdas fusionadas.
comparer- define la condición para decidir si dos registros adyacentes deben fusionarse.

Extending the Default Strategy

Si solo quieres personalizar parte del comportamiento (por ejemplo, la lógica del comparador), puedes extender el sistema integradoDefaultMergeStrategy y anular los métodos correspondientes.

export class MyCustomStrategy extends DefaultMergeStrategy {
    /* 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

Una vez definida, asigna la estrategia a la cuadrícula mediante lamergeStrategy propiedad:

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

protected customStrategy = new MyCustomStrategy();

Demo

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:

Expandir/Contraer: si una característica (como maestro-detalle, agrupación, etc.) genera una fila que no es de datos, entonces la fusión de celdas se interrumpe y el grupo se dividirá.
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.

Limitations

Limitaciones conocidas	Descripción
La combinación de celdas no se admite en combinación con el diseño de varias filas.	Ambos abarcan diseños complejos que no tienen sentido cuando se combinan. Se lanzará una advertencia si se detecta dicha configuración no válida.

API References

Additional Resources

Descripción general de la cuadrícula

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

Angular Cell Merging