React Pivot Grid 機能

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

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

ディメンションのソート

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

関連するチップをクリックするとディメンションが並べ替えられ、その結果、ディメンション値が昇順 / 降順で並べ替えられます。

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

const dimension: IgrPivotDimension = {
    memberName: "SellerName",
    enabled: true,
    sortDirection: SortingDirection.Asc
};

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

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

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

const igrPivotDimension2: IgrPivotDimension = {
    memberName: "SellerName",
    enabled: true,
    width = "400px"
};

ディメンションの選択

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

<IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration} rowSelection="single">
</IgrPivotGrid>

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

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

IgrPivotGrid コンポーネントは、SuperCompactMode 入力を提供します。一度にたくさんのセルが画面に表示させる必要がある場合に適しています。有効にすると、このオプションは Pivot Grid の --ig-size CSS 変数を無視します。SuperCompactMode を有効にすると、SuperCompactMode オプションがない子コンポーネント (IgrChip など) ごとに --ig-size が small に設定されます。

<IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration} superCompactMode={true}>
</IgrPivotGrid>

追加の集計列

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

インタラクション

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

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

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

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

API リファレンス

その他のリソース

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