Web Components Grid グループ化

Web Components IgcGrid の Ignite UI for Web Components グループ化動作は、列の値に基づいてグループ化されたデータ行を作成します。Grid の グループ化では、グループを階層構造で視覚化できます。グループデータ行は展開または縮小でき、グループの順序は UI または API で変更できます。行選択を有効にすると、グループ化行セレクターがグループ行の一番左の領域に描画されます。RowSelection プロパティが単一に設定されている場合、チェックボックスは無効になり、選択が行われるグループの表示としてのみ機能します。RowSelection プロパティが複数に設定されている場合、グループ化行セレクターをクリックすると、このグループに属するすべてのレコードが選択されます。

Web Components Grid グループ化の例

この例は、大量のデータのグループ化が可能であることを示しています。列ヘッダーを一番上 (グループ化領域) にドラッグすると、ユーザーは選択した列のデータを階層構造で表示できます。さらに列ヘッダーを一番上にドラッグすることで、複数のフィールドでグループ化できます。これらのグループ化オプションは、ユーザーが多数の行と列を持つテーブルがあり、はるかに高速で視覚的に受け入れられる方法でデータを表示ようとする場合に役立ちます。

初期のグループ化状態

グリッドの GroupingExpressions プロパティに式の配列を割り当てることによって、グリッドの初期グループ化を定義することができます。

constructor() {
    var grid = document.getElementById("grid") as IgcGridComponent;
    grid.groupingExpressions = [
        { fieldName: 'ProductName', dir: SortingDirection.Desc },
        { fieldName: 'Released', dir: SortingDirection.Desc }
    ];
}

グループ式は、ISortingExpression インターフェイスを実装します。

Group By API

グループ化 API

グループ化は、UI およびグリッド コンポーネントで公開された API で実行できます。各列の Groupable プロパティを true に設定してエンドユーザーは特定の列でグリッド データをグループ化できます。

<igc-grid auto-generate="false" id="grid">
    <igc-column field="OrderID" hidden="true"></igc-column>
    <igc-column field="ShipCountry" header="Ship Country" width="200px" groupable="true"> </igc-column>
    <igc-column field="OrderDate" header="Order Date" data-type="date" width="200px" groupable="true"> </igc-column>
    <igc-column field="PostalCode" header="Postal Code" width="200px" groupable="true"> </igc-column>
    <igc-column field="Discontinued" width="200px" data-type="boolean" groupable="true" name="column1" id="column1"> </igc-column>
    <igc-column field="ShipName" header="Ship Name" width="200px" groupable="true"> </igc-column>
    <igc-column field="ShipCity" header="Ship City" width="200px" groupable="true"> </igc-column>
    <igc-column field="ShipperName" header="Shipper Name" width="200px" groupable="true"> </igc-column>
    <igc-column field="Salesperson" header="Sales Person" width="200px" groupable="true"> </igc-column>
    <igc-column field="UnitPrice" header="Unit Price" width="200px" groupable="true"> </igc-column>
    <igc-column field="Quantity" width="200px" groupable="true"> </igc-column>
</igc-grid>

    constructor() {
        var column1 = (this.column1 = document.getElementById("column1") as IgcColumnComponent);
        column1.groupable = true;
    }

ランタイムの式は groupingExpressions プロパティの取得または設定できます。既存の式を追加または変更する必要がある場合、単一の式または式の配列で GroupBy メソッドを使用してください。

grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true });

展開 / 縮小 API

グループ式の他にグループ行の展開も制御できます。これらは、IgcGroupByExpandState のコレクションである、Grid コンポーネントの別のプロパティ GroupingExpansionState に保存されます。各展開状態は、作成されたフィールド名とグループ化の各レベルで表す値によって一意に定義されます。つまり、識別子は IgcGroupByKey の階層配列です。

GroupingExpressions で IGroupByExpandState のリストを直接 GroupingExpansionState に設定すると展開が変更されます。また、Grid は、グループ レコード インスタンスまたは行の Expanded プロパティによってグループを切り替えるメソッド ToggleGroup を公開します。

    const groupRow = this.grid.getRowByIndex(0).groupRow;
    grid.toggleGroup(groupRow);

    const groupRow = this.grid.getRowByIndex(0);
    groupRow.expanded = false;

グループは展開済み (デフォルト) または縮小済みに作成でき、展開状態は一般的にデフォルト動作の反対の状態のみ含みます。グループを作成して展開するかどうか、または GroupsExpanded プロパティを介すかどうかを制御できます。

グループですべての行を選択 / 選択解除 API

グループ内のすべての行の選択/選択解除は、SelectRowsInGroup および DeselectRowsInGroup API メソッドを介して利用できます。

以下のコードスニペットは、グループ レコード SelectRowsInGroup メソッドを使用してグループ内のすべての行を選択するために使用できます。さらに、このメソッドの2番目のパラメーターはブールプロパティです。それを使用して、前の行の選択をクリアするかどうかを選択できます。以前の選択はデフォルトで保存されます。

    const groupRow = this.grid.getRowByIndex(0).groupRow;
    grid.selectRowsInGroup(groupRow);

プログラムでグループ内のすべての行の選択を解除する必要がある場合は、DeselectRowsInGroup メソッドを使用できます。

    const groupRow = this.grid.getRowByIndex(0).groupRow;
    grid.deselectRowsInGroup(groupRow);

テンプレート

グループ行テンプレート

展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。デフォルトでグループ アイコンを描画し、フィールド名と値を表示します。テンプレートを描画するコンテキストのタイプは IgcGroupByRecord です。

たとえば、以下のテンプレートはグループ行集計でより詳細な情報を表示します。

    public groupByRowTemplate = (ctx: IgcGroupByRowTemplateContext) => {
        const groupRow: IgcGroupByRecord = ctx.implicit;
        return html`<span>Total items with value: ${ groupRow.value } are ${ groupRow.records.length }</span>`;
    }

グループ行セレクター テンプレート

上記のように、展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。カスタムの GroupBy 行セレクター テンプレートを作成するには、GroupByRowSelectorTemplate ディレクティブを使用します。テンプレートから、Group By 行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。

SelectedCount プロパティは、現在選択されているグループ レコードの数を示し、TotalCount はグループに属するレコードの数を示します。

    public groupByRowSelectorTemplate = (ctx: IgcGroupByRowSelectorTemplateContext) => {
        return html`
            ${ ctx.implicit.selectedCount } / ${ ctx.implicit.totalCount  }
        `;
    }

GroupRow プロパティは、グループ行への参照を返します。

    public groupByRowSelectorTemplate = (ctx: IgcGroupByRowSelectorTemplateContext) => {
        const groupRow = ctx.implicit.groupRow;
        return html` <div @click=${(e: any) => this.handleGroupByRowSelectorClick(e, groupRow)} ">Handle groupRow</div> `;
    };

SelectedCount と TotalCount プロパティを使用して、Group By 行セレクターをチェックするか不確定にする (部分的に選択する) かを決定できます。

Web Components Grid ページングによるグループ化

グループ行は、データ行とともにページング プロセスに関係します。それらは各ページのページ サイズにカウントされます。折りたたまれた行はページング プロセスに含まれません。展開または折りたたみ操作を行うと、ページングでページ数が再計算され、必要に応じてページ インデックスが調整されます。 複数のページにまたがるグループは、ページ間で分割されます。グループ行は、開始ページでのみ表示され、後続のページでは繰り返されません。グループ行の要約情報はグループ全体に基づいて計算され、ページングの影響を受けません。

Web Components ページングによるグループ化の例

集計でグループ化

グループ化と要約の統合については、集計トピックで説明しています。

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

グループ UI は、以下のキーボード インタラクションをサポートします。

• グループ行 (行または展開/縮小セルにフォーカス)

  • ALT + 右矢印 - グループを展開します。
  • ALT + 左矢印 - グループを縮小します。
  • SPACE - rowSelection プロパティが multiple に設定されている場合、グループ内のすべての行を選択します。

• グループ領域の Chip コンポーネントのグループ化 (チップにフォーカス)

  • SHIFT + 左矢印 - フォーカスしたチップの左へ移動し、可能な場合はグループ順序を変更します。
  • SHIFT + 右矢印 - フォーカスしたチップの右へ移動し、可能な場合はグループ順序を変更します。
  • SPACE - ソートの方向を変更します。
  • DELETE - フィールドのグループ解除。
  • チップの別の要素をフォーカスでき ENTER キーでインタラクティブに操作できます。

Web Components Grid カスタムグループ化

グリッドでは、列ごとまたはグループ化式ごとにカスタム グループを定義できます。これにより、カスタム条件に基づいてグループ化が提供されます。これは、複雑なオブジェクトごとにグループ化する必要がある場合、または他のアプリケーション固有のシナリオで役立ちます。

Web Components カスタム グループ化の例

このサンプルでは、さまざまな日付条件のカスタム ソートストラテジを定義しています。 各カスタム ストラテジは GroupingComparer メソッドを定義します。値をソートするときに使用されるカスタム比較関数です。さらに、比較に必要な日付から値を抽出します。

public groupByMode = "Month";
public getParsedDate(date: any) {
    return {
        day: date.getDay(),
        month: date.getMonth() + 1,
        year: date.getFullYear()
    };
}

GroupingComparer 関数がグループ化式に対して定義され、選択されたグループ化モードに基づいて同じグループに属するアイテムを決定します。この関数が 0 を返すソートされた値は、同じグループの一部としてマークされます。

public groupByMode = "Month";
public getParsedDate(date: any) {
    return {
        day: date.getDay(),
        month: date.getMonth() + 1,
        year: date.getFullYear()
    };
}

スタイル設定

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

<igc-grid class="grid">

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

<igc-grid class="grid">

デモ

既知の問題と制限

API リファレン

その他のリソース

• Grid の概要
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 列の移動
• 集計
• 列のサイズ変更
• 選択

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

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)