グリッドのグループ化

igxGrid は、列グループ値に基づいて階層グループのデータ レコードを可視化できる列グループをサポートします。グループは展開または縮小でき、グループの順序は UI または API で変更できます。

デモ


初期のグループ化状態

グリッドの初期のグループ化状態を設定するには、式の配列をグリッドの groupingExpressions プロパティに設定します。

public ngOnInit() {
    grid.groupingExpressions = [
        { fieldName: 'ProductName', dir: SortingDirection.Desc },
        { fieldName: 'Released', dir: SortingDirection.Desc }
    ];
}

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

グループ化 API

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

<igx-grid [data]="data">
    <igx-column *ngFor="let c of columns" [field]="c.field" [groupable]="true">
    </igx-column>
</igx-grid>
public ngOnInit() {
    grid.columns.forEach((column) => {
        column.groupable = true;
    });
}

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

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

グループ化は、並べ替えおよびグループ式が列がグループ化されずに並べ替えられた場合も並べ替えされた列として適用される場合に可能です。グループ式は sortingExpressions プロパティにあり、グループ列の式が常に最初になるよう並べ替えます。並べ替え API は、グループ化された列の式を変更した場合にグルーピングに影響があります。グループ式 (列グループ解除) を削除して並べ替えを解除します。

グループ式の他にグループ行の展開も制御できます。igxGrid コンポーネント groupingExpansionState の別のプロパティに保存されます。グループ行は、作成されたフィールド名とグループ化の各レベルを表す値に基づいて識別されます。以下は展開状態のインターフェイスのシグネチャです。

export interface IGroupByKey {
    fieldName: string;
    value: any;
}

export interface IGroupByExpandState {
    hierarchy: Array<IGroupByKey>;
    expanded: boolean;
}

groupingExpressionsIGroupByExpandState のリストを直接 groupingExpansionState に設定すると展開が変更されます。igxGrid はグループ レコード インスタンスでトグルするメソッドを公開します。

    const groupRow = this.grid.groupsRecords.find(r => r.value === "France");
    grid.toggleGroup(groupRow);

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

グループ行テンプレート

UI の展開/縮小なしのグループ行は完全なテンプレート化が可能です。デフォルトでグループ アイコンを描画し、フィールド名と値を表示します。テンプレートが描画されるレコードのグループ化には、以下のシグネチャがあります。

export interface IGroupByRecord {
    expression: ISortingExpression;
    level: number;
    records: GroupedRecords;
    value: any;
    groupParent: IGroupByRecord;
    groups?: IGroupByRecord[];
}

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

<ng-template igxGroupByRow let-groupRow>
    <span>Total items with value: {{ groupRow.value }} are {{ groupRow.records.length }}</span>
</ng-template>

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

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

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

    • ALT + RIGHT - グループの展開
    • ALT + LEFT - グループの縮小
  • グループ領域の igxChip コンポーネントのグループ化 (チップにフォーカス)

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

既知の問題と制限

制限 説明
グループ列の最大値は 10 です。 10 列以上の場合はエラーがスローされます。

API

その他のリソース

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