# 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`](/dynamic-components/components/tabs.md) component, and a *dynamically updating* Data Table showing Opportunities related to the selected Account. You'll learn how to use the [`Card`](/dynamic-components/components/card.md), [`Columns`](/dynamic-components/components/columns.md), `Tabs`, and [`Data Table`](/dynamic-components/components/data-table.md) components, and how to create a reactive connection between them.

<figure><img src="/files/3Te7vb7ezK8c9P2NVdQ6" 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*](/dynamic-components/tutorials/reactive-components.md): 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="/files/6OJP7FXuN0jvqhUYqP0p" 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="/files/HBKslCEIdGh35ok4y5MP" 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/projects/dynamic-components/layout-and-interactions/vertical-tabs-with-reactive-data-table.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.