[!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-data-grids';
import { IgcColumnSummaryDescription } from 'igniteui-webcomponents-data-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