> 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/chtoriaru/reactive-components/linked-data-tables.md).

# リンクされたデータテーブル

## テーブルの同期を保つ

ページに2つのテーブルがあると想像してください：

1. **アカウントテーブル：** このテーブル（`accountsDatatable`）には、すべての顧客アカウントが一覧表示されます。
2. **連絡先テーブル：** このテーブル（`contactsDatatable`）には、各アカウントのすべての連絡先担当者が一覧表示されます。

**目的：** アカウントテーブルでアカウントを選択すると、連絡先テーブルが自動的に更新され、該当アカウントの連絡先のみを表示するようにしたい *その特定の* アカウント。

## **実現方法**

### **アカウントテーブル**

* Avonniデータテーブルコンポーネントをドラッグします
* このテーブルにAPI名を設定していることを確認してください `accountsDatatable`.
* Query Data Sourceを使ってデータソースを設定します
* Accountsオブジェクトを選択します
* データマッピングを設定して列を作成します

<figure><img src="/files/5a3c63f9659818151f13d7e0446004409123d323" alt=""><figcaption></figcaption></figure>

### **連絡先テーブル**

* このテーブルも設定されており、すべての連絡先が表示されます。
* テーブルの設定で「Data Source」セクションに移動します。
* 「Query Data Source」オプションを選択します。
* 連絡先情報を保持するオブジェクト（例：「Contact」）を選択します。
* フィルター条件を追加します：
  * 項目： `アカウントID` （または、連絡先をアカウントに関連付けるフィールド）
  * 演算子： `等しい`
  * 値： `{{accountsDatatable.selectedRecord.Id}}`
    * この式コードにより、連絡先テーブルは、アカウントIDがアカウントテーブルで選択された行のIDと一致する連絡先のみを表示します。
* フィールドを追加して列を作成します。

### **結果**

* ユーザーはアカウントテーブルでアカウント一覧を閲覧します。
* ユーザーはアカウントをクリックします。
* 連絡先テーブルは即座に更新され、選択したアカウントに関連付けられた連絡先のみを表示します。

これにより、テーブルが同期され、スムーズで直感的なユーザー体験が実現します。


---

# 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/chtoriaru/reactive-components/linked-data-tables.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.
