React Tree Grid Summaries

O recurso Resumos Ignite UI for React em React Grade de Árvore funciona em um nível por coluna como rodapé de grupo. React resumos do IgrTreeGrid é 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 IgrTreeGrid.

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

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

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

<IgrTreeGrid autoGenerate="false" height="800px" width="800px">
    <IgrColumn field="ID" header="Order ID">
    </IgrColumn>
    <IgrColumn field="Name" header="Order Product" hasSummary="true">
    </IgrColumn>
    <IgrColumn field="Units" header="Units" editable="true" dataType="number" hasSummary="true">
    </IgrColumn>
</IgrTreeGrid>

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

function enableSummary() {
    treeGridRef.current.enableSummaries([
        {fieldName: 'Name'},
        {fieldName: 'Units'}
    ]);
}
function disableSummary() {
    treeGridRef.current.disableSummaries(['Units']);
}

<IgrTreeGrid autoGenerate="false" data={this.ordersTreeData} ref={this.treeGridRef} id="treeGrid" primaryKey="ID">
    <IgrColumn field="ID" header="Order ID"></IgrColumn>
    <IgrColumn field="Name" header="Order Product" hasSummary="true"></IgrColumn>
    <IgrColumn field="Units" header="Units" editable="true" dataType="Number" hasSummary="true"></IgrColumn>
</IgrTreeGrid>
<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 de Árvore React. Essa propriedade permite que os usuários personalizem os resumos exibidos para cada coluna no IgrTreeGrid, 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 IgrTreeGrid à 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 de Árvore 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>

Child Summaries

O IgrTreeGrid suporta resumos separados para os nós raiz e para cada nível de nó filho aninhado. Quais resumos são mostrados são configuráveis usando a summaryCalculationMode propriedade. Os resumos de nível filho podem ser mostrados antes ou depois dos nós filho usando a summaryPosition propriedade. Junto com essas duas propriedades, a IgrTreeGrid propriedade exposes e showSummaryOnCollapse que permite determinar se a linha de resumo permanece visível quando o nó pai ao qual se refere é recolhido.

Os valores disponíveis do summaryCalculationMode imóvel são:

RootLevelOnly- Os resumos são calculados apenas para os nós de nível raiz.
ChildLevelsOnly- Os resumos são calculados apenas para os níveis filhos.
RootAndChildLevels- Resumos são calculados para níveis raiz e filho. Este é o valor padrão.

Os valores disponíveis do summaryPosition imóvel são:

Top- A linha de resumo aparece antes da lista de linhas filhas.
Bottom- A linha de resumo aparece após a lista de linhas secundárias. Esse é o valor padrão.

A showSummaryOnCollapse propriedade é booleana. Seu valor padrão é definido como false, o que significa que a linha de resumo ficaria oculta quando a linha pai fosse recolhida. Se a propriedade for definida como true, a linha de resumo permanecerá visível quando a linha pai for recolhida.

[!Note] The summaryPosition property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the IgrTreeGrid.

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:

<IgrTreeGrid className="grid">
</IgrTreeGrid>

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

.grid {
    --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.

React Tree Grid Summaries