# 連携データテーブル

## テーブルを同期させる

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

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

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

## **実現方法**

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

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FujTcn7FaNoTNp48CLr3C%2F2024-05-28_20-33-37.png?alt=media&#x26;token=e7a9df0d-1ff1-4d52-8819-525e339db4d7" alt=""><figcaption></figcaption></figure>

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

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

### **結果**

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

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