React 列集計

    Ignite UI for React Data Table / Data Grid は、列集計をサポートしています。エンドユーザーは、グリッドに表示されるデータ量が多い場合などでデータ集計の表示を必要とすることがあります。エンドユーザーは、特定の列のデータから追加情報を取得することもできます。これを実現するには集計が役立ちます。集計を有効にするには、summaryScope プロパティを設定します。

    React 列集計の例

    SummaryScope プロパティ

    グリッドでは、summaryScope プロパティを使用して、構成できる4つの集計設定をサポートします。集計設定は以下のとおりです。

    • Root: 集計が適用される列にグリッド全体の行の総計を表示します。
    • Groups: これはグループ化された行に対して有効です。特定のグループ内の行の総計を表示します。
    • Both: GroupsRoot オプションを同時に使用します。
    • None: グリッドの集計を無効にします。

    GroupSummaryDisplayMode プロパティ

    グリッドは、集計が表示される場所の構成をサポートします。これを構成するには、groupSummaryDisplayMode プロパティを使用します。このプロパティのオプションは以下のとおりです。

    • List: グループ集計をスパン グループ ヘッダーのフラット リストにレンダリングします。
    • Cells: グループ ヘッダーをセルとしてレンダリングし、集計値を対応する列に揃えてセル内にレンダリングします。グリッドは、このオプションを使用して列ごとに 1 つの集計のみを表示します。
    • RowTop: グループ集計をグループの上部に集計行としてレンダリングします。
    • RowBottom: グループ集計をグループの下部に集計行としてレンダリングします。
    • None: グループ集計のレンダリングを無効にします。

    コード スニペット

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

    カスタム集計

    デフォルトの集計セットを拡張したい場合があります。たとえば、列の特定の値が表示される回数を表示する場合、カスタム集計が必要です。

    以下のスニペットは、列に表示される 「USA」 値の数の Count を表示する方法を示します。

    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 リファレンス