React Grid 集計

React Grid の Ignite UI for React 集計機能は、グループフッターとして列ごとのレベルで機能します。React IgrGrid 集計は、列内のデータタイプに応じて、あるいは IgrGrid にカスタムテンプレートを実装することによって、定義済みのデフォルト集計項目を使用して別のコンテナの列情報を表示できます。

React Grid 集計概要の例

[!Note] 列の集計は列値すべての関数ですが、フィルタリングが適用された場合、列の集計はフィルターされた結果値の関数になります。

IgrGrid 集計を列ごとに有効にして必要な列のみアクティブ化できます。IgrGrid 集計は、列のデータ型に基づいてデフォルト集計の定義済みセットを提供します。

string および boolean dataTypeの場合、以下の関数が利用できます:

Count

number、currency、および percent データ型の場合、以下の関数を使用できます。

Count
Min
Max
Average
Sum

date データ型の場合、以下の関数が利用できます:

Count
Earliest
Latest

すべての利用可能な列データ型は、公式の列タイプトピックにあります。

hasSummary プロパティを true に設定すると IgrGrid 集計が列レベルで有効になります。各列の集計は列のデータ型に基づいて解決されます。IgrGrid のデフォルトの列データ型は string のため、number または date 固有の集計を適用するには、dataType プロパティを number または date に設定します。集計値は、グリッドの locale および列 pipeArgs に従ってローカライズされて表示されます。

<IgrGrid autoGenerate="false" height="800px" width="800px">
    <IgrColumn field="ProductID" header="Product ID" width="200px"  sortable="true">
    </IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" width="200px" sortable="true" hasSummary="true">
    </IgrColumn>
    <IgrColumn field="ReorderLevel" width="200px" editable="true" dataType="number" hasSummary="true">
    </IgrColumn>
</IgrGrid>

特定の列や列のリストを有効または無効にする他の方法として IgrGrid のパブリックメソッド enableSummaries/disableSummaries を使用する方法があります。

function enableSummary() {
    gridRef.current.enableSummaries([
        {fieldName: 'ReorderLevel'},
        {fieldName: 'ProductID'}
    ]);
}
function disableSummary() {
    gridRef.current.disableSummaries(['ProductID']);
}

<IgrGrid ref={gridRef} auto-generate="false" height="800px" width="800px">
    <IgrColumn field="ProductID" header="Product ID" width="200px" sortable="true">
    </IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" width="200px" sortable="true" hasSummary="true">
    </IgrColumn>
    <IgrColumn field="ReorderLevel" width="200px" editable="true" dataType="number" hasSummary="false">
    </IgrColumn>
</IgrGrid>
<button onClick={enableSummary}>Enable Summary</button>
<button onClick={disableSummary}>Disable Summary </button>

集計テンプレート

Summary は、列の集計の結果をコンテキストとして提供する列の集計を対象としています。

function summaryTemplate(ctx: IgrSummaryTemplateContext) {
  return (
    <>
      <span>My custom summary template</span>
      <span>{ctx.dataContext.implicit[0].label} - {ctx.dataContext.implicit[0].summaryResult}</span>
    </>
  );
}

<IgrColumn hasSummary="true" summaryTemplate={summaryTemplate}></IgrColumn>

デフォルトの集計が定義されている場合、集計領域の高さは、集計の数が最も多い列とグリッドの表示密度に応じてデザインにより計算されます。summaryRowHeight 入力プロパティを使用して、デフォルト値をオーバーライドします。引数として数値が必要であり、falsy の値を設定すると、グリッドフッターのデフォルトのサイズ設定動作がトリガーされます。

集計のフォーマット

デフォルトでは、組み込みの集計オペランドによって生成される集計結果は、グリッド locale および列 pipeArgs に従ってローカライズおよびフォーマットされます。カスタムオペランドを使用する場合、locale と pipeArgs は適用されません。集計結果のデフォルトの外観を変更する場合は、summaryFormatter プロパティを使用してフォーマットできます。

public summaryFormatter(
    summary: IgrSummaryResult,
    summaryOperand: IgrSummaryOperand
  ): string {
    const result = summary.summaryResult;
    if (summary.key !== "count" && result !== null && result !== undefined) {
      const format = new Intl.DateTimeFormat("en", { year: "numeric" });
      return format.format(new Date(result));
    }
    return result;
  }
  
<IgrColumn hasSummary="true" summaryFormatter={this.summaryFormatter}></IgrColumn>

グループ化の集計

列のグループがある場合、IgrGrid は summaryCalculationMode と summaryPosition を使用して集計配置の変更やモードの計算をします。これら 2 つのプロパティに加えて、IgrGrid は、参照するグループ行が縮小されたときに集計行が表示されたままであるかどうかを決定できる showSummaryOnCollapse プロパティを公開します。

以下は使用できる summaryCalculationMode プロパティの値です:

RootLevelOnly - ルートレベルのみ集計が計算されます。
ChildLevelsOnly - 子レベルのみ集計が計算されます。
RootAndChildLevels - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。

以下は使用できる summaryPosition プロパティの値です。

Top - 集計行はグループ列の子の前に表示されます。
Bottom - 集計行はグループ列の子の後に表示されます。これがデフォルト値です。

showSummaryOnCollapse プロパティはブール値です。デフォルト値は false に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが true に設定されている場合、グループ行が縮小されたときに、集計行は表示されたままになります。

[!Note] summaryPosition プロパティは子レベルの集計のみに適用します。ルートレベルの集計は、IgrGrid の下に常に固定されます。

デモ

キーボードナビゲーション

集計行は、以下のキーボード操作でナビゲーションできます。

上矢印 - 1 つ上のセルへ移動。
下矢印 - 1 つ下のセルへ移動。
左矢印 - 1 つ左のセルへ移動。
右矢印 - 1 つ右のセルへ移動。
CTRL + 左矢印 または HOME - 左端のセルへ移動。
CTRL + 右矢印 または END - 右端のセルへ移動。

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgrGrid className="grid">
</IgrGrid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-summary-background-color:#e0f3ff;
    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
    --ig-grid-summary-label-color: rgb(228, 27, 117);
    --ig-grid-summary-result-color: black;
}

デモ

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

React Grid 集計