React ツリーグリッドの概要と構成

Ignite UI for React ツリーグリッドは、階層データまたはフラットデータを簡単に表示および操作できます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイルフィルタリング、ソート、ページング、テンプレート、列移動などの豊富な機能を提供します。マテリアルテーブルをベースとした UI ツリーグリッドにより、表形式のデータの表示がさらに簡単できれいになりました。

React ツリーグリッドの例

この例では、ユーザーが階層データまたはフラットデータを操作する方法を確認できます。フィルタリングとソートのオプション、ピン固定と非表示、行の選択、Excel と csv へのエクスポートが含まれています。

例

Ignite UI for React Tree Grid で作業を開始

依存関係

React ツリーグリッドを初期化するには、igniteui-react と igniteui-react-grids パッケージをインストールする必要があります。

npm install --save igniteui-react
npm install --save igniteui-react-grids

使用方法

ツリーグリッドはグリッドと多くの機能を共有していますが、データを階層的に表示する機能も追加されています。ツリーグリッドは、各データオブジェクトの子コレクションまたは各データオブジェクトにプライマリキーまたは外部キーを使用してデータオブジェクト内の関係を定義できます。

ツリーセル

ツリーグリッド階層の構築に使用するオプション (子コレクションまたは主キーまたは外部キー) にかかわらず、ツリーグリッドの行は 2 タイプのセルで構成されます。

GridCell - 値を含む標準セル。
TreeGridCell - セル行のレベルに基づいた値、インジケーターの展開/縮小、インデント div 要素を含むツリーセル。行コンポーネントのレベルは、その内部の treeRow の level プロパティを通じてアクセスできます。

[!Note] 各行にはツリーセルを 1 つのみ含むことができますが、標準セルは複数含むことが可能です。

初期展開時の深さ

初期時のツリーグリッドは、すべてのノードレベルを展開して表示します。この動作は ExpansionDepth プロパティを使用して構成できます。デフォルトの値は Infinity ですべてのノードが展開されます。初期時の展開の深さは、このプロパティを数値に設定して制御できます。たとえば、0 はルートレベルのノードのみを表示し、1 はルートレベルと子ノードを表示します。

子コレクション

child collection オプションを使用して各データオブジェクトは子コレクションを含み、親データオブジェクトとして同じタイプの項目で生成します。これによりツリーグリッドの各レコードがその子への直接の参照を持つことができます。元のデータソースを含むツリーグリッドの data プロパティが階層が定義されたコレクションになります。

このサンプルでは、コレクションストラクチャを使用します。

const EMPLOYEE_DATA = [
    {
        Name: "Johnathan Winchester",
        ID: 1,
        HireDate: new Date(2008, 3, 20),
        Age: 55,
        Employees: [
            {
                Name: "Michael Burke",
                ID: 3,
                HireDate: new Date(2011, 6, 3),
                Age: 43,
                Employees: []
            },
            {
                Name: "Thomas Anderson"
                ID: 2,
                HireDate: new Date(2009, 6, 19),
                Age: 29,
                Employees: []
            },
            // ...
        ]
    },
    // ...
]

それでは、Data コレクションをインポートし、それをツリーグリッドにバインドすることから始めましょう。

ツリーグリッドで階層を構築するには、その childDataKey プロパティに、各データオブジェクトで使用される子コレクションの名前を設定する必要があります。このサンプルでは Employees コレクションです。更に自動列生成を無効にしてデータオブジェクトの実際のプロパティとの一致を手動で定義できます。Employees コレクションが階層で自動的に使用されるため、列定義に含める必要はありません。

rowSelection および paging プロパティを使用して、ツリーグリッドの行選択およびページング機能を有効にできるようになりました。最初の列に集計機能、各列にはフィルタリング、ソート、編集、サイズ変更機能を有効にします。

最後に、IgrGridToolbar、IgrGridToolbarHiding、IgrGridToolbarPinning、IgrGridToolbarExporter をそれぞれ使用して、列の非表示、列のピン固定、エクスポート機能、およびツリーグリッドのツールバーを有効にできます。

上記のコードの結果は、この記事の冒頭のツリーグリッドの例セクションで確認できます。

プライマリと外部キー

プライマリと外部キーオプションを使用した際に各データオブジェクトはプライマリキーと外部キーを含みます。プライマリキーは現在のデータオブジェクトの一意識別子、外部キーは親の一意識別子です。元のデータソースを含むツリーグリッドの data プロパティがフラットコレクションになります。

const data = [
    { ID: 1, ParentID: -1, Name: "Casey Houston", JobTitle: "Vice President", Age: 32 },
    { ID: 2, ParentID: 1, Name: "Gilberto Todd", JobTitle: "Director", Age: 41 },
    { ID: 3, ParentID: 2, Name: "Tanya Bennett", JobTitle: "Director", Age: 29 },
    { ID: 4, ParentID: 2, Name: "Jack Simon", JobTitle: "Software Developer", Age: 33 },
    { ID: 5, ParentID: 8, Name: "Celia Martinez", JobTitle: "Senior Software Developer", Age: 44 },
    { ID: 6, ParentID: -1, Name: "Erma Walsh", JobTitle: "CEO", Age: 52 },
    { ID: 7, ParentID: 2, Name: "Debra Morton", JobTitle: "Associate Software Developer", Age: 35 },
    { ID: 8, ParentID: 10, Name: "Erika Wells", JobTitle: "Software Development Team Lead", Age: 50 },
    { ID: 9, ParentID: 8, Name: "Leslie Hansen", JobTitle: "Associate Software Developer", Age: 28 },
    { ID: 10, ParentID: -1, Name: "Eduardo Ramirez", JobTitle: "Development Manager", Age: 53 }
];

上記のサンプルデータでは、すべてのレコードに ID、ParentID、および Name、JobTitle、Age などの追加プロパティがあります。前述のように、レコードの ID は一意である必要があります。これが PrimaryKey になります。ParentID には親ノードの ID が含まれており、ForeignKey として設定できます。行にツリーグリッドのいずれの行にも一致しない ParentID がある場合、行がルート行であることを意味します。

親子関係は、ツリーグリッドの PrimaryKey プロパティと ForeignKey プロパティを使用して構成されます。

上記フラットコレクションで定義されたデータを表示するツリーグリッドを設定する方法を示すコンポーネントのテンプレートです。

さらに、rowSelection プロパティを使用してツリーグリッドの行選択機能を有効にし、各列のフィルタリング、ソート、編集、移動、サイズ変更機能も有効にします。

以下は結果です:

パーシステンスとインテグレーション

ツリーグリッドセルのインデントは、フィルタリング、ソート、ページングなど他のツリーグリッド全体の機能で永続化されます。

Sorting が列に適用された際にデータ行がレベルごとにソートされます。ルートレベルの行はそれぞれの子に関係なく個々に並べ替えられます。各子コレクションは個々に並べ替えられます。
最初の列 (VisibleIndex が 0 の列) は常にツリー列です。
列のピン固定、列の非表示、列の移動などの処理後に VisibleIndex が 0 になる列はツリー列になります。
エクスポートした Excel ワークシートは、ツリーグリッドでグループ化されるときにレコードをグループ化して階層に反映できます。すべてのレコードを展開した状態が保持および反映されます。
CSV レベルにエクスポートする際に展開した状態は無視されてすべてのデータがフラットでエクスポートされます。

API リファレンス

その他のリソース

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

React ツリー グリッドの概要と構成

React ツリー グリッドの例

例