React Tree Grid Summaries

The Ignite UI for React Summaries feature in React Tree Grid functions on a per-column level as group footer. React IgrTreeGrid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom template in the 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

IgrTreeGridResumos também podem ser ativados em nível por coluna em Ignite UI for React, o que significa que você só pode ativar para colunas que precisar.IgrTreeGrid Resumos te dão um conjunto pré-definido de resumos padrão, dependendo do tipo de dado na coluna, para que você possa economizar tempo:

Parastring eboolean dataType, a seguinte função está disponível:

Contar

Paranumber ecurrencypercent tipos de dados, as seguintes funções estão disponíveis:

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

Para odate tipo de dado, 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.

IgrTreeGridResumos são ativados por coluna ao definirhasSummary a propriedade como True. Também é importante lembrar que os resumos de cada coluna são resolvidos de acordo com o tipo de dado da coluna. NaIgrTreeGrid coluna padrão, o tipo de dado éstring, então se você quisernumber resumosdate específicos, deve especificar adataType propriedade comonumber ou.date Note que os valores resumidos serão exibidos localizados, de acordo com a gradelocale e a colunapipeArgs.

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

Outra forma de ativar/desativar resumos para uma coluna específica ou uma lista de colunas é usar o métodoenableSummaries público/disableSummaries of.IgrTreeGrid

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

<IgrTreeGrid autoGenerate={false} data={ordersTreeData} ref={treeGridRef} 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

summaryTemplateMira o resumo da coluna, fornecendo como contexto os resultados do resumo da coluna.

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

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

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

Disabled Summaries

The disabledSummaries property provides precise per-column control over the React Tree Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgrTreeGrid, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as ['count', 'min', 'max'] by specifying their summary keys in an array.

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.

The following examples illustrate how to use the disabledSummaries property to manage summaries for different columns and exclude specific default and custom summary types in the React Tree Grid:

<!-- 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']}
/>

PoisUnitPrice, resumos padrão comocount,sum, eaverage estão desativados, deixando outros comomin emax ativos.

ParaUnitsInStock resumos personalizados comodiscontinued etotalDiscontinued são excluídos usando adisabledSummaries propriedade.

Em tempo de execução, resumos também podem ser desativados dinamicamente usando adisabledSummaries propriedade. Por exemplo, você pode definir ou atualizar a propriedade em colunas específicas programaticamente para adaptar os resumos exibidos com base em ações do usuário ou mudanças no estado da aplicação.

Formatting summaries

Por padrão, os resultados resumidos, produzidos pelos operandos de resumo embutidos, são localizados e formatados de acordo com a gradelocale e a colunapipeArgs. Ao usar operandos personalizados, oslocale epipeArgs não são aplicados. Se você quiser alterar a aparência padrão dos resultados resumidos, pode formatá-los usando asummaryFormatter propriedade.

const 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={summaryFormatter}></IgrColumn>

Child Summaries

OIgrTreeGrid suporte resumos separados para os nós raiz e para cada nível de nó filho aninhado. Quais resumos são mostrados pode ser configurado usando asummaryCalculationMode propriedade. Os resumos em nível filho podem ser mostrados antes ou depois dos nós filhos usando asummaryPosition propriedade. Junto com essas duas propriedades, osIgrTreeGrid exposes eshowSummaryOnCollapse a propriedade que permite determinar se a linha resumida permanece visível quando o nó pai ao qual se refere é colapsado.

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

RootLevelOnly- 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 tanto para níveis raiz quanto para filhos. Esse é o valor padrão.

Os valores disponíveis dosummaryPosition 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 filhas. Esse é o valor padrão.

AshowSummaryOnCollapse propriedade é booleana. Seu valor padrão é definido como falso, o que significa que a linha de resumo ficaria oculta quando a linha pai for colapsada. Se a propriedade for definida como verdadeira, a linha de resumo permanece visível quando a linha pai é colapsada.

[!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