Master-Detail Relationship with Data Tables

Overview

This tutorial demonstrates how to create a classic master-detail relationship between two Avonni Data Table components. You'll build a component where:

• One Data Table (the "master") displays a list of Accounts.

• A second Data Table (the "detail") displays Contacts related to the currently selected Account.

Setting up a reactive filter on the detail table's data source is key. This filter dynamically updates based on the selected row in the master table, ensuring that only the relevant Contacts are displayed. This creates a seamless and interactive user experience.

We will be following those steps:

• Set up the account table, also called the master table.

• Set up the contact table, the details one.

• Create the reactive filter to link those two tables.

• Test

Guided Steps

Step 1: Set Up the Accounts Data Table (Master)

1. Add an Avonni Data Table component to your page.

2. Configure its data source to display a list of Accounts (using a Query).

Step 2: Set Up the Contacts Data Table (Detail)

1. Add another Avonni Data Table component to your page.

2. Configure its data source to display Contacts (using the Avonni Query Data Source).

Handy Tip

You can use a column component to display your two data tables side by side.

Step 3: Create the Reactive Filter

1. Add a Filter Condition:

   • Field: Select the AccountId field on the Contact object (or the field linking Contacts to Accounts).

   • Operator: Choose equals.

   • Value: Do not enter a fixed value. Instead, reference the selected Account's ID:

     !AccountsTable.firstSelectedRow.Id

     • Explanation:

       • !AccountsTable: Your Accounts Data Table component (use the API name).

       • .firstSelectedRow: The currently selected row in the Accounts table.

       • .Id: The Id field from that selected row.

   • Make sure to use the correct names for the component and field.

Step 4: Test the Reactivity

1. Preview your page.

2. Select different Accounts in the Accounts Data Table. The Contacts Data Table should automatically update.