Resúmenes de columnas React

La Tabla de Datos / Cuadrícula de Datos Ignite UI for React admite resúmenes de columnas. En algunos casos, tus usuarios finales pueden sentirse abrumados por la cantidad de datos mostrados en la cuadrícula y, a menudo, pueden estar buscando un resumen de esos datos. Tus usuarios finales también pueden querer obtener información adicional a partir de los datos de una columna específica. Los resúmenes ayudan a tus usuarios finales a lograr esto, y puedes habilitarlos configurando laSummaryScope propiedad.

React Column Summaries Example

Summary Scope Property

La cuadrícula de datos React soporta 4 ajustes de resumen que puedes configurar usando laSummaryScope propiedad. 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 particular.
Both: Esto usará lasGroups opciones yRoot simultáneamente.
None: Esto desactivará los resúmenes de la red.

Group Summary Display Mode Property

La cuadrícula de datos React permite la configuración de las ubicaciones en las que se muestran los resúmenes. Puedes configurarlo usando laGroupSummaryDisplayMode propiedad. 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-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

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