React Resumos de Grade Hierárquica

    O recurso Resumos Ignite UI for React em React Grade Hierárquica funciona em um nível por coluna como rodapé de grupo. React resumos IgrHierarchicalGrid é um recurso poderoso que permite ao usuário ver as informações da coluna em um contêiner separado com um conjunto predefinido de itens de resumo padrão, dependendo do tipo de dados dentro da coluna ou implementando um modelo personalizado no IgrHierarchicalGrid.

    React Hierarchical Grid Summaries Overview Example

    [!Note] The summary of the column is a function of all column values, unless filtering is applied, then the summary of the column will be function of the filtered result values

    IgrHierarchicalGrid Os resumos também podem ser ativados em um nível por coluna no Ignite UI for React, o que significa que você pode ativá-lo apenas para as colunas necessárias. IgrHierarchicalGrid resumos fornece um conjunto predefinido de resumos padrão, dependendo do tipo de dados na coluna, para que você possa economizar algum tempo:

    Para string e boolean dataType, a seguinte função está disponível:

    • Contar

    Para number e currency​ ​percent tipos de dados, as seguintes funções estão disponíveis:

    • Contar
    • Mínimo
    • Máx.
    • Média
    • Soma

    Para date o tipo de dados, as seguintes funções estão disponíveis:

    • Contar
    • Mais antigo
    • Mais recente

    Todos os tipos de dados de coluna disponíveis podem ser encontrados no tópico oficial Tipos de coluna.

    IgrHierarchicalGrid Os resumos são habilitados por coluna definindo hasSummary a propriedade como true. Também é importante ter em mente que os resumos de cada coluna são resolvidos de acordo com o tipo de dados da coluna. IgrHierarchicalGrid No tipo de dados da coluna padrão é string, portanto, se você quiser number resumos date específicos, especifique a dataType propriedade como number ou date. Observe que os valores resumidos serão exibidos localizados, de acordo com a grade locale e a coluna pipeArgs.

    <IgrHierarchicalGrid autoGenerate="false" data={this.singersData} ref={this.hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID">
    <IgrColumn field="Artist" header="Artist" hasSummary="true"></IgrColumn>
    <IgrColumn field="Photo" header="Photo" dataType="Image"></IgrColumn>
    <IgrColumn field="Debut" header="Debut" hasSummary="true"></IgrColumn>
    <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="Number" hasSummary="true"></IgrColumn>
    <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="Number" hasSummary="true"></IgrColumn>
    <IgrRowIsland childDataKey="Albums" autoGenerate="false">
        <IgrColumn field="Album" header="Album" dataType="String"></IgrColumn>
        <IgrColumn field="LaunchDate" header="Launch Date" dataType="Date"></IgrColumn>
        <IgrColumn field="BillboardReview" header="Billboard Review" dataType="Number" hasSummary="true"></IgrColumn>
        <IgrColumn field="USBillboard200" header="US Billboard 200" dataType="Number" hasSummary="true" ></IgrColumn>
     </IgrRowIsland>
</IgrHierarchicalGrid>

    A outra maneira de ativar/desativar resumos para uma coluna específica ou uma lista de colunas é usar o método enableSummaries público/ disableSummaries do IgrHierarchicalGrid.

    function enableSummary() {
    hierarchicalGridRef.current.enableSummaries([
        {fieldName: 'GrammyNominations'},
        {fieldName: 'GrammyAwards'}
    ]);
}
function disableSummary() {
    hierarchicalGridRef.current.disableSummaries(['GrammyNominations']);
}

<IgrHierarchicalGrid autoGenerate="false" data={this.singersData} ref={this.hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID">
    <IgrColumn field="Artist" header="Artist" hasSummary="true"></IgrColumn>
    <IgrColumn field="Photo" header="Photo" dataType="Image"></IgrColumn>
    <IgrColumn field="Debut" header="Debut" hasSummary="true"></IgrColumn>
    <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="Number" hasSummary="true"></IgrColumn>
    <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="Number" hasSummary="true"></IgrColumn>
</IgrHierarchicalGrid>
<button onClick={enableSummary}>Enable Summary</button>
<button onClick={disableSummary}>Disable Summary </button>

    Summary Template

    Summary tem como alvo o resumo da coluna, fornecendo como contexto os resultados do resumo da coluna.

    function summaryTemplate(ctx: IgrSummaryTemplateContext) {
  return (
    <>
      <span>My custom summary template</span>
      <span>{ctx.dataContext.implicit[0].label} - {ctx.dataContext.implicit[0].summaryResult}</span>
    </>
  );
}

<IgrColumn hasSummary="true" summaryTemplate={summaryTemplate}></IgrColumn>

    Quando um resumo padrão é definido, a altura da área de resumo é calculada por design, dependendo da coluna com o maior número de resumos e da--ig-size grade. Use a summaryRowHeight propriedade input para substituir o valor padrão. Como argumento, ele espera um valor numérico e definir um valor falso acionará o comportamento de dimensionamento padrão do rodapé da grade.

    Disabled Summaries

    A disabledSummaries propriedade fornece controle preciso por coluna sobre o recurso de resumo da Grade Hierárquica React. Essa propriedade permite que os usuários personalizem os resumos exibidos para cada coluna no IgrHierarchicalGrid, garantindo que apenas os dados mais relevantes e significativos sejam mostrados. Por exemplo, você pode excluir tipos de resumo específicos, como ['count', 'min', 'max'] especificar suas chaves de resumo em uma matriz.

    Essa propriedade também pode ser modificada dinamicamente em runtime por meio de código, fornecendo flexibilidade para adaptar os resumos do IgrHierarchicalGrid à alteração de estados do aplicativo ou ações do usuário.

    Os exemplos a seguir ilustram como usar a disabledSummaries propriedade para gerenciar resumos para colunas diferentes e excluir tipos de resumo padrão e personalizados específicos na Grade Hierárquica React:

    <!-- Disable default summaries -->
<IgrColumn
    field="UnitPrice"
    header="Unit Price"
    dataType="number"
    hasSummary={true}
    disabledSummaries="['count', 'sum', 'average']"
/>

<!-- Disable custom summaries -->
<IgrColumn
    field="UnitsInStock"
    header="Units In Stock"
    dataType="number"
    hasSummary={true}
    summaries={discontinuedSummary}
    disabledSummaries="['discontinued', 'totalDiscontinued']"
/>

    Pois UnitPrice, resumos padrão como count, sum e average são desativados, deixando outros como min e max ativos.

    Para UnitsInStock, resumos personalizados, como discontinued e totalDiscontinued são excluídos usando a disabledSummaries propriedade.

    Em tempo de execução, os resumos também podem ser desabilitados dinamicamente usando a disabledSummaries propriedade. Por exemplo, você pode definir ou atualizar a propriedade em colunas específicas programaticamente para adaptar os resumos exibidos com base nas ações do usuário ou nas alterações de estado do aplicativo.

    Formatting summaries

    Por padrão, os resultados do resumo, produzidos pelos operandos de resumo integrados, são localizados e formatados de acordo com a grade locale e a coluna pipeArgs. Ao usar operandos personalizados, os locale e pipeArgs não são aplicados. Se você quiser alterar a aparência padrão dos resultados do resumo, poderá formatá-los usando a summaryFormatter propriedade.

    public summaryFormatter(
    summary: IgrSummaryResult,
    summaryOperand: IgrSummaryOperand
  ): string {
    const result = summary.summaryResult;
    if (summary.key !== "count" && result !== null && result !== undefined) {
      const format = new Intl.DateTimeFormat("en", { year: "numeric" });
      return format.format(new Date(result));
    }
    return result;
  }
  
<IgrColumn hasSummary="true" summaryFormatter={this.summaryFormatter}></IgrColumn>

    Keyboard Navigation

    As linhas de resumo podem ser navegadas com as seguintes interações de teclado:

    • PARA CIMA- navega uma célula para cima.
    • PARA BAIXO- navega uma célula para baixo.
    • ESQUERDA- navega uma célula para a esquerda.
    • DIREITA- navega uma célula para a direita.
    • CTRL + ESQUERDA ou HOME- navega para a célula mais à esquerda.
    • CTRL + DIREITA ou END- navega para a célula mais à direita.

    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:

    <IgrHierarchicalGrid id="hierarchicalGrid">
</IgrHierarchicalGrid>

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

    #hierarchicalGrid {
    --ig-grid-summary-background-color:#e0f3ff;
    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
    --ig-grid-summary-label-color: rgb(228, 27, 117);
    --ig-grid-summary-result-color: black;
}

    Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.