Resumos de colunas React

O Ignite UI for React Data Table / Data Grid suporta resumos de colunas. Em alguns casos, seus usuários finais podem ficar sobrecarregados com a quantidade de dados exibidos na grade e, muitas vezes, podem estar procurando um resumo dos dados. Seus usuários finais também podem querer derivar informações adicionais dos dados de uma coluna específica. Os resumos ajudam seus usuários finais a conseguir isso, e você pode habilitá-los definindo a propriedade summaryScope.

React Column Summaries Example

Summary Scope Property

O React data grid suporta 4 configurações de resumo que você pode configurar usando a propriedade summaryScope. Elas estão listadas e descritas abaixo:

Root: Isso exibirá um total geral para todas as linhas na grade da coluna à qual o resumo é aplicado.
Groups: isso é específico para linhas agrupadas e mostra o total geral de todas as linhas em um grupo específico.
Both: isso usará as opções Groups e Root simultaneamente.
None: isso desabilitará os resumos da grade.

Group Summary Display Mode Property

A grade de dados React suporta a configuração dos locais em que os resumos são exibidos. Você pode configurar isso usando a propriedade groupSummaryDisplayMode. As diferentes opções para essa propriedade são listadas e descritas abaixo:

Lista: Isso renderizará os resumos do grupo em uma lista simples no cabeçalho do grupo abrangente.
Células: Isso renderizará o cabeçalho do grupo como células, e os valores de resumo serão renderizados dentro das células, alinhados com suas colunas correspondentes. A grade exibirá apenas um único resumo por coluna usando esta opção.
RowTop: Isso renderizará os resumos do grupo como linhas de resumo no topo do grupo.
RowBottom: Isso renderizará os resumos do grupo como linhas de resumo na parte inferior do grupo.
Nenhum: isso desabilitará a renderização do resumo do grupo.

Code Snippets

<IgrDataGrid
    summaryScope = "Groups"
    groupSummaryDisplayMode = "RowTop"
    height="calc(100% - 40px)"
    width="100%"
    autoGenerateColumns="false"
    dataSource={this.data}>
        <IgrTextColumn field="ProductName" headerText="Product"/>
        <IgrNumericColumn positivePrefix="$" field="BundlePrice" showGroupingSeparator="true" headerText="Price" />
        <IgrNumericColumn field="OrderItems" headerText="Order Items"/>
        <IgrNumericColumn field="OrderValue" showGroupingSeparator="true" headerText="Order Totals"
        positivePrefix="$"  />
        <IgrTextColumn field="Countries" headerText="Ship Country"/>
</IgrDataGrid>

import { IgrColumnGroupDescription } from 'igniteui-react-data-grids';
import { IgrColumnSummaryDescription } from 'igniteui-react-data-grids'
import { SummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-react-core';

public componentDidMount() {
    window.addEventListener('load', this.onLoad);
}

public onLoad() {
    // Count Operand
    const productCount = new IgrColumnSummaryDescription();
    productCount.field = "ProductName";
    productCount.operand = SummaryOperand.Count;
    this.grid.summaryDescriptions.add(productCount);
    // Min Operand with formatting
    const priceMin = new IgrColumnSummaryDescription();
    priceMin.field = "BundlePrice";
    priceMin.operand = SummaryOperand.Min;
    priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
    this.grid.summaryDescriptions.add(priceMin);
    // Max Operand and formatting
    const priceMax = new IgrColumnSummaryDescription();
    priceMax.field = "BundlePrice";
    priceMax.operand = SummaryOperand.Max;
    priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
    this.grid.summaryDescriptions.add(priceMax);
    // Sum Operand
    const orderSum = new IgrColumnSummaryDescription();
    orderSum.field = "OrderItems";
    orderSum.operand = SummaryOperand.Sum;
    this.grid.summaryDescriptions.add(orderSum);
    // Average Operand and formatting
    const orderValueAvg = new IgrColumnSummaryDescription();
    orderValueAvg.field = "OrderValue";
    orderValueAvg.operand = SummaryOperand.Average;
    orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
    this.grid.summaryDescriptions.add(orderValueAvg);
}

Custom Summaries

Em algumas situações, você pode querer expandir o conjunto padrão de resumos. Por exemplo, se você estivesse procurando mostrar o número de vezes que um valor específico em uma coluna aparece, um resumo personalizado seria necessário para isso.

Os snippets abaixo demonstram como exibir uma Contagem para o número de valores "EUA" que aparecem na coluna.

import { IgrProvideCalculatorEventArgs } from 'igniteui-react-core';

public onLoad()
{
    // ...
    // Custom Operand with calculator
    const countries = new IgrColumnSummaryDescription();
    countries.field = "Countries";
    countries.operand = SummaryOperand.Custom;
    countries.provideCalculator = this.onProvideCalculator; //refer to class below
    this.grid.summaryDescriptions.add(countries);

}

onProvideCalculator(s: IgrColumnSummaryDescription, e: IgrProvideCalculatorEventArgs) {
    e.calculator = new CustomDomestic();
}

// Custom Calculator - calculates the count for all USA.
class CustomDomestic extends SummaryCalculator
{
    get displayName(): string {
        return "USA";
    }
    public usCountries: number;

    public beginCalculation(a: IDataSource, b: string): void {
        super.beginCalculation(a,b);
        this.usCountries = 0;
    }
    public endCalculation(): ISummaryResult {
        return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries)
    }
    public aggregate(a: any): void {
        if (a.Countries === "USA")
        {
            this.usCountries++;
        }
    }
}