Linked Data Tables
Last updated
Last updated
Imagine you have two tables on your page:
Accounts Table: This table (accountsDatatable) lists all your customer accounts.
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.
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
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.
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.
