React Grid Agrupar por

    O comportamento Ignite UI for React Agrupar por Pelo IgrGrid em React cria linhas de dados agrupadas com base nos valores das colunas. O Grupo By em permiteIgrGrid visualizar os grupos em uma estrutura hierárquica. As linhas de dados agrupadas podem ser expandidas ou colapsadas, e a ordem de agrupamento pode ser alterada pela interface ou API. Quando a Seleção de Linha está ativada, um seletor de Agrupar por Linha é renderizado na área mais à esquerda da linha de grupo. Caso arowSelection propriedade esteja definida como simples, as caixas de seleção são desativadas e servem apenas como indicação para o grupo onde a seleção é colocada. Se arowSelection propriedade estiver definida como múltipla, ao clicar no seletor Agrupar por linha, todos os registros pertencentes a esse grupo.

    React Grid Group By Example

    Este exemplo apresenta os recursos de agrupamento de uma grande quantidade de dados. Arrastar os cabeçalhos de coluna para o topo (área de agrupamento) permite que os usuários vejam os dados da coluna selecionada em uma estrutura hierárquica. Eles podem agrupar por em vários campos arrastando mais cabeçalhos de coluna para o topo. Essas opções de agrupamento são úteis quando você tem tabelas com várias linhas e colunas nas quais os usuários desejam apresentar os dados de uma forma muito mais rápida e visualmente aceitável.

    Initial Grouping State

    É possível definir o agrupamento inicial da grade atribuindo um array de expressões àgroupingExpressions propriedade da grade.

    const expressions = [
    { fieldName: 'ProductName', dir: SortingDirection.Desc },
    { fieldName: 'Released', dir: SortingDirection.Desc }
];
const grid1Ref = useRef<IgrGrid>(null);

<IgrGrid
    autoGenerate={true}
    groupingExpressions={expressions}
    ref={grid1Ref}>
</IgrGrid>

    Agrupar expressões implementa aISortingExpression interface.

    Group By API

    Grouping API

    O agrupamento está disponível através da interface e de uma API robusta exposta pelo componente de grade. Desenvolvedores podem permitir que os usuários finais agrupem os dados da grade por certas colunas, definindo a propriedade deGroupable cada coluna paratrue.

    <IgrGrid
    autoGenerate={false}
    ref={gridRef}>
    <IgrColumn field="OrderID" hidden={true}></IgrColumn>
    <IgrColumn field="ShipCountry" header="Ship Country" width="200px" groupable={true}></IgrColumn>
    <IgrColumn field="OrderDate" header="Order Date" dataType="date" width="200px" groupable={true}></IgrColumn>
    <IgrColumn field="PostalCode" header="Postal Code" width="200px" groupable={true}></IgrColumn>
    <IgrColumn field="Discontinued" width="200px" dataType="boolean" groupable={true}></IgrColumn>
</IgrGrid>

    Durante o tempo de execução, as expressões são obtidas e configuráveis a partir dagroupingExpressions propriedade. Se você precisar adicionar ou alterar uma expressão existente, também pode usar ogroupBy método com uma única ou uma matriz de expressões.

    gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }]);

    Expand/Collapse API

    Além de agrupar expressões, você também pode controlar os estados de expansão das linhas do grupo. Eles são armazenados em uma propriedade separada doIgrGrid componentegroupingExpansionState, que é uma coleção deIgrGroupByExpandState. Cada estado de expansão é definido de forma única pelo nome do campo para o qual foi criado e pelo valor que representa para cada nível de agrupamento, ou seja, o identificador é um array hierárico deIgrGroupByKey.

    Assim como aogroupingExpressions definir uma lista deIgrGroupByExpandState diretamente para ogroupingExpansionState vai mudar a expansão de acordo. Além dissoIgrGrid, expõe um métodotoggleGroup que alterna um grupo pela instância do registro do grupo ou pelaexpanded propriedade da linha.

    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
gridRef.current.toggleGroup(groupRow);

    const groupRow = gridRef.current.getRowByIndex(0);
groupRow.expanded = false;

    Grupos podem ser criados, expandidos (padrão) ou colapsados, e os estados de expansão geralmente conteriam apenas o estado oposto ao comportamento padrão. Você pode controlar se os grupos devem ser criados expandidos ou não através dagroupsExpanded propriedade.

    Select/Deselect All Rows in a Group API

    Selecionar/Deselecionar todas as linhas de um grupo está disponível através dosselectRowsInGroup métodos da API An.deselectRowsInGroup​

    O trecho de código abaixo pode ser usado para selecionar todas as linhas dentro de um grupo usando o método de instânciaselectRowsInGroup de registro de grupo. Além disso, o segundo parâmetro desse método é uma propriedade booleana pela qual você pode escolher se a seleção da linha anterior será eliminada ou não. A seleção anterior é preservada por padrão.

    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
gridRef.current.selectRowsInGroup(groupRow);

    Se você precisar demarcar todas as linhas de um grupo programaticamente, pode usar odeselectRowsInGroup método.

    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
gridRef.current.deselectRowsInGroup(groupRow);

    Templating

    Group Row Templates

    A linha de grupo, exceto pela interface de expandir/colapsar, é totalmente templativa. Por padrão, ele renderiza um ícone de agrupamento e exibe o nome do campo e o valor que representa. O contexto para renderizar o template é de tipoIgrGroupByRecord.

    Como exemplo, o modelo a seguir tornaria o resumo das linhas do grupo mais detalhado:

    const template = (ctx: IgrGroupByRowTemplateContext) => {
    const groupRow = ctx.implicit;
    return (<>
       <span>Total items with value: { groupRow.value } are { groupRow.records.length }</span>
    </>)
}

    Group Row Selector Templates

    Como mencionado acima, a linha de grupo, exceto pela interface de expandir/comover, é totalmente templativa. Para criar um modelo personalizado de seletor Group by Row, usegroupByRowSelectorTemplate. A partir do template, você pode acessar a variável de contexto implicitamente fornecida, com propriedades que fornecem informações sobre o estado do Group By Row.

    AselectedCount propriedade mostra quantos dos registros do grupo estão atualmente selecionados, enquantototalCount mostra quantos registros pertencem ao grupo.

    const template = (ctx: IgrGroupByRowSelectorTemplateContext) => {
    return (<>
        { ctx.implicit.selectedCount } / { ctx.implicit.totalCount }
    </>)
}

    AgroupRow propriedade retorna uma referência à linha do grupo.

    const template = (ctx: IgrGroupByRowSelectorTemplateContext) => {
    const groupRow = ctx.implicit.groupRow;
    return (<>
        <div onClick={(e: any) => handleGroupByRowSelectorClick(e, groupRow)}>Handle groupRow</div> `;
    </>)
}

    AsselectedCount propriedades etotalCount podem ser usadas para determinar se o seletor Agrupar por linha deve ser marcado ou indeterminado (parcialmente selecionado).

    React Grid Group By With Paging

    As linhas de grupo participam do processo de paginação junto com as linhas de dados. Elas contam para o tamanho de página para cada página. As linhas recolhidas não são incluídas no processo de paginação. Qualquer operação de expansão ou recolhimento força o Paging a recalcular a contagem de páginas e ajustar o índice de página, se necessário. Os grupos que abrangem várias páginas são divididos entre elas. A linha de grupo é visível apenas na página em que começa e não é repetida nas páginas subsequentes. As informações de resumo para linhas de grupo são calculadas com base no grupo inteiro e não são afetadas pelo Paging.

    React Group By With Paging Example

    Group By With Summaries

    A integração entre Agrupar por e Resumos é descrita no tópico Resumos.

    Keyboard Navigation

    A interface de agrupamento oferece suporte às seguintes interações de teclado:

    • Para linhas de grupo (o foco deve estar na linha ou na célula de expansão/recolhimento)

      • ALT + DIREITA- Expande o grupo
      • ALT + ESQUERDA- Recolhe o grupo
      • ESPAÇO- seleciona todas as linhas no grupo, se a propriedade rowSelection estiver definida como múltipla

    • Para componentes de grupoIgrChip no grupo por área (o foco deve estar no chip)

      • SHIFT + ESQUERDA- move a ficha em foco para a esquerda, alterando a ordem de agrupamento, se possível
      • SHIFT + DIREITA- move o chip em foco para a direita, alterando a ordem de agrupamento, se possível
      • ESPAÇO- altera a direção da classificação
      • DELETE- desagrupa o campo
      • Os elementos separados do chip também são focalizáveis e podem ser interagidos usando a tecla ENTER.

    React Grid Custom Group By

    A grade permite definir o agrupamento personalizado por coluna ou por expressão de agrupamento, que fornece agrupamento com base em uma condição personalizada. Isso é útil quando você precisa agrupar por objetos complexos ou para outros cenários específicos do aplicativo.

    O exemplo abaixo demonstra agrupamento personalizado porDate, onde os valores de data são ordenados e agrupados por Dia, Semana, Mês ou Ano com base no modo de agrupamento selecionado pelo usuário.

    React Custom Group By Example

    O exemplo define ordenação personalizada para as diferentes condições de data. Cada estratégia personalizada define oGroupingComparer método, que é a função de comparação personalizada usada na ordenação dos valores. Além disso, extrai os valores da data necessária para a comparação.

    const groupByMode = "Month";
function getParsedDate(date: any) {
    return {
        day: date.getDay(),
        month: date.getMonth() + 1,
        year: date.getFullYear()
    };
}

    UmaGroupingComparer função é definida para as expressões de agrupamento, que determina os itens pertencentes ao mesmo grupo com base no modo de agrupamento selecionado. Valores nos dados ordenados para os quais essa função retorna 0 são marcados como parte do mesmo grupo.

    grid.groupingExpressions = [
    { fieldName: 'OrderDate', dir: SortingDirection.Desc,
    groupingComparer: (a, b) => {
            const dateA = this.getParsedDate(a);
            const dateB = this.getParsedDate(b);
            if (this.groupByMode === 'Month') {
                return dateA.month === dateB.month ? 0 : -1;
            } else if (this.groupByMode === "Year") {
                return dateA.year === dateB.year ? 0 : -1;
            } else if (this.groupByMode === 'Week') {
                return this.getWeekOfDate(a) === this.getWeekOfDate(b) ? 0 : -1;
            }
            return dateA.day === dateB.day && dateA.month === dateB.month ? 0 : -1;
        }
    }
];

    Styling

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

    <IgrGrid className="grid">
</IgrGrid>

    Em seguida, defina as propriedades CSS relacionadas para essa classe:

    .grid {
    --ig-grid-group-row-background: #969799;
    --ig-grid-group-row-selected-background: #969799;
    --ig-grid-group-label-column-name-text: #f8f8f8;
    --ig-grid-group-label-text: #f8f8f8;
    --ig-grid-group-count-text-color: #222;
    --ig-grid-expand-icon-color: #f8f8f8;
    --ig-grid-expand-icon-hover-color: #f8f8f8;
}

    Demo

    Known Limitations

    Limitação Descrição
    A quantidade máxima de colunas agrupadas é 10. Se mais de 10 colunas forem agrupadas, um erro será gerado.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.