Linked Data Tables

Keeping Tables in Sync

Imagine you have two tables on your page:

1. Accounts Table: This table (accountsDatatable) lists all your customer accounts.

2. Contacts Table: This table (contactsDatatable) lists all the contact people for your accounts.

The Goal: When you select an account in the Accounts Table, you want the Contacts Table to automatically update and show only the contacts for that specific account.

How to Make It Happen

The Accounts Table

• Drag the Avonni Data Table Component

• Make sure you've given this table the API name accountsDatatable.

• Configure the Data Source by using the Query Data Source

• Select the Accounts object

• Configure the Data Mappings to create columns

The Contacts Table

• This table is also set up, showing all your contacts.

• Go to the "Data Source" section in the table's settings.

• Choose the "Query Data Source" option.

• Select the object that holds your contact information (e.g., "Contact").

• Add a filter condition:

  • Field: Account Id (or whichever field links contacts to accounts)

  • Operator: Equals

  • Value: {{accountsDatatable.selectedRecord.Id}}

    • This expression code tells the Contacts Table to show only contacts whose Account ID matches the ID of the selected row in the Accounts Table.

• Create columns by adding fields.

The Result

• Users browse their account list in the Accounts Table.

• They click on an account.

• The Contacts Table instantly updates to show only the contacts associated with that chosen account.

This keeps your tables in sync and provides a smooth, intuitive user experience.