Premium

Angular ピボットグリッド機能

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

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

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

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

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

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

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

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

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

ディメンションは、ディメンションの 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'
        }
    ]
}

バージョン 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 つのモードを切り替えて比較できます。

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

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 };

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

インタラクション

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

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

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

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

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

API リファレンス

その他のリソース

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

Angular ピボット グリッド機能

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