React Hierarchical Grid 集計

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

    React Hierarchical Grid 集計概要の例

    EXAMPLE
    TSX
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

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

    • Count

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

    • Count
    • Min
    • Max
    • Average
    • Sum

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

    • Count
    • Earliest
    • Latest

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

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

    <IgrHierarchicalGrid autoGenerate="false" data={this.singersData} ref={this.hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID">
    <IgrColumn field="Artist" header="Artist" hasSummary="true"></IgrColumn>
    <IgrColumn field="Photo" header="Photo" dataType="Image"></IgrColumn>
    <IgrColumn field="Debut" header="Debut" hasSummary="true"></IgrColumn>
    <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="Number" hasSummary="true"></IgrColumn>
    <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="Number" hasSummary="true"></IgrColumn>
    <IgrRowIsland childDataKey="Albums" autoGenerate="false">
        <IgrColumn field="Album" header="Album" dataType="String"></IgrColumn>
        <IgrColumn field="LaunchDate" header="Launch Date" dataType="Date"></IgrColumn>
        <IgrColumn field="BillboardReview" header="Billboard Review" dataType="Number" hasSummary="true"></IgrColumn>
        <IgrColumn field="USBillboard200" header="US Billboard 200" dataType="Number" hasSummary="true" ></IgrColumn>
     </IgrRowIsland>
</IgrHierarchicalGrid>
tsx

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

    function enableSummary() {
    hierarchicalGridRef.current.enableSummaries([
        {fieldName: 'GrammyNominations'},
        {fieldName: 'GrammyAwards'}
    ]);
}
function disableSummary() {
    hierarchicalGridRef.current.disableSummaries(['GrammyNominations']);
}

<IgrHierarchicalGrid autoGenerate="false" data={this.singersData} ref={this.hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID">
    <IgrColumn field="Artist" header="Artist" hasSummary="true"></IgrColumn>
    <IgrColumn field="Photo" header="Photo" dataType="Image"></IgrColumn>
    <IgrColumn field="Debut" header="Debut" hasSummary="true"></IgrColumn>
    <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="Number" hasSummary="true"></IgrColumn>
    <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="Number" hasSummary="true"></IgrColumn>
</IgrHierarchicalGrid>
<button onClick={enableSummary}>Enable Summary</button>
<button onClick={disableSummary}>Disable Summary </button>
tsx

    集計テンプレート

    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>
tsx

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

    EXAMPLE
    TSX
    CSS
    Edit in:

    無効な集計

    disabledSummaries プロパティは、React Hierarchical Grid の集計機能に対して列ごとに正確な制御を提供します。このプロパティを使用すると、IgrHierarchicalGrid 内の各列に表示される集計をカスタマイズして、最も関連性の高い意味のあるデータのみが表示されるようにすることができます。たとえば、配列で集計キーを指定することにより、['count', 'min', 'max'] などの特定の集計タイプを除外できます。

    このプロパティは、コードを通じて実行時に動的に変更することもできるため、変化するアプリケーションの状態やユーザー操作に合わせて IgrHierarchicalGrid の集計を柔軟に調整できます。

    次の例は、disabledSummaries プロパティを使用してさまざまな列の集計を管理し、React Hierarchical Grid で特定のデフォルトおよびカスタムの集計タイプを除外する方法を示しています。

    <!-- Disable default summaries -->
<IgrColumn
    field="UnitPrice"
    header="Unit Price"
    dataType="number"
    hasSummary={true}
    disabledSummaries="['count', 'sum', 'average']"
/>

<!-- Disable custom summaries -->
<IgrColumn
    field="UnitsInStock"
    header="Units In Stock"
    dataType="number"
    hasSummary={true}
    summaries={discontinuedSummary}
    disabledSummaries="['discontinued', 'totalDiscontinued']"
/>
tsx

    UnitPrice の場合、count、sum、average などのデフォルトの集計は無効になっており、min や max などの他の集計は有効のままになっています。

    UnitsInStock の場合、discontinued や totalDiscontinued などのカスタム集計は disabledSummaries プロパティを使用して除外されます。

    実行時に、disabledSummaries プロパティを使用して集計を動的に無効にすることもできます。たとえば、特定の列のプロパティをプログラムで設定または更新して、ユーザー操作やアプリケーションの状態の変化に基づいて表示される集計を調整できます。

    EXAMPLE
    TSX
    CSS
    Edit in:

    Ignite UI for React | CTA Banner

    集計のフォーマット

    デフォルトでは、組み込みの集計オペランドによって生成される集計結果は、グリッド 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>
tsx

    EXAMPLE
    TSX
    CSS
    Edit in:

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

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

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

    スタイル設定

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

    <IgrHierarchicalGrid id="hierarchicalGrid">
</IgrHierarchicalGrid>
tsx

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

    #hierarchicalGrid {
    --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;
}
css

    デモ

    EXAMPLE
    TSX
    CSS
    Edit in:

    API リファレンス

    その他のリソース

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