> 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-data-table.md).

# AX - データテーブル

## 概要

**AX - データテーブル** Experience Sites ページ（旧 Community Cloud）上で、Salesforce レコードをインタラクティブなテーブルとして表示する Experience Cloud コンポーネントです。

列、並べ替え、検索、ページネーションを完全に制御しながら、ポータルユーザーにフィルタ済みデータセットを表示するのに使います。標準オブジェクトまたはカスタムオブジェクトからレコードを取得し、外部ユーザーが自分のアカウントやプロファイルに関連するデータを表示、検索、操作できるようにします。

注文履歴を表示する顧客ポータル、共有レコードを表示するパートナーポータル、またはユーザーが自分のデータを見つけて表示する必要があるセルフサービスポータルに最適です。

{% hint style="success" %}
Avonni データテーブルは [リアクティブデータコンポーネント](/experience-cloud/experience-cloud-ja/hajimeni/reactive-components.md)
{% endhint %}

{% hint style="info" %}
**実際のプロジェクトで見る**

[パートナー受注デスク](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/partner-order-desk)：インライン編集とPDFアップロードができるパートナー受注デスク。
{% endhint %}

## はじめに

このシンプルなチュートリアルで、データテーブルコンポーネントの基本を学び、ユースケースの作成を始めましょう。

{% @arcade/embed url="<https://app.arcade.software/share/oAo6XOMWRBc7Vn4Y9XNd>" flowId="oAo6XOMWRBc7Vn4Y9XNd" %}

## チュートリアル

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>データテーブルに「Export To」ボタンを作成する</strong></td><td><a href="/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md">Create an Export To button on the Data Table</a></td></tr><tr><td><strong>データテーブルの設定</strong></td><td><a href="/projects/experience-cloud-components/configuring-the-avonni-data-table.md">Configuring the Avonni Data Table</a></td></tr><tr><td><strong>データテーブルで Salesforce CMS ファイルを表示する</strong></td><td><a href="/experience-cloud/experience-cloud-ja/chtoriaru/components/data-table/displaying-salesforce-cms-files-in-a-data-table.md">Salesforce CMSファイルをデータテーブルに表示する</a></td></tr></tbody></table>

## 設定

### データソース

データソースセクションでは、Avonni データテーブルを Salesforce データに接続します。2つの方法があります。

<table><thead><tr><th>データソースタイプ</th><th width="250.33333333333331">説明</th><th>使用例</th></tr></thead><tbody><tr><td><strong>手動</strong></td><td>データテーブルにデータを手動で入力します。</td><td>動的でないデータ、テスト、デモに最適です。</td></tr><tr><td><strong>クエリ</strong></td><td>クエリを作成して、Salesforce データでテーブルを自動入力します。</td><td>動的データ、リアルタイムデータ、大規模データセットに適しています。</td></tr><tr><td><strong>CMS コレクション</strong></td><td>CMS コレクションをデータテーブル内にシームレスに表示し、動的なコンテンツ更新を実現します。</td><td>リソース一覧やニュースフィードを自動更新するように作成します。</td></tr></tbody></table>

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-65b65bd9bce58e1f81a6f14daf8c4a781f806354%2F2024-05-06_10-20-35.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
クエリモードでは、サイトのパフォーマンスを最適に保つため、データは25件ずつのバッチで表示されます。
{% endhint %}

### データマッピング

データマッピングセクションで列を定義・カスタマイズすることで、データテーブルに命を吹き込みます。

<details>

<summary>Avonni データテーブルでのデータモデル共有</summary>

**Salesforce のデータ共有ルールへの準拠：**

* **組織設定の尊重：** Avonni コンポーネントは、Salesforce 組織の既存のデータ共有設定とアクセス設定に完全に準拠します。
* **干渉しないポリシー：** これらのコンポーネントは、既に定義されたデータ共有ルールをいかなる形でも変更したり影響を与えたりしません。
* **制御された表示とアクセス：** Avonni コンポーネントを通じてレコードを表示・操作できるかどうかは、組織で定義された共有設定とユーザー権限によって管理されます

</details>

#### 列の追加

* 「Add Columns」ボタンをクリックして、データソースからデータテーブルに列として表示するフィールドを選択します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-065433424a25767ee86713b430c59ac74705e9f2%2F2023-12-10_20-56-54.png?alt=media" alt=""><figcaption></figcaption></figure>

* このセクションでは、どのデータを表示するか、またテーブル内でどのように整理するかを決定します。
* 列をクリックすると、その列固有のすべてのプロパティにアクセスできます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-78e0e4f4e82d5bfe14b011a3427d80cb97988b8b%2F2023-12-10_20-58-01.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 列プロパティの設定

* **データ型：** フィールドの表示タイプ（例：テキスト、数値、日付）を調整して、正しくデータを表現します。
* **リンク化：** セルデータを他のレコードや URL にリンクして、すばやく移動できるようにします。
* **セル属性：** セルの配置やアイコンをカスタマイズして、より直感的で見やすいテーブルを作成します。
* **アクション：** 列ヘッダーのドロップダウンメニューに独自の項目を追加します。各アクションには **ラベル**、 **Name**、 **アイコン名**、および任意の **チェック済み** および **無効** 状態があり、それぞれ独自の **クリック時** インタラクションがあります。
* **編集可能：** 列をテーブル内で直接編集可能にするかどうかを決定します。
* **フィルタ可能・検索可能：** 列ごとのフィルタリングと検索を有効にして、効率的なデータ管理を実現します。
* **非表示:** 機密データや関連性の低いデータに便利な、特定の列を非表示にすることを選べます。
* **並べ替え可能：** ユーザーが指定した列でデータを並べ替えられるようにします。
* **デフォルトアクションを非表示：** よりすっきりした表示にするために、事前設定されたアクションを非表示にします。
* **テキストを折り返す：** 狭い列でも読みやすくするために、テキストの折り返しを有効にします。
* **列幅を設定：** 各列の幅を指定して、バランスの取れた整然としたレイアウトにします。

#### フィルター

次の **クエリ** データソース、 **フィルター** テーブルをフィルタリングできるフィールドを一覧表示します。たとえば **検索フィールド**、列と並んでマッピングされるため、列として表示されていないフィールドを対象にできます。各エントリには次が含まれます：

* **フィルター条件:** フィルターが適用されるフィールド。必須。
* **デフォルト値（任意）：** ページ読み込み時にフィルターが開始する値。入力はフィールドの種類に一致し、ピックリストフィールドではその値、日付フィールドでは日付ピッカー、チェックボックスフィールドでは **真** または **偽**.
* **カスタムラベル：** フィールドのラベルの代わりに、フィルターの上に独自のテキストを表示します。オンにしてから、次の場所にテキストを入力します **ラベル**.

#### 検索フィールド

次の **クエリ** データソース、 **検索フィールド** 検索ボックスが検索対象とするオブジェクトのフィールドを一覧表示します。列と並んでマッピングされるため、列として表示されていないフィールドにもアクセスできます。2つの検索設定は互いに置き換えるのではなく加算されます。検索はこれらのフィールドの和集合と、次のマークが付いた各列の背後にあるフィールドに対して実行されます **検索可能**.

#### 行アクションの追加

データテーブルに行アクションを追加するための、ガイド付きのインタラクティブチュートリアルです。

{% @arcade/embed url="<https://app.arcade.software/share/db617gnzKCL8QA22aziq>" flowId="db617gnzKCL8QA22aziq" %}

### 基本設定

**テーブルヘッダーを非表示**

* このオプションでは、よりすっきりとしたミニマルな見た目にするためにテーブルヘッダーを削除できます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-62a2b6af2e9db471654d239cee0ba21a8af8d907%2F2023-12-10_21-00-20.png?alt=media" alt=""><figcaption></figcaption></figure>

**チェックボックス列を非表示**

* この設定を有効にすると、通常は複数アクションシナリオで行選択に使われるチェックボックス列を非表示にできます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-1d5e472575d42100ab98ab67386a331fe60b316a%2F2023-12-10_21-01-29.png?alt=media" alt=""><figcaption></figcaption></figure>

**行番号列を表示**

* これを有効にすると、各行に番号を付ける列が表示され、データ参照が容易になります。

### ヘッダー設定

**タイトルとキャプション**

* テーブルデータの文脈や要約情報を提供するために、ヘッダーにタイトルとキャプションを設定します。

**アイコン名とサイズ**

* アイコンでヘッダーを強調し、種類とサイズを選択して視覚的なアクセントを加えます。

**結合**

* この設定は、ヘッダーがテーブル本体と視覚的につながるかどうかを決め、全体のデザインに影響します。

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

* テーブルヘッダーから直接アクセスできるアクション（追加、削除、カスタム関数）を設定します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-aec8d037c0596b5e23a8bd4b53078a41fc6792a6%2F2023-12-05_08-55-05.png?alt=media" alt=""><figcaption></figcaption></figure>

### ヘッダー上のアクションボタン

* テーブルヘッダーにアクションボタンを実装して、新規レコードの追加、データのエクスポート、その他のカスタムアクションを可能にし、ユーザー操作と効率を高めます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-566a4863279a76cdc4ebf192ea145d345c96fb63%2F2023-12-05_09-00-09.png?alt=media" alt=""><figcaption></figcaption></figure>

#### ボタンのインタラクションを設定

「On Click」セクションでユーザーがヘッダーのアクションボタンを押したときのインタラクションを設定します。「Navigate」インタラクションの動作を理解するには、 [ここをクリック](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md) 詳細はこちら。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-5a8a3bb22b29ff4ef19c2175f4b9dd94706da340%2F2023-12-10_21-05-18.png?alt=media" alt=""><figcaption></figcaption></figure>

#### チュートリアル

{% content-ref url="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb" %}
[Create an Export To button on the Data Table](/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md)
{% endcontent-ref %}

### ページネーション属性

* ページあたりの項目数やページネーションスタイルなどのページネーション設定を構成して、大きなテーブルでのデータ表示と移動方法を管理します。

{% hint style="info" %}
クエリモードでは、サイトのパフォーマンスを最適に保つため、データは25件ずつのセットで表示されます。そのため、ページネーションの設定は有益です。
{% endhint %}

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-69854541e72faeba73f2c40524ff8d8769e46a7a%2F2023-12-05_09-16-35.png?alt=media" alt=""><figcaption></figcaption></figure>

### 検索エンジン設定

* **プレースホルダー:** ユーザーが何を検索できるか分かるよう、検索ボックスのプレースホルダーテキストを設定します。
* **位置:** アクセシビリティを最適化するため、テーブルレイアウト内での検索ボックスの位置を選択します。
* **デフォルトの検索値：** 読み込み時にテーブルデータをフィルタリングする検索値を事前に設定します。

{% hint style="info" %}
少なくとも1つの列に次のマークが付くと、検索ボックスが表示されます **検索可能** — **すべての列で検索を許可** 件数 — あるいは少なくとも1つの **検索フィールド** は、Time 列ではない表示列でもあります。
{% endhint %}

<div><figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-6f2f9b260ebb9dfbd256274b92b44d87587c0143%2F2023-12-05_08-56-31.png?alt=media" alt=""><figcaption></figcaption></figure> <figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-422c97d012ceb51b5a9a8767464a63e8e53c7392%2F2023-12-05_08-57-12.png?alt=media" alt=""><figcaption><p>「Searchable」に設定された列。検索ボックスを表示する一般的な方法です。</p></figcaption></figure></div>

### 設定リファレンス

#### 全般

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

**テーブルヘッダーを非表示** テーブルのヘッダーを非表示にします。 **テーブルの罫線を非表示** さらにテーブルの罫線を非表示にします（次の場合のみ **テーブルヘッダーを非表示** も有効な場合）、および **チェックボックス列を非表示** 行選択用チェックボックスに使う列を削除します。 **行番号列を表示** 行番号列を表示し、 **行番号オフセット** その番号付けの開始番号を設定します。

**最大行編集数と選択数** 一度に編集または選択できる行数を制限します。編集かつ選択されている行は1件として数えます。 **最大行選択数** 選択できる行の最大数を制限します。 **選択不可行のキー値** 選択を無効にする行の、カンマ区切りのキー項目値を一覧表示します。 **選択項目数を表示** 現在選択されている項目数を表示し、 **下部バーを非表示** 通常はアクションや情報表示に使われる下部バーを非表示にします。

**読み取り専用** テーブルを非インタラクティブにし、編集や選択を許可しません。 **すべての列で編集を許可**, **すべての列でフィルタを許可**, **すべての列で検索を許可**, **すべての列で並べ替えを許可**、および **すべての列で折り返しを許可** すべての列で編集、フィルタリング、検索、並べ替え、テキスト折り返しを有効にし、 **デフォルトアクションを非表示** 編集や削除などの定義済みアクションを非表示にします。 **テーブルヘッダーを折り返す** 長いヘッダーラベルを切り詰めずに折り返します。

**列幅モード** を選択します **固定** または **自動** 列幅、 **最大列幅** および **最小列幅** 幅の上限と下限を設定します。 **テキスト折り返しの最大行数** 折り返されたセルテキストの行数を制限します。 **列サイズ変更を無効化** 列のサイズ変更をオフにし、 **サイズ変更ステップ** サイズ変更時に列の幅が変化するピクセル単位の増分を設定します。

**ソート方向** 読み込み時にテーブルを並べ替える方向を設定し、 **デフォルトの並べ替え方向** 列が最初に並べ替えられたときに適用される方向 — **昇順** または **降順** 両方に対して。 **並べ替え基準値を表示** 現在どの列で並べ替えが行われているかを表示します。

**ヘッダータイトル** および **ヘッダーキャプション** ヘッダーのタイトルとキャプションを設定し、それぞれに独自の **ヘッダータイトルのテキストスタイル** / **ヘッダーキャプションのテキストスタイル**. **ヘッダーアイコン名** ヘッダーアイコンを追加し、 **ヘッダーアイコンサイズ** そのサイズを設定します（**中** がデフォルト）、および **ヘッダーを結合** ヘッダーをテーブル本体と視覚的につなげます。 **ヘッダーアクションを非表示**, **ヘッダーアクションを無効化**, **表示するヘッダーアクションボタン**、および **ヘッダーアクション** ヘッダーアクションボタンの表示、利用可否、数、定義を制御します。

#### ページネーションと検索

**ページネーション属性** ページングコントロールを含みます： **ページネーションを表示** それらを表示し、 **ページあたりの項目数** 各ページに含めるレコード数を設定します（ページネーションがオフでテーブルの高さが固定の場合は、一度に読み込むレコード数を設定します）。 **配置** コントロールを配置し **左**, **中央** または **右**、および **最初**, **前へ**, **次へ** および **最後** 各ボタンにはそれぞれ独自の **ボタンラベル** および **ボタンアイコン名**.

**ピルコンテナ属性** 選択された行をピルとして表示します： **ピルコンテナの選択項目を表示** コンテナを有効にし、 **ラベルフィールド** 各ピルにラベルを付ける値のフィールドを選択します。 **並べ替え可能** ユーザーが順序を入れ替えられるようにし、 **1行表示** 1行に収めます。

**検索エンジン属性** 検索ボックスを設定します： **プレースホルダー** プレースホルダーテキストを設定し、 **位置** 配置し **左**, **右**, **中央**, **塗りつぶし** または **パネル** （サイドパネル内に）、および **デフォルト検索値** あらかじめ入力します。

#### フィルタリング

**フィルターメニュー属性** 列ごとのフィルターを設定します。 **種類** で表示位置を設定します **水平** （デフォルト）を上部に、 **ポップオーバー**、または **パネル** テーブルの横に表示します。 **選択リストフィルターのソート順** ピックリスト値の表示順を設定します（**昇順**、デフォルト、 **降順**、または **フィールドのデフォルト順**), **レコードの選択リスト値を使用** ピックリストフィルターのオプションを、フィールドの完全な値セットではなくレコード内の値から取得し、 **連動フィルター値を使用** 他のフィルターのオプションを現在の選択に合わせて絞り込みます（次よりも優先されます **レコードの選択リスト値を使用**).

各フィルターには演算子もあり、フィルター上部のメニューから選択します。テキスト、選択リスト、複数選択選択リスト、およびルックアップフィルターでは、 **等しい** （デフォルト）、 **等しくない**, **空** および **空でない**を使用できます。数値、日付、時間のフィルターでは **範囲内** （デフォルト）、 **範囲外**, **等しい**, **等しくない**, **より小さい**, **以下**, **より大きい**, **以上**, **空** および **空でない**. **空** および **空でない** は値を取らないため、どちらかを選択するとフィルター入力は非表示になります。チェックボックスフィルターには演算子メニューはありません。

#### サイドパネル

**サイドパネル属性** テーブルの横にあるパネルを設定します。検索またはフィルターメニューが配置された場合にのみ表示されます — **位置** 次に設定すると **パネル** を **検索エンジン属性**、または **種類** 次に設定すると **パネル** を **フィルターメニュー属性**.

* **位置:** パネルが配置される側、 **左** （既定）または **右**.
* **デフォルトで閉じる：** パネルを折りたたんだ状態で開始します。デフォルトではオフです。
* **切り替えボタンを非表示：** ユーザーがパネルを開閉するためのヘッダーボタンを削除します。デフォルトではオフです。
* **リセットボタンラベル：** すべてのフィルター選択をクリアするボタンのラベルです。 `すべての選択をクリア` がデフォルトです。

#### 検索結果なしメッセージ

**検索結果なしメッセージ** 検索やフィルターに一致する行がない場合、またはデータソースから何も返されない場合に、デフォルトの空状態を独自のテキストに置き換えます。 **検索結果なしメッセージ属性** で、その空状態に表示する内容を制御します： **検索結果なし画像を非表示** でイラストを非表示にし、 **検索結果なしメッセージを非表示** でテキストを非表示にします。どちらもデフォルトではオフです。

## スタイリング

{% tabs %}
{% tab title="ヘッダー" %}

| Name               | 説明                                       |
| ------------------ | ---------------------------------------- |
| **背景色**            | ヘッダーの背景色を設定します。                          |
| **境界線の色**          | ヘッダーの境界線の色を定義します。                        |
| **境界線のサイズ**        | 境界線の太さを調整します。                            |
| **境界線のスタイル**       | 境界線のスタイル（実線、点線、破線など）を選択します。              |
| **境界線の半径**         | ヘッダーの角を丸くします。                            |
| **下部境界線の色（結合）**    | ヘッダーがテーブル本体と視覚的に接続されているときの下部境界線の色を指定します。 |
| **下部境界線のサイズ（結合）**  | 接続された下部境界線の太さを決定します。                     |
| **下部境界線のスタイル（結合）** | 接続された下部境界線のスタイルを設定します。                   |
| **パディングとマージン**     | ヘッダー内側（パディング）と外側（マージン）の余白を制御します。         |
| {% endtab %}       |                                          |

{% tab title="ヘッダータイトル" %}

| Name         | 説明                             |
| ------------ | ------------------------------ |
| **色**        | タイトルテキストの色を設定します。              |
| **フォントサイズ**  | タイトルテキストのサイズを調整します。            |
| **フォントの太さ**  | タイトルテキストの太さを調整します。             |
| **フォントスタイル** | タイトルテキストに特定のスタイル（斜体、標準）を適用します。 |
| {% endtab %} |                                |

{% tab title="ヘッダーキャプション" %}

| Name         | 説明                     |
| ------------ | ---------------------- |
| **色**        | キャプションテキストの色を定義します。    |
| **フォントサイズ**  | キャプションテキストのサイズを調整します。  |
| **フォントの太さ**  | キャプションテキストの太さを制御します。   |
| **フォントスタイル** | キャプションテキストのスタイルを設定します。 |
| {% endtab %} |                        |

{% tab title="ヘッダーアイコン" %}

| Name           | 説明                             |
| -------------- | ------------------------------ |
| **背景色**        | アイコンの背景色を設定します。                |
| **前景色**        | アイコン自体の色を変更します。                |
| **前景色ユーティリティ** | コントラストや強調のためのユーティリティカラーを調整します。 |
| **境界線の半径**     | アイコンの角を丸くして、よりやわらかい印象にします。     |
| {% endtab %}   |                                |

{% tab title="ピルコンテナ" %}

| Name            | 説明                           |
| --------------- | ---------------------------- |
| **ピル背景色/ホバー**   | ピル要素の背景色を設定し、ホバー時は別の色になります。  |
| **ピルテキスト色/ホバー** | ピル内のテキスト色を変更し、ホバー時は別の色になります。 |
| **ピルの行の高さ**     | テキスト配置のために、ピル内の行の高さを調整します。   |
| {% endtab %}    |                              |

{% tab title="アバター" %}

| Name                  | 説明                                                                                        |
| --------------------- | ----------------------------------------------------------------------------------------- |
| **アバター画像のオブジェクトフィット** | アバター画像をコンテナ内にどのように合わせるかを決定します。オプションには 'fill'、'contain'、'cover'、'none'、'scale-down' があります。 |
| {% endtab %}          |                                                                                           |

{% tab title="ページネーションボタン" %}

| Name         | 説明                                         |
| ------------ | ------------------------------------------ |
| **スタイル設定**   | 色、サイズ、境界線プロパティを含むページネーションボタンの外観をカスタマイズします。 |
| {% endtab %} |                                            |

{% tab title="フッター" %}

| Name         | 説明                |
| ------------ | ----------------- |
| **背景色**      | フッター背景の色を設定します。   |
| **境界線の色**    | フッターの境界線の色を定義します。 |
| **境界線のサイズ**  | 境界線の太さを調整します。     |
| **境界線のスタイル** | 境界線のスタイルを選択します。   |
| **境界線の半径**   | フッターの角を丸めます。      |
| {% endtab %} |                   |

{% tab title="フィルターパネル" %}
フィルターと検索を格納するサイドパネルをスタイル設定します。

* **フィルターパネル：** 背景色 / 境界線の色 / 境界線のサイズ / 境界線のスタイル / 境界線の角丸。
* **フィルターパネルラベル：** 背景 / アクティブ背景 / ホバー背景; 折りたたみアイコンの色; 色 / アクティブ色 / ホバー色; フォントサイズ / フォントウェイト。
* **フィルターパネルオプション：** 色; チェックボックスの境界線色; もっと読み込むボタンのテキスト色 / アクティブ時のテキスト色 / ホバー時のテキスト色。
* **フィルターパネルのリセットボタン：** 背景色 / テキスト色 / 境界線の色 / 境界線のサイズ / 境界線の角丸。
  {% endtab %}
  {% endtabs %}

## ユースケース

### 例1：拡張アカウント一覧と関連コンタクト

{% @arcade/embed url="<https://app.arcade.software/share/sxcJn4NliMFN6qTRk5Mi>" flowId="sxcJn4NliMFN6qTRk5Mi" %}

インライン検索、フィルタリング、移動に応じて更新されるライブコンタクトパネルにより、パートナーがアカウントデータを強力かつ直感的に探索できるようにします。

***

#### **達成できること**

* **検索・フィルタ可能なアカウント一覧：** 組み込みの検索・フィルターコントロールを使って、パートナーが名前や業界でアカウントをすばやく見つけられるようにします。
* **インラインリンクされたレコード：** アカウント名をクリック可能にして、パートナーがレコード詳細ページへ直接移動できるようにします。
* **ライブ関連コンタクトパネル：** 選択されたアカウントに紐づくコンタクトを表示するために自動更新される2つ目のテーブルを表示します。
* **ページ分割された結果：** ページごとの表示レコード数を制限して、インターフェースをすっきり保ち、パフォーマンスを維持します。

***

#### **始める前に**

* **2カラムのページレイアウト：** Experience Builder のアカウント一覧ページに、両方のコンポーネントを配置できる2カラムレイアウトが既に用意されていることを確認してください。

***

#### **設定方法**

{% stepper %}
{% step %}

#### **最初の AX - データテーブルをページに追加**

* Experience Builder のアカウント一覧ページの左カラムに AX - Datatable コンポーネントをドラッグします。
  {% endstep %}

{% step %}

#### **データソースを選択**

* 選択 **アカウントをクエリ** このコンポーネントのデータソースとして。
  {% endstep %}

{% step %}

#### **データマッピングを設定**

* 次の列を追加します：Name、Industry、Owner.FullName、Phone。
* 有効化 **リンク化** Name列でアカウント名をクリック可能なリンクにします。
* 設定 **Industry** フィルターフィールドとして。
* 設定 **Name** 検索フィールドとして。
  {% endstep %}

{% step %}

#### **コンポーネントを設定**

* 次を設定します **API名** から `AccountsTable`.
* 設定 **最大行選択数** から `1` 一度に1件のアカウントのみ選択できるようにします。
* ページネーションを有効にし、 **最大レコード数** から `10`.
  {% endstep %}

{% step %}

#### **ヘッダーをカスタマイズ**

* 次を設定します **ヘッダータイトル** から `アカウント`.
* 次を設定します **ヘッダーアイコン** から `standard:account_info`.
  {% endstep %}

{% step %}

#### **2つ目の AX - データテーブルをページに追加**

* 同じページの右カラムに 2つ目の AX - Datatable コンポーネントをドラッグします。
  {% endstep %}

{% step %}

#### **コンタクトテーブルのデータソースを選択**

* 選択 **コンタクトをクエリ** をデータソースとして。
* 次のようにフィルターを追加して **AccountId** と等しい `{{AccountsTable.selectedRecord.Id}}`、このテーブルの結果を現在選択されているアカウントに紐づけます。
  {% endstep %}

{% step %}

#### **データマッピングを設定**

* 次の列を追加します: Name と Title。
  {% endstep %}

{% step %}

#### **コンポーネントを設定**

* 次を設定します **API名** から `relatedContactsTable`.
  {% endstep %}

{% step %}

#### **ヘッダーをカスタマイズ**

* 次を設定します **ヘッダータイトル** から `関連連絡先`.
* 次を設定します **ヘッダーアイコン** から `standard:contact`.
  {% endstep %}

{% step %}

#### **ページをプレビューする**

* Experience Builder で［プレビュー］をクリックし、アカウント行を選択して、Related Contacts テーブルが選択したレコードを反映して動的に更新されることを確認します。
  {% endstep %}
  {% endstepper %}

***

#### **リンク**

{% content-ref url="/pages/4bf5a4b8c092ce6f9765b58cfa7449cf2e6a1daa" %}
[リンクされたデータテーブル](/experience-cloud/experience-cloud-ja/chtoriaru/reactive-components/linked-data-tables.md)
{% endcontent-ref %}

***

### 例 2: アカウントページ上の関連商談

{% @arcade/embed url="<https://app.arcade.software/share/tZa89LmaWt8n5CoQhwB8>" flowId="tZa89LmaWt8n5CoQhwB8" %}

営業ユーザーが、レコードページを離れることなく、必要な場所でアカウントに紐づくすべての商談をひと目で確認できるようにします。

***

#### **達成できること**

* **より充実した顧客360度ビュー:** アカウントページ上に主要な商談データを直接表示し、営業ユーザーが全体像を1か所で把握できるようにします。
* **情報が充実したレコードページ:** タブやオブジェクトを行き来してパイプラインを操作する必要のない、密度が高く情報量の多いページを構築します。

***

#### **始める前に**

* **既存コンポーネントを含むアカウントレコードページ:** Experience Builder のアカウントレコードページに、レコードの詳細、バナー、そして新しいコンポーネントを配置できる列レイアウトがすでに含まれていることを確認します。

***

#### **設定方法**

{% stepper %}
{% step %}

#### **AX - Datatable をアカウントページに追加する**

* Experience Builder で AX - Datatable コンポーネントをアカウントレコードページへドラッグします。
  {% endstep %}

{% step %}

#### **データソースを選択**

* 選択 **商談をクエリする** このコンポーネントのデータソースとして。
  {% endstep %}

{% step %}

#### **データマッピングを設定**

* 次の列を追加します: Name、Stage、Amount。
* 有効化 **リンク化** Name 列で、商談名がクリック可能なリンクになるようにします。
  {% endstep %}

{% step %}

#### **コンポーネントを設定**

* 次を設定します **API名** から `RelatedOpportunities`.
* 次のようにフィルターを追加して **AccountId** と等しい `{!Item.id}`、表示中のアカウントに結果を絞り込みます。
  {% endstep %}

{% step %}

#### **ヘッダーをカスタマイズ**

* 次を設定します **ヘッダータイトル** から `商談`.
* 次を設定します **ヘッダーのスタイル** から `見出し 2`.
* 次を設定します **ヘッダーアイコン** から `standard:opportunity`.
  {% endstep %}

{% step %}

#### **ページをプレビューする**

* Experience Builder で［プレビュー］をクリックし、アカウントレコードに移動して、そのアカウントに関連する商談だけがテーブルに表示されることを確認します。
  {% endstep %}
  {% endstepper %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.