React 열 요약

Ignite UI for React 열 요약을 지원합니다. 어떤 경우에는 최종 사용자가 그리드에 표시되는 데이터의 양에 압도되어 데이터 요약을 찾는 경우가 많습니다. 최종 사용자는 특정 열의 데이터에서 추가 정보를 추출하려고 할 수도 있습니다. 요약은 최종 사용자가 이를 달성하는 데 도움이 되며 summaryScope 속성을 설정하여 요약을 활성화할 수 있습니다.

React Column Summaries Example

Summary Scope Property

React 데이터 그리드는 summaryScope 속성을 사용하여 구성할 수 있는 4가지 요약 설정을 지원합니다. 아래에 이러한 내용이 나열되고 설명되어 있습니다.

• Root: 요약이 적용되는 열에 대한 그리드의 모든 행에 대한 총합계가 표시됩니다.
• Groups: 그룹화된 행에만 적용되며 특정 그룹의 모든 행에 대한 총계를 표시합니다.
• Both: Groups 및 Root 옵션을 동시에 사용합니다.
• None: 그리드에 대한 요약을 비활성화합니다.

Group Summary Display Mode Property

React 데이터 그리드는 요약이 표시되는 위치 구성을 지원합니다. groupSummaryDisplayMode 속성을 사용하여 이를 구성할 수 있습니다. 이 속성에 대한 다양한 옵션이 아래에 나열 및 설명되어 있습니다.

• 목록: 그룹 요약을 스패닝 그룹 헤더의 단순 목록으로 렌더링합니다.
• 셀: 그룹 헤더를 셀로 렌더링하고 요약 값은 해당 열에 맞춰 셀 내부에 렌더링됩니다. 이 옵션을 사용하면 그리드에 열당 단일 요약만 표시됩니다.
• RowTop: 그룹 요약을 그룹 상단의 요약 행으로 렌더링합니다.
• RowBottom: 그룹 요약을 그룹 하단의 요약 행으로 렌더링합니다.
• 없음: 그룹 요약 렌더링이 비활성화됩니다.

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

어떤 상황에서는 기본 요약 세트를 확장해야 할 수도 있습니다. 예를 들어, 열의 특정 값이 나타나는 횟수를 표시하려는 경우 이를 위해서는 사용자 정의 요약이 필요합니다.

아래 조각은 열에 나타나는 "USA" 값의 개수를 표시하는 방법을 보여줍니다.

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

API References

• IgrGrid
• groupSummaryDisplayMode
• summaryScope