Angular ピボット グリッド機能

ピボットおよびフラット グリッド コンポーネント クラスは、共通ベースを継承しているため、いくつかの機能を共有しています。

Note

一部の機能は、ピボット テーブルのコンテキストで意味のある動作をしないため、IgxPivotGrid で有効にできません。以下が含まれます。

• CRUD 操作
• グループ化
• 行 / 列のピン固定
• 集計
• ページング

ピボット グリッド コンポーネントには、以下で説明するように、そのディメンションに関連する追加の機能があります。

ディメンション フィルタリング

すべてのディメンション (フィルター、行、列) は、チップ UI または API を介してフィルター処理できます。この機能は埋め込まれており、デフォルトで有効になっています。

Note

フィルタリング ディメンションを使用して、ピボット ビューの一部ではないデータ値を除外できます。

フィルタリング UI は、ディメンション チップ フィルターア イコンを介して開くことができ、一意のディメンション値の Excel スタイルのフィルタリングを可能にします。

Note

すべてのフィルタリング チップに十分なスペースがない場合、ピボット グリッドには、ドロップダウンに切り取られたものが表示されます。エンドユーザーはそこでアクセスして操作できます。

ディメンションは、ディメンションの filter プロパティを使用して pivotConfiguration のディメンション構成を介して最初にフィルター処理することもできます。これは、関連するフィルター条件を使用して新しい FilteringExpressionsTree に設定できます。例えば:

public filterExpTree = new FilteringExpressionsTree(FilteringLogic.And);

constructor() {
    this.filterExpTree.filteringOperands = [
        {
            condition: IgxStringFilteringOperand.instance().condition('equals'),
            fieldName: 'SellerName',
            searchVal: 'Stanley'
        }
    ];
}

public pivotConfigHierarchy: IPivotConfiguration = {
    filters: [
        {
            memberName: 'SellerName',
            enabled: true,
            filter: this.filterExpTree
        }
    ]
}

ディメンションのソート

行または列のディメンション値は、関連するチップまたは API を介してソートすることができます。この機能は埋め込まれており、デフォルトで有効になっています。

関連するチップをクリックするとディメンションがソートされ、その結果、ディメンション値が昇順/降順でソートされます。

ソートは、ディメンション定義の sortDirection プロパティを介して最初に適用することもできます。

public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        {
            memberName: 'SellerName',
            enabled: true,
            sortDirection: SortingDirection.Asc
        }
    ]
}

ディメンションのサイズ変更

行のサイズは、列のサイズ変更と同様に、セルの右端にあるサイズ変更インジケーターを介してサイズ変更できます。 サイズ変更インジケーターをダブルクリックするか、関連する API (autoSizeRowDimension) を使用して、自動サイズ設定することもできます。

ディメンション定義で使用可能な width プロパティを使用して、最初に別のサイズを設定することもできます。

public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        {
            memberName: 'Country',
            enabled: true,
            width: '400px'
        }
    ]
}

Note

バージョン 18.0.0 以降、Ignite UI for Angular では行ディメンションの width を auto に設定できます。

ディメンションの選択

ピボット グリッドは、ベース グリッドと同じように有効になる単一選択をサポートします。例:

<igx-pivot-grid #grid1 [rowSelection]="'single'" [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>

複数の行/列にまたがるグループを作成する複数の行または列のディメンションがある場合、選択は、選択されたグループに属するすべてのセルに適用されます。

スーパー コンパクト モード

IgxPivotGrid コンポーネントは、superCompactMode @Input を提供します。一度にたくさんのセルが画面に表示させる必要がある場合に適しています。有効にすると、このオプションはピボット グリッドの ig-size 変数を無視します。superCompactMode を有効にすると、superCompactMode オプションがない子コンポーネント (IgxChip など) ごとに ig-size 変数が ig-size-small に設定されます。

<igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid>

集計列の追加

column ディメンションが階層を定義すると、ピボット グリッドは追加の集計/合計列を描画し、グループ内のすべての列の集計を蓄積します。グループが縮小されている場合、集計列のみが残ります。また、グループを展開すると、グループの最後に追加の集計列が表示されます。

行ディメンションのヘッダー

バージョン 18.0.0 以降では、Ignite UI for Angular の幅値のヘッダーは pivotUI オプションを通じて有効にできます。

<igx-pivot-grid [pivotUI]="{ showRowHeaders: true }">
</igx-pivot-grid>

行ディメンションのレイアウト

IgxPivotGridComponent は、行ディメンションのレンダリングについて 2 通りの方法をサポートしています。これは、pivotUI オプションの rowLayout プロパティを設定することで制御できます。

  <igx-pivot-grid [pivotUI]="pivotUI">
  </igx-pivot-grid>

public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal };

グリッドのデフォルトのレイアウトは Vertical です。このモードでは、ディメンションの階層が垂直に展開されます。代わりに Horizontal を使用することもできます。このモードでは、展開された単一行ディメンションの子は、同じ親の複数行レイアウトで水平に表示されます。以下のサンプルでは、​​2 つのモードを切り替えて比較できます。

Horizo​​ntal モードでは、親行が縮小されていない限り、親行ディメンションの集計は表示されないことに注意してください。 行集計に親ディメンションを表示するには、関連するディメンションの horizo​​ntalSummary プロパティを有効にします。

rows: [
    {
        memberFunction: () => 'All Products',
        memberName: 'AllProducts',
        enabled: true,
        horizontalSummary: true,
        width: "150px",
        childLevel: {
            //...
        }
    }
]

さらに、pivotUI オプションの horizontalSummariesPosition プロパティで集計の位置を変更できます。これは、Top (デフォルト) または Bottom に設定できます。

public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom };

Note

行集計関連のオプション (horizontalSummary および horizontalSummariesPosition) は、Horizontal レイアウト モードにのみ適用されます。

インタラクション

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

IgxPivotGrid のキーボード ナビゲーションは、IgxGrid のキーボード ナビゲーションと同様に機能します。ピボット グリッドは、rows、columns、values の 3 つの領域に分割されます。rows と columns の領域はナビゲーションの目的でヘッダーと見なされ、values の領域は本文です。 キーボードの矢印を使用すると、現在の領域内でのみアクティブな要素をナビゲートできます。

ディメンションのドラッグアンドドロップ

ディメンションはチップで表現され、ドラッグアンドドロップが可能です。 すべてのチップは、ドラッグアンドドロップでエリア内の順序を変更できます。 rows、column、filter (ディメンション チップ) のチップは、これらの領域のいずれかから他の任意の場所に移動できます。 これらの領域のチップは values 領域に移動できず、values 領域のチップはどのディメンション領域にも移動できません。

Note

ピボット グリッドのチップをピボット データ セレクターに移動したり、ピボット データ セレクターの項目をピボット グリッドに移動したりすることはできません。

API リファレンス

• IgxPivotGridComponent
• IgxPivotDataSelectorComponent

その他のリソース

• Angular ピボット グリッド機能
• Angular ピボット グリッド カスタム集計

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

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