React Mesclagem de células de grade

    A grade Ignite UI for React fornece um recurso de mesclagem de células que combina duas ou mais células adjacentes com o mesmo valor em uma única célula maior. A mesclagem é aplicada verticalmente em uma coluna e ajuda a melhorar a legibilidade, reduzindo valores duplicados. O recurso pode ser configurado para mesclar células por valores de dados correspondentes padrão ou aplicando uma condição personalizada.

    React Grid Cell Merging Example

    Enabling and Using Cell Merging

    A fusão de células na grade é controlada em dois níveis:

    • Modo de mesclagem no nível da grade – determina quando a mesclagem é aplicada.
    • Alternância de mesclagem no nível da coluna – determina quais colunas podem mesclar células.

    Grid Merge Mode

    A grade expõe uma cellMergeMode propriedade que aceita valores da GridCellMergeMode enumeração:

    • always- Mescla todas as células adjacentes que atendem à condição de mesclagem, independentemente do estado de classificação.
    • onSort - Merges adjacent cells only when the column is sorted (default value).
    <IgrGrid data={data} cellMergeMode={cellMergeMode} >
    ...
</IgrGrid>

    const cellMergeMode: GridCellMergeMode = 'always';

    Column Merge Toggle

    No nível da coluna, a mesclagem pode ser habilitada ou desabilitada com a merge propriedade.

    <IgrColumn field="OrderID" merge={true}></IgrColumn>
<IgrColumn field="ShipperName" merge={false}></IgrColumn>

    No exemplo acima:

    • The OrderID column will merge adjacent duplicate values.
    • A coluna ShipperName será renderizada normalmente sem mesclagem.

    Combined Example

    <IgrGrid data={data} cellMergeMode={cellMergeMode} autoGenerate={false}>
    <IgrColumn field="OrderID" header="Order ID" merge={true}></IgrColumn>
    <IgrColumn field="ShipperName" header="Shipper Name" merge={true}></IgrColumn>
    <IgrColumn field="Salesperson" header="Salesperson"></IgrColumn>
</IgrGrid>

    const cellMergeMode: GridCellMergeMode = 'onSort';

    Aqui, a grade é definida para mesclar somente quando as colunas são classificadas e as colunas Categoria e Produto são configuradas para mesclagem.

    Custom Merge Conditions

    Além dos modos e always​ ​onSort integrados, a grade permite definir uma condição personalizada para mesclar células por meio da mergeStrategy propriedade. Essa estratégia controla como as células são comparadas e como os intervalos mesclados são calculados.

    Merge Strategy Class

    Uma estratégia de mesclagem personalizada deve implementar a GridMergeStrategy classe:

    export declare class IgrGridMergeStrategy {
    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 como as células mescladas são produzidas.
    • comparer- define a condição para decidir se dois registros adjacentes devem ser mesclados.

    Extending the Default Strategy

    Se você quiser personalizar apenas parte do comportamento (por exemplo, a lógica do comparador), poderá estender o built-in DefaultMergeStrategy e substituir os métodos relevantes.

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

    Uma vez definida, atribua a estratégia à grade por meio da mergeStrategy propriedade:

    <IgrGrid data={data} mergeStrategy={customStrategy}>
  <IgrColumn field="ActionID" merge={true}></IgrColumn>
  <IgrColumn field="ProjectName" merge={true}></IgrColumn>
</IgrGrid>

    const customStrategy = new MyCustomStrategy() as IgrGridMergeStrategy;

    Demo

    Feature Integration

    Devido ao comportamento específico das células mescladas, deve-se notar como exatamente elas se unem a alguns dos outros recursos da grade:

    • Expandir/Recolher: se um recurso (como mestre-detalhe, agrupamento, etc.) gerar uma linha que não seja de dados, a mesclagem da célula será interrompida e o grupo será dividido.
    • Exportação do Excel: as células mescladas permanecem mescladas quando exportadas para o Excel.
    • Fixação de coluna: as células permanecem mescladas quando uma coluna é fixada e são exibidas na área fixada.
    • Fixação de linha: as células se fundem apenas dentro de sua área de contenção, ou seja, as células de linhas fixadas se fundem apenas com células de outras linhas fixadas, enquanto as células de linhas não fixadas se fundem apenas com células de linhas não fixadas.
    • Navegação/Ativação: quando uma célula está ativa, todas as células mescladas na mesma linha tornam-se células únicas, ou seja, sua sequência de mesclagem é quebrada. Isso também inclui a ativação por meio da navegação pelo teclado.

    [!NOTE] If a merged cell is clicked, the closest cell from the merge sequence will become active.

    • Atualização/Edição: como a ativação interrompe a sequência de mesclagem, apenas uma única célula estará no modo de edição.
    • Seleção de linha: se as linhas selecionadas cruzarem células mescladas, todas as células mescladas relacionadas devem ser marcadas como parte da seleção.

    Limitations

    Limitações conhecidas Descrição
    A mesclagem de células não é suportada em combinação com o Layout de várias linhas. Ambos abrangem layouts complexos que não fazem sentido quando combinados. Um aviso será lançado se essa configuração inválida for detectada.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.