React 行のグループ化
Ignite UI for React Data Table / Data Grid は、行を「固定ヘッダー」行グループにまとめることができます。これ機能は Microsoft Outlook の Group By 機能に似ています。独自の基準に基づいてデータを視覚的にグループ化する簡単な方法です。
React 行の GroupBy 領域の例
Group-By 領域
上記の例に示すように、DataGrid の IsGroupByAreaVisible
プロパティをユーザー インターフェイスで True に設定します。group-by 領域を使用すると、ユーザーは、DataGrid を間接的に操作するときに、操作せずに列をグループ化およびソート オプションを増やすことができます。グループは、ユーザーのニーズに基づいて配置および並べ替えることができます。この領域は、DataGrid で列がプログラムで groupDescriptions
として追加されたときにも入力されます。
グループ化説明の使用の例
階層グループ
groupHeaderDisplayMode
プロパティを使用すると、グループを階層化できます。デフォルトで、追加された各グループの説明が集計されます。groupHeaderDisplayMode
を Split
に設定すると、IgrGrid
の groupDescriptions
プロパティで定義されたグループのセクション ヘッダーが作成されます。
import { GroupHeaderDisplayMode } from 'igniteui-react-core';
public componentDidMount() {
// ...
this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
}
縮小可能なグループ
また、IgrGrid
は各グループ セクションに切り替えを表示して、エンドユーザーが isGroupCollapsable
プロパティでグループ化されたデータを展開または縮小できます。
public componentDidMount() {
// ...
this.grid.isGroupCollapsable = true;
}
まとめ
上記すべてのコード スニペットを以下のコード ブロックにまとめて、プロジェクトに簡単にコピーできます。
import { IgrColumnGroupDescription } from 'igniteui-react-grids';
import { ListSortDirection } from 'igniteui-react-core';
import { GroupHeaderDisplayMode } from 'igniteui-react-core';
public componentDidMount() {
window.addEventListener('load', this.onLoad);
}
public onLoad() {
const state = new IgrColumnGroupDescription();
state.field = "Country";
state.displayName = "Location";
state.sortDirection = ListSortDirection.Descending;
const city = new IgrColumnGroupDescription();
city.field = "City";
city.displayName = "";
const income = new IgrColumnGroupDescription();
income.field = "Income";
income.displayName = "Income";
this.grid.groupDescriptions.add(state);
this.grid.groupDescriptions.add(city);
this.grid.groupDescriptions.add(income);
this.grid.isGroupCollapsable = true;
this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
}
API リファレンス
IgrGrid
groupDescriptions
groupHeaderDisplayMode
IsGroupByAreaVisible
isGroupCollapsable