Hierarchical Grid (階層グリッド)

Hierarchical Grid コンポーネントを使用して、ユーザーが個別のテーブルに編成された大量の複雑なデータ (階層的に関連する) をブラウスおよびインタラクションできるようにします。階層内の各グリッドは、データを表形式で表示し、Grid と同じ機能を提供します。Hierarchical Grid は、Ignite UI for Angular Hierarchical Grid コンポーネントと視覚的に同じものです。

Hierarchical Grid のデモ

Figma で Hierarchical Grid を使用

Grid と同様に、Hierarchical Grid は基本的に、視覚的な階層を形成する列、行、ネストされたグリッドのリピーターです。Hierarchical Grid コンポーネントを使用するには、[Resources] パネルで検索してインスタンスを挿入するだけです。必要に応じて、プロパティパネルの「Display Density」プロパティを使用して、表示密度を変更できます。レイヤーパネルには、次の構造が表示されます。

レイヤー	使用
🚫 componentVersion	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーにはコンポーネントの現在のバージョンに関する情報が含まれているため、削除または変更しないでください。
🚫 metadata	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
Drill Indication	アクティブなセル/フォーカスされているセルを示すために使用されるシンボル。
Grid 2	下部グリッドヘッダーのすべての列とセルを含みます。
Background	2 番目のグリッドの背景色を定義します。
Grid 1	上部グリッドのすべての列とセルを含みます。

列またはセルの数を変更したい場合は、レイヤーパネルから不要なものを非表示にするだけです。さらに追加したい場合は、Hierarchical Grid コンポーネントを選択して右クリックし、コンテキストメニューから [Detach instance] を選択する必要があります。その後、必要な Grid の外観が得られるまで、既存の列の一部を複製できます。階層をさらに表示したい場合は、2 つの Grid フレームのいずれかを複製することもできます。

Sketch で Hierarchical Grid を使用

Sketch で Hierarchical Grid を使用する最も簡単な方法は、事前定義されたグリッドの 1 つをアートボードにドラッグすることです。サポートされる 3 つの表示密度に 3 つのプリセットがあります。アートボードを開いた後、その上を右-クリックし、コンテキストメニューの下部にある Detach from Symbol オプションを選択すると、新しく表示されたグループの下のレイヤーパネルに次のように表示されます:

レイヤー	使用
🚫 metadata	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
🌈 Drill Indication	アクティブセル / フォーカスされるセルを示すために使用されるシンボル
Header	ヘッダーのすべてのセルを取得します
Body	本体のすべてのセルと、基本構造のネストされたグリッドを含みます
🌈 Background	Hierarchical Grid の背景色を定義します

デタッチ後、既存の各グリッド内にすでに作成したデータの最初の行を複製し、デザインに表示したいレコード (数に制限がない) およびヘッダーの数を変更してデータのすべてのディメンションを表示できます。より多くの階層を表示する必要がある場合は、追加のグリッドを、それらが属する親グリッドの本体内にネストすることもできます。

Adobe XD で Hierarchical Grid を使用

Adobe XD では、3 つのプリセット表示密度階層グリッドコンポーネントのいずれかを選択してアートボードにドラッグすると、レイヤーパネルで、Header と Body の両方に Repeat Grid を使用して構成を高速化していることがわかります。Sketch とは異なり、Adobe XD ではシンボルを破棄する必要はありません。レイヤーパネルに次のように表示されます:

レイヤー	使用
🚫 metadata	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
🌈 Drill Indication	アクティブセルを示し、グリッドの階層を介してその所属を追跡するために使用されるシンボル。
Header	すべてのヘッダーセルが含まれます: CollapseAll セルと Repeat Grid Header にグループ化された残りのセル。
Body	すべての本文セルが含まれます: Repeat Grid にグループ化された Expand (展開) セルと別の Repeat Grid にグループ化された残りのセル、および基本構造を持つネストされた Grid。
🌈 Background	ネストされたグリッドの背景色を定義します。

Repeat Grid レイヤーを選択すると、必要な繰り返すセルの数を変更できます。これは、各グリッド内で実行できます。右端または下端にある緑色のハンドルをドラッグするだけで、データのすべてのディメンションが表示され、デザインに表示する必要のある数の表示可能なレコードが挿入されます。特定のセルタイプまたは列幅を変更するには、Repeat Grid レイヤーを選択し、右側のパネルで Ungroup Grid をクリックする必要があります。これにより、それらを個別に処理して、目的のデザインを実現できます。より多くの階層を表示する必要がある場合は、完全なグリッドを複製して、それらを所属させたい親グリッドの本体内にネストすることもできます。

セルタイプ

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

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

セル表示密度

CollapseAll セルと Expand セルは、Hierarchical Grid の 3 つの表示密度バリアント (Comfortable、Cosy、Compact) をサポートします。以下の CollapseAll Header セルに見られるように、それぞれに個別のシンボルが付いています: