Tree Grid (ツリーグリッド)

Tree Grid コンポーネントを使用して、ユーザーがタブレイアウトで表示される大量の階層なデータをブラウズおよびインタラクティブに操作できるようにしす。Grid で利用可能な機能もサポートします。Tree Grid は、Ignite UI for Angular Tree Grid コンポーネントと視覚的に同じものです。

Tree Grid のデモ

Figma で Tree Grid を使用

グリッドと同様に、ツリーグリッドは基本的に、階層データをフラットな表形式のレイアウトで表示する列と行のリピーターです。Figma では、Grid/Tree Grid コンポーネントをフレームにドラッグすることで簡単に使用できます。より多くの列と行を持つ Tree Grid を設計するには、コンテキストメニューの下部にある Detach Instance オプションを選択して、コンポーネントをデタッチする必要があります。レイヤーパネルには、以下が表示されます。

レイヤー	使用
🚫 componentVersion	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
🚫 metadata	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください
Column 1	Header コンポーネントに関連するすべての要素を含みます。
...	Column 1 と Column 7 の間の列。
Column 7	Header コンポーネントに関連するすべての要素を含みます。

デタッチ後、既存の列を複製することにより、Tree Grid 内の列の数を増やすことができます。本文セルの数を増やすには、最初に特定の列に対して Detach instance オプションを使用する必要があります。そうすると、以下が表示されます:

レイヤー	使用
🚫 metadata	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
Header	Header コンポーネントに関連するすべての要素を含みます。
Body Cell 1	特定の本文セルを含みます。
...	Body Cell 1 と Body Cell 9 の間の列 9
Body Cell 9	特定の本文セルを含みます。

次に、列内に既に存在する本文セルのいずれかを複製できます。

列またはセルの数を増減した後、Tree Grid コンポーネントのサイズを手動で調整する必要があります。

セルタイプ

Tree Grid は、3 種類の通常のグリッドセル Header、Body および Summary を、階層を整理するために使用される TreeColumn Cell で拡張します。これは常にすべての行の最初の Body Cell として使用され、行を折りたたむ/展開するための定義済みのアイコンとアクションが付属しています。

通常の Header、Body、Summary セルをさまざまなタイプのデータに使用し、さまざまな Tree Grid 機能を有効にするように構成する方法を理解するには、Grid トピックを参照してください。

セルサイズ

TreeColumn セルは、Tree Grid の 3 つのサイズバリアント (Large、Medium、Small) をサポートします。

Cell の深さ

Tree Grid の TreeColumn セルは、Level プロパティを介してデータ階層のレベルを視覚的に示します。これは、Root Level (ルートレベル)、Child Level (子レベル)、または Grandchild Level (孫レベル) に設定できます。Figma では、Column 1 から Cell を選択し、レイヤーパネルでそのセル内の Level ベースコンポーネントに移動すると、Level プロパティを使用してそれらを切り替えることができます。