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 umacellMergeMode propriedade que aceita valores doGridCellMergeMode enum:

    • always- Muma quaisquer células adjacentes que atendam à condição de fusão, independentemente do estado de ordenação.
    • onSort- Mesla células adjacentes apenas quando a coluna está ordenada (valor padrão).​
    <IgrGrid data={data} cellMergeMode={cellMergeMode} >
    ...
</IgrGrid>

    const cellMergeMode: GridCellMergeMode = 'always';

    Column Merge Toggle

    No nível da coluna, a fusão pode ser habilitada ou desativada com amerge 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 ealways de integraçãoonSort integrados, a grade permite definir uma condição personalizada para mesclar células através damergeStrategy propriedade. Essa estratégia controla tanto como as células são comparadas quanto como os intervalos fundidos são calculados.

    Merge Strategy Class

    Uma estratégia de fusão personalizada deve implementar aIgrGridMergeStrategy 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 mesclaras são produzidas.
    • comparer- define a condição para decidir se dois registros adjacentes devem ser fundidos.

    Extending the Default Strategy

    Se você quiser personalizar apenas parte do comportamento (por exemplo, a lógica do comparador), pode estender o conteúdo embutidoIgrDefaultMergeStrategy e sobrescrever 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 através damergeStrategy 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;

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

    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.