Resúmenes de columnas React

La Ignite UI for React Data Table/Data Grid admite resúmenes de columnas. En algunos casos, los usuarios finales pueden sentirse abrumados por la cantidad de datos que se muestran en la cuadrícula y, a menudo, pueden estar buscando un resumen de los datos. Es posible que sus usuarios finales también quieran obtener información adicional de los datos de una columna específica. Los resúmenes ayudan a sus usuarios finales a lograr esto y puede habilitarlos configurando la propiedad summaryScope.

React Column Summaries Example

Summary Scope Property

La cuadrícula de datos React admite 4 configuraciones de resumen que puede configurar usando la propiedad summaryScope. Estos se enumeran y describen a continuación:

Root: esto mostrará un total general para todas las filas de la cuadrícula de la columna a la que se aplica el resumen.
Groups: esto es específico de filas agrupadas y muestra el total general de todas las filas de un grupo en particular.
Both: Esto utilizará las opciones Groups y Root simultáneamente.
None: esto deshabilitará los resúmenes de la cuadrícula.

Group Summary Display Mode Property

La cuadrícula de datos React admite la configuración de las ubicaciones en las que se muestran los resúmenes. Puede configurar esto utilizando la propiedad groupSummaryDisplayMode. Las diferentes opciones para esta propiedad se enumeran y describen a continuación:

Lista: esto mostrará los resúmenes del grupo en una lista plana en el encabezado del grupo que abarca.
Celdas: esto representará el encabezado del grupo como celdas y los valores de resumen se representarán dentro de las celdas, alineados con su columna correspondiente. La cuadrícula solo mostrará un resumen por columna usando esta opción.
RowTop: esto mostrará los resúmenes del grupo como filas de resumen en la parte superior del grupo.
RowBottom: esto mostrará los resúmenes del grupo como filas de resumen en la parte inferior del grupo.
Ninguno: esto deshabilitará la representación del resumen del 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-grids';
import { IgrColumnSummaryDescription } from 'igniteui-react-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

En algunas situaciones, es posible que desee ampliar el conjunto predeterminado de resúmenes. Por ejemplo, si quisiera mostrar la cantidad de veces que aparece un valor particular en una columna, sería necesario un resumen personalizado para ello.

Los fragmentos siguientes demuestran cómo mostrar un recuento del número de valores "EE. UU." que aparecen en la columna.

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++;
        }
    }
}