# Vertical Tabs with Reactive Data Table

{% hint style="warning" %}
This tutorial requires installing [**the Avonni Dynamic Components Package**](https://appexchange.salesforce.com/appxListingDetail?listingId=e855ec28-bf2c-47fa-aa38-30b43948ab4f) on your Salesforce org.
{% endhint %}

## Overview

This tutorial guides you through creating an Avonni Dynamic Component that displays a list of Accounts in a vertically oriented [`Tabs`](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/tabs) component, and a *dynamically updating* Data Table showing Opportunities related to the selected Account. You'll learn how to use the [`Card`](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/card), [`Columns`](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/columns), `Tabs`, and [`Data Table`](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/data-table) components, and how to create a reactive connection between them.

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2F5XlkWUZXsmmeBtsF4K0K%2F2025-03-14_14-24-20%20(1).gif?alt=media&#x26;token=3bed03d5-d5df-4f5e-aa03-95bdefda1af5" alt=""><figcaption></figcaption></figure>

We'll build a component with the following structure:

* **Card:** A container for visual grouping.
* **Columns:** To create a two-column layout.
* **Tabs (Vertical):** Displays a list of Accounts, one Account per tab.
* **Data Table:** Displays Opportunities related to the *selected* Account.

The key is [*reactivity*](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/tutorials/reactive-components): selecting a different Account tab instantly changes the Opportunities displayed in the Data Table.

## Step-by-Step Instructions

### **Step 1: Create the Dynamic Component**

1. **Open the Avonni Components App:** From the Salesforce App Launcher, find and open "Avonni Components."
2. **Create a New Component:** Click **New**.
3. **Name the Component:** Enter a descriptive name (e.g., "VerticalAccountOpportunities").
4. **Open the Component Builder:** Click **Create**.

### **Step 2: Add and Configure the Card Component**

1. **Add the Card:** Drag an Avonni **Card** component onto the canvas.
2. **Set the Title (Optional):** In the Properties Panel, set the `Title` (e.g., "Accounts and Opportunities").
3. **Set the Icon (Optional):** Set the `Icon Name`.
4. **Expand to Content Fit:** Enable the **Expand to Content Fit** for a better visual.

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FbQQYK4swNfm2zbiLxXJl%2F2025-03-21_12-20-29.png?alt=media&#x26;token=31715227-5084-4a3d-88fe-d752ce1c2f9a" alt=""><figcaption></figcaption></figure>

### **Step 3: Add the Columns Component**

1. **Add the Columns:** Drag an Avonni **Columns** component *inside* the Card component.
2. **Create Two Columns:**
   * Select the Columns component, and in the Properties panel click on the plus button twice.
   * Select each column and set **Horizontal Align** to `x-small`.

### **Step 4: Add and Configure the Tabs Component (Accounts)**

1. **Add the Tabs:** Drag an Avonni **Tabs** component into the *first* column of the Columns component.
2. **Configure the Data Source:**
   * Select the Tabs component.
   * Set the Data Source to Avonni Query Data Source in the Properties Panel.
   * Click **Create a Query**.
   * **Object:** Select `Account`.
   * **Filters (Optional):** Add any filters to limit the displayed accounts.
3. **Configure Tab Display:**
   * **Orientation:** Set the **Orientation** property to `Vertical`.
   * **Items:** Map the `Name` field for the tab Label.

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FOpRVRdBl1T1qfIn1FNqI%2F2025-03-21_12-21-37.png?alt=media&#x26;token=d9c65cae-af55-4943-8591-fe32d35e3c4e" alt=""><figcaption></figcaption></figure>

### **Step 5: Add and Configure the Data Table Component (Opportunities)**

1. **Add the Data Table:** Drag an Avonni **Data Table** component into the *second* column of the Columns component.
2. **Configure the Data Source:**
   * Select the Data Table component.
   * Set the **Data Source** to **Avonni Query Data Source**.
   * Click **Create a Query**.
   * **Object:** Select `Opportunity`.
3. **Create the Reactive Filter:**
   * Go to the **Filter** section of the query.
   * Add a new filter condition:
     * **Field:** `AccountId` (on the Opportunity object).
     * **Operator:** `equals`.
     * **Value:** Use *direct attribute referencing* to link to the selected tab in the Tabs component:

       ```
       !TabsComponentName.activeTabValue
       ```

       (Replace `TabsComponentApiName` with the actual *API Name* of your Tabs component). This is *crucial* for the reactivity.
4. **Optional: Add Additional Filters**
   * Add a Filter
   * **Field:** Select `StageName`
   * **Operator**: Select `not in`.
   * **Value:** Add `Closed Won` and `Closed Lost`
5. **Configure Columns:**
   * Go to the **Columns** section in the Data Table Properties.
   * Add, remove, reorder, and customize columns as needed.

{% @arcade/embed flowId="lqknq3Wes0QbkLCPcAXW" url="<https://app.arcade.software/share/lqknq3Wes0QbkLCPcAXW>" %}

### **Step 6: Publish and Test**

* **Save and Activate:** In the Component Builder, **Save** and then <mark style="background-color:green;">**Activate**</mark> your Dynamic Component.
* **Open Lightning App Builder:** Go to an Account record page in Salesforce, click the Setup gear icon, then select **Edit Page**.
* **Add the Component:** In the Lightning App Builder, find your "VerticalAccountOpportunities" component (or whatever you named it) under "Custom - Managed" in the component list.
* **Drag and Drop:** Drag the component onto the desired location on the Account record page layout.
* **Save and Activate (Page):** Save and activate the *page*.

{% @arcade/embed flowId="ApD2Sr11jVEcRTrWEvUh" url="<https://app.arcade.software/share/ApD2Sr11jVEcRTrWEvUh>" %}