React Grid グループ化
React IgrGrid の Ignite UI for React グループ化動作は、列の値に基づいてグループ化されたデータ行を作成します。IgrGrid
の グループ化では、グループを階層構造で視覚化できます。グループデータ行は展開または縮小でき、グループの順序は UI または API で変更できます。行選択を有効にすると、グループ化行セレクターがグループ行の一番左の領域に描画されます。rowSelection
プロパティが単一に設定されている場合、チェックボックスは無効になり、選択が行われるグループの表示としてのみ機能します。rowSelection
プロパティが複数に設定されている場合、グループ化行セレクターをクリックすると、このグループに属するすべてのレコードが選択されます。
React Grid グループ化の例
この例は、大量のデータのグループ化が可能であることを示しています。列ヘッダーを一番上 (グループ化領域) にドラッグすると、ユーザーは選択した列のデータを階層構造で表示できます。さらに列ヘッダーを一番上にドラッグすることで、複数のフィールドでグループ化できます。これらのグループ化オプションは、ユーザーが多数の行と列を持つテーブルがあり、はるかに高速で視覚的に受け入れられる方法でデータを表示ようとする場合に役立ちます。
初期のグループ化状態
グリッドの groupingExpressions
プロパティに式の配列を割り当てることによって、グリッドの初期グループ化を定義することができます。
const expressions = [
{ fieldName: 'ProductName', dir: SortingDirection.Desc },
{ fieldName: 'Released', dir: SortingDirection.Desc }
];
function App() {
const grid1Ref = useRef();
return (
<>
<IgrGrid
autoGenerate="true"
groupingExpressions={expressions}
ref={grid1Ref}>
</IgrGrid>
</>
)
}
グループ式は、ISortingExpression
インターフェイスを実装します。
Group By API
グループ化 API
グループ化は、UI およびグリッド コンポーネントで公開された API で実行できます。各列の Groupable
プロパティを true に設定してエンドユーザーは特定の列でグリッド データをグループ化できます。
function App() {
const gridRef = useRef();
return (
<>
<IgrGrid
autoGenerate="false"
ref={gridRef}
>
<IgrColumn field="OrderID" hidden="true"></IgrColumn>
<IgrColumn field="ShipCountry" header="Ship Country" width="200px" groupable="true"></IgrColumn>
<IgrColumn field="OrderDate" header="Order Date" dataType="date" width="200px" groupable="true"></IgrColumn>
<IgrColumn field="PostalCode" header="Postal Code" width="200px" groupable="true"></IgrColumn>
<IgrColumn field="Discontinued" width="200px" dataType="boolean" groupable="true"></IgrColumn>
<IgrColumn field="ShipName" header="Ship Name" width="200px" groupable="false"></IgrColumn>
<IgrColumn field="ShipCity" header="Ship City" width="200px" groupable="false"></IgrColumn>
<IgrColumn field="ShipperName" header="Shipper Name" width="200px" groupable="true"></IgrColumn>
<IgrColumn field="Salesperson" header="Sales Person" width="200px" groupable="true"></IgrColumn>
<IgrColumn field="UnitPrice" header="Unit Price" width="200px" groupable="true"></IgrColumn>
<IgrColumn field="Quantity" width="200px" groupable="true"></IgrColumn>
</IgrGrid>
</>
)
}
ランタイムの式は groupingExpressions
プロパティの取得または設定できます。既存の式を追加または変更する必要がある場合、単一の式または式の配列で groupBy
メソッドを使用してください。
gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }]);
展開 / 縮小 API
グループ式の他にグループ行の展開も制御できます。これらは、IgrGroupByExpandState
のコレクションである、IgrGrid
コンポーネントの別のプロパティ groupingExpansionState
に保存されます。各展開状態は、作成されたフィールド名とグループ化の各レベルで表す値によって一意に定義されます。つまり、識別子は IgrGroupByKey
の階層配列です。
groupingExpressions
で IGroupByExpandState
のリストを直接 groupingExpansionState
に設定すると展開が変更されます。また、IgrGrid
は、グループ レコード インスタンスまたは行の expanded
プロパティによってグループを切り替えるメソッド toggleGroup
を公開します。
const groupRow = gridRef.current.getRowByIndex(0).groupRow;
gridRef.current.toggleGroup(groupRow);
const groupRow = gridRef.current.getRowByIndex(0);
groupRow.expanded = false;
グループは展開済み (デフォルト) または縮小済みに作成でき、展開状態は一般的にデフォルト動作の反対の状態のみ含みます。グループを作成して展開するかどうか、または groupsExpanded
プロパティを介すかどうかを制御できます。
グループですべての行を選択 / 選択解除 API
グループ内のすべての行の選択/選択解除は、selectRowsInGroup
および deselectRowsInGroup
API メソッドを介して利用できます。
以下のコードスニペットは、グループ レコード selectRowsInGroup
メソッドを使用してグループ内のすべての行を選択するために使用できます。さらに、このメソッドの2番目のパラメーターはブールプロパティです。それを使用して、前の行の選択をクリアするかどうかを選択できます。以前の選択はデフォルトで保存されます。
const groupRow = gridRef.current.getRowByIndex(0).groupRow;
gridRef.current.selectRowsInGroup(groupRow);
プログラムでグループ内のすべての行の選択を解除する必要がある場合は、deselectRowsInGroup
メソッドを使用できます。
const groupRow = gridRef.current.getRowByIndex(0).groupRow;
gridRef.current.deselectRowsInGroup(groupRow);
テンプレート
グループ行テンプレート
展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。デフォルトでグループ アイコンを描画し、フィールド名と値を表示します。テンプレートを描画するコンテキストのタイプは IgrGroupByRecord
です。
たとえば、以下のテンプレートはグループ行集計でより詳細な情報を表示します。
function template(ctx: { dataContext: IgrGroupByRowTemplateContext }) {
const groupRow = ctx.dataContext.implicit;
return (<>
<span>Total items with value: { groupRow.value } are { groupRow.records.length }</span>
</>)
}
グループ行セレクター テンプレート
上記のように、展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。カスタムの GroupBy 行セレクター テンプレートを作成するには、groupByRowSelectorTemplate
ディレクティブを使用します。テンプレートから、Group By 行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。
SelectedCount
プロパティは、現在選択されているグループ レコードの数を示し、TotalCount
はグループに属するレコードの数を示します。
function template(ctx: { dataContext: IgrGroupByRowSelectorTemplateContext }) {
return (<>
{ ctx.dataContext.implicit.selectedCount } / { ctx.dataContext.implicit.totalCount }
</>)
}
GroupRow
プロパティは、グループ行への参照を返します。
function template(ctx: { dataContext: IgrGroupByRowSelectorTemplateContext }) {
const groupRow = ctx.dataContext.implicit.groupRow;
return (<>
<div onClick={(e: any) => handleGroupByRowSelectorClick(e, groupRow)}>Handle groupRow</div> `;
</>)
}
SelectedCount
と TotalCount
プロパティを使用して、Group By 行セレクターをチェックするか不確定にする (部分的に選択する) かを決定できます。
React Grid ページングによるグループ化
グループ行は、データ行とともにページング プロセスに関係します。それらは各ページのページ サイズにカウントされます。折りたたまれた行はページング プロセスに含まれません。展開または折りたたみ操作を行うと、ページングでページ数が再計算され、必要に応じてページ インデックスが調整されます。 複数のページにまたがるグループは、ページ間で分割されます。グループ行は、開始ページでのみ表示され、後続のページでは繰り返されません。グループ行の要約情報はグループ全体に基づいて計算され、ページングの影響を受けません。
React ページングによるグループ化の例
集計でグループ化
グループ化と要約の統合については、集計トピックで説明しています。
キーボード ナビゲーション
グループ UI は、以下のキーボード インタラクションをサポートします。
グループ行 (行または展開/縮小セルにフォーカス)
- ALT + 右矢印 - グループを展開します。
- ALT + 左矢印 - グループを縮小します。
- SPACE - rowSelection プロパティが multiple に設定されている場合、グループ内のすべての行を選択します。
グループ領域の
IgrChip
コンポーネントのグループ化 (チップにフォーカス)- SHIFT + 左矢印 - フォーカスしたチップの左へ移動し、可能な場合はグループ順序を変更します。
- SHIFT + 右矢印 - フォーカスしたチップの右へ移動し、可能な場合はグループ順序を変更します。
- SPACE - ソートの方向を変更します。
- DELETE - フィールドのグループ解除。
- チップの別の要素をフォーカスでき ENTER キーでインタラクティブに操作できます。
React Grid カスタムグループ化
グリッドでは、列ごとまたはグループ化式ごとにカスタム グループを定義できます。これにより、カスタム条件に基づいてグループ化が提供されます。これは、複雑なオブジェクトごとにグループ化する必要がある場合、または他のアプリケーション固有のシナリオで役立ちます。
以下のサンプルは、Date
によるカスタム グループ化を示しています。日付の値は、ユーザーが選択したグループ化モードに基づいて、日、週、月、または年でソートされおよびグループ化されています。
React カスタム グループ化の例
このサンプルでは、さまざまな日付条件のカスタム ソートストラテジを定義しています。
各カスタム ストラテジは GroupingComparer
メソッドを定義します。値をソートするときに使用されるカスタム比較関数です。さらに、比較に必要な日付から値を抽出します。
const groupByMode = "Month";
function getParsedDate(date: any) {
return {
day: date.getDay(),
month: date.getMonth() + 1,
year: date.getFullYear()
};
}
GroupingComparer
関数がグループ化式に対して定義され、選択されたグループ化モードに基づいて同じグループに属するアイテムを決定します。この関数が 0 を返すソートされた値は、同じグループの一部としてマークされます。
grid.groupingExpressions = [
{ fieldName: 'OrderDate', dir: SortingDirection.Desc,
groupingComparer: (a, b) => {
const dateA = this.getParsedDate(a);
const dateB = this.getParsedDate(b);
if (this.groupByMode === 'Month') {
return dateA.month === dateB.month ? 0 : -1;
} else if (this.groupByMode === "Year") {
return dateA.year === dateB.year ? 0 : -1;
} else if (this.groupByMode === 'Week') {
return this.getWeekOfDate(a) === this.getWeekOfDate(b) ? 0 : -1;
}
return dateA.day === dateB.day && dateA.month === dateB.month ? 0 : -1;
}
}
];
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
function App() {
return (
<IgrGrid className="grid">
</IgrGrid>
)
}
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-group-row-background: #969799;
--ig-grid-group-row-selected-background: #969799;
--ig-grid-group-label-column-name-text: #f8f8f8;
--ig-grid-group-label-text: #f8f8f8;
--ig-grid-group-count-text-color: #222;
--ig-grid-expand-icon-color: #f8f8f8;
--ig-grid-expand-icon-hover-color: #f8f8f8;
}
デモ
既知の問題と制限
制限 | 説明 |
---|---|
グループ列の最大値は 10 です。 | 10 列以上の場合はエラーがスローされます。 |
API リファレン
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。