[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Web Components Column Summaries

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

Web Components Column Summaries Example

Summary Scope Property

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

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

Group Summary Display Mode Property

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

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

Code Snippets

<igc-data-grid
    summary-scope="Root"
    group-summary-display-mode="RowTop"
    auto-generate-columns="false"
    is-group-collapsable="true"
    group-header-display-mode="combined"
    default-column-min-width="100">
        <igc-text-column field="ProductName" header-text="Product"></igc-text-column>
        <igc-numeric-column positive-prefix="$" field="BundlePrice" show-grouping-separator="true" header-text="Price" ></igc-numeric-column>
        <igc-numeric-column field="OrderItems" header-text="Order Items"></igc-numeric-column>
        <igc-numeric-column field="OrderValue" show-grouping-separator="true" header-text="Order Totals" positive-prefix="$"></igc-numeric-column>
        <igc-text-column field="Countries" header-text="Ship Country"></igc-text-column>
</igc-data-grid>

import { IgcColumnGroupDescription } from 'igniteui-webcomponents-grids';
import { IgcColumnSummaryDescription } from 'igniteui-webcomponents-grids'
import { SummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-webcomponents-core';

connectedCallback() {

    // Count Operand
    const productCount = new IgcColumnSummaryDescription();
    productCount.field = "ProductName";
    productCount.operand = SummaryOperand.Count;
    this.grid.summaryDescriptions.add(productCount);
    // Min Operand with formatting
    const priceMin = new IgcColumnSummaryDescription();
    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 IgcColumnSummaryDescription();
    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 IgcColumnSummaryDescription();
    orderSum.field = "OrderItems";
    orderSum.operand = SummaryOperand.Sum;
    this.grid.summaryDescriptions.add(orderSum);
    // Average Operand and formatting
    const orderValueAvg = new IgcColumnSummaryDescription();
    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 { IgcProvideCalculatorEventArgs } from 'igniteui-webcomponents-core';

onLoad() {

    const countries = new IgcColumnSummaryDescription();
    countries.field = "Countries";
    countries.operand = SummaryOperand.Custom;
    countries.provideCalculator = this.onProvideCalculator; //refer to class below
    this.grid.summaryDescriptions.add(countries);

}

onProvideCalculator(s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) {
    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++;
       }
    }
}

Web Components Column Summaries