React 列集計
Ignite UI for React Data Table / Data Grid は、列集計をサポートしています。エンドユーザーは、グリッドに表示されるデータ量が多い場合などでデータ集計の表示を必要とすることがあります。エンドユーザーは、特定の列のデータから追加情報を取得することもできます。これを実現するには集計が役立ちます。集計を有効にするには、summaryScope
プロパティを設定します。
React 列集計の例
SummaryScope プロパティ
グリッドでは、summaryScope
プロパティを使用して、構成できる4つの集計設定をサポートします。集計設定は以下のとおりです。
Root
: 集計が適用される列にグリッド全体の行の総計を表示します。Groups
: これはグループ化された行に対して有効です。特定のグループ内の行の総計を表示します。Both
:Groups
とRoot
オプションを同時に使用します。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++;
}
}
}