> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-tree-grid.md).

# AX - ツリーグリッド

**AX - ツリーグリッド** は、Experience Sites ページ（旧 Community Cloud）上で、展開・折りたたみ可能な行と任意の行選択を備えた階層データをツリー構造で表示する Experience Cloud コンポーネントです。

## 概要

ツリーグリッドを使用すると、アカウントと関連コンタクト、カテゴリとサブカテゴリ、または入れ子になった任意のレコードなどの親子データを、ユーザーが行を展開・折りたたみして階層を掘り下げられる 1 つのテーブルで表示できます。各列はデータソース内のフィールドにマッピングされ、行の選択、並べ替え、ページ分割が可能です。

## 設定

Experience Builder でページにコンポーネントを追加し、右側のプロパティパネルから設定します。

### データソース

データソースセクションでは、Tree Grid をデータに接続します。2 種類のソースタイプを利用できます。

| データソースタイプ | 説明                                               | 使用例                   |
| --------- | ------------------------------------------------ | --------------------- |
| **手動**    | 行とその列をビルダーに直接入力します。                              | 動的でないデータ、テスト、デモに最適です。 |
| **クエリ**   | Salesforce オブジェクトのフィールドをテーブルの列にマッピングするクエリを作成します。 | 動的でリアルタイムなデータに適しています。 |

### データマッピング

選択したデータソースの各フィールドにマッピングして、テーブルの列を定義します。各列について次を設定できます。

* **フィールド:** 列がバインドされるソースフィールド（クエリソースの場合は、オブジェクトフィールドまたはカスタムフィールドを選択）。
* **ラベル:** 列ヘッダーに表示されるテキスト。必要に応じてカスタムラベルで既定値を上書きします。
* **データ型:** 値の書式設定方法（たとえば、テキスト、数値、通貨、日付、パーセント、URL、ブール値、またはアバター）と、選択した型に固有の属性。
* **並べ替え可能:** ユーザーがこの列でテーブルを並べ替えられるかどうか。
* **テキストを折り返す:** 長いセルテキストを切り詰めずに折り返すかどうか。
* **非表示:** 列を表示から非表示にするかどうか。
* **初期幅:** 列の開始幅。
* **セル属性:** コンテンツの配置と、任意のセルアイコンおよびその位置。

### 一般

**API 名** コンポーネントを参照するために使用される一意の識別子です（3～30 文字。英字、数字、アンダースコア、ダッシュを使用可）。

**テーブルヘッダーを非表示** テーブルのヘッダー行を削除し、 **チェックボックス列を非表示** 行選択に使用される列を削除します。 **選択項目数を表示** 現在選択されている行の数を表示します。

**行番号列を表示** 各行に番号を付ける列を追加し、 **行番号オフセット** その番号付けの開始番号を設定します。

### ヘッダー

**ヘッダータイトル** と **ヘッダーキャプション** テーブルの上にタイトルと補足キャプションを追加します。 **ヘッダータイトルのテキストスタイル** と **ヘッダーキャプションのテキストスタイル** それぞれのテキストスタイル（見出しスタイルまたは段落スタイル）を設定します。 **ヘッダーアイコン名** タイトルの横にアイコンを追加し、 **ヘッダーアイコンサイズ** そのサイズを設定します。 **ヘッダーを結合** ヘッダー下部の角丸と影を削除し、下のテーブルと段差なく配置します。

### 列幅

**列幅モード** を選択します `固定` または `自動` の列幅。 **最大列幅** と **最小列幅** 幅の上限と下限を設定し、 **列サイズ変更を無効化** 手動での列サイズ変更を無効にします。

### 行切り替えアイコン

行を展開・折りたたみするために使用するアイコンを設定します: **展開時** 行が開いているときに表示され、 **折りたたみ時** 閉じているときに表示されます。どちらも Lightning Design System のアイコン名を使用できます。

### ヘッダーアクション

テーブルヘッダーに表示されるアクションボタンを設定します。各アクションには **ラベル**、 **アイコン名**、ホバー時の **タイトル**、 **代替テキスト** があり、ボタンアイコン用です。各ボタンの動作はその **クリック時** セクションで設定します。動作の詳細は [ナビゲート](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md) インタラクションを参照してください。 **表示するヘッダーアクションボタン数** 残りがメニューに折りたたまれる前に表示するアクションボタンの数を設定します。

### ページネーション

**1 ページあたりの項目数** ユーザーがデータをページ移動する際に、一度に読み込む追加行数を設定します。

### 並べ替え

**既定の並べ替え方向** 列が最初に並べ替えられるときに適用される方向（`昇順` または `降順`）。

## スタイル

{% tabs %}
{% tab title="サイズ" %}
コンポーネントの寸法を制御します。
{% endtab %}

{% tab title="マージン" %}
コンポーネント周囲の外側の余白を制御します。
{% endtab %}

{% tab title="パディング" %}
コンポーネントの内側の余白を制御します。
{% endtab %}

{% tab title="フローダイアログ" %}
フローダイアログ内に表示されるときのコンポーネントの外観を制御します。
{% endtab %}

{% tab title="フローパネル" %}
フローパネル内に表示されるときのコンポーネントの外観を制御します。
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-tree-grid.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.