# Reactive Map and Data Table

## Overview

This example demonstrates an everyday use case for reactive components: connecting an Avonni [Data Table](/dynamic-components/components/data-table.md) and an Avonni [Map](/dynamic-components/components/map.md) to create an interactive visualization. You'll see how selecting a record in the Data Table can *automatically* update the Map to display the corresponding location.

<figure><img src="/files/A08ayPExTrSPSQPjixBk" alt=""><figcaption></figcaption></figure>

### What We'll Build

We'll create a simple component with two main elements:

* **Data Table:** Displays a list of Accounts.
* **Map:** Displays the location of the *currently selected* Account from the Data Table.

### How it Works

The key to this interaction is a *reactive filter* on the Map component's data source:

1. **Data Table:** The Data Table is configured with a data source (e.g., a Query) that retrieves Account records, *including address/location information* (e.g., Billing Street, Billing City, Billing State/Province, Billing Zip/Postal Code, Billing Country).
2. **User Selection:** The user selects an Account in the Data Table.
3. **`firstSelectedRow` Update:** The Data Table's `firstSelectedRow` property automatically reflects the newly selected Account.
4. **Reactive Filter:** The Map component's data source is configured with a filter that references the `firstSelectedRow.Id` property of the Data Table. *This is the reactive link.*
5. **Automatic Map Update:** Because of the reactive filter, when `firstSelectedRow` changes, the Map's data source re-queries Salesforce, retrieves the location data for the *newly selected* Account, and updates the Map display automatically.

This creates a seamless user experience where selecting an Account instantly updates the Map to show its location.

***

## Guided Steps

To create a reactive connection between a Data Table and a Map, follow these steps:

{% stepper %}
{% step %}

#### **Prepare the Layout**

**Two-Column Layout:** Add a two-column layout component to your Dynamic Component. This will allow you to place the Data Table and Map side-by-side.
{% endstep %}

{% step %}

#### **Add and Configure the Data Table (Master)**

* **Add Data Table:** Drag an Avonni Data Table component into the *left* column of your layout.
* **Configure Data Source:**
  * Click on the Data Table component to open its properties panel.
  * Select **Avonni Query Data Source** as the data source type.
  * Click **Create a Query**, or select an existing query.
  * **Object:** Select `Account`.
  * **Filters (Optional):** Add any *static* filters you need (e.g., to show only Accounts of a certain type). Do *not* add the reactive filter here.
  * Add columns to your Data Table via the "Columns" section in the Properties Panel. For each column, click "**Add Column**", select a "Source Field," and configure any other desired settings (Label, Editable, etc.).
* **Limit Row Selection:**
  * In the Data Table properties, find the setting for **Max Row Selection** (or similar).
  * Set it to `1`. This ensures that only one Account can be selected at a time, which is necessary for our reactive Map.
    {% endstep %}

{% step %}

#### **Add and Configure the Map (Detail)**

* **Add Map:** Drag an Avonni Map component into the *right* column of your layout.
* **Configure Data Source:**
  * Click the map to open the properties.
  * Select **Avonni Query Data Source**.
  * **Object:** Select `Account`.
* **Create the Reactive Filter:**
  * Open the filter editor for the Map's query data source.
  * **Add a Filter Condition:**
    * **Field:** Select the `Id` field (or the field that uniquely identifies Accounts).
    * **Operator:** Choose `equals`.
    * **Value:** Use *direct attribute referencing* to link to the selected row in the Data Table:

      ```
      !AccountsTable.firstSelectedRow.Id
      ```

      (Replace `AccountsTable` with the actual *name* of your Data Table component).
* **Select Map Location Fields**
  * In the Map Properties, select the field that matches the location fields.
  * **Configure Map Location Fields:** In the Map component's properties, find the section for configuring location data (it might be labeled "Location," "Map Settings," or similar). You need to tell the Map component *which fields* in your data source contain the address or coordinates. For example, you might map:

    * `BillingStreet` to the "Street" field in the Map settings.
    * `BillingCity` to the "City" field.
    * `BillingState` to the "State/Province" field.
    * `BillingPostalCode` to the "Zip/Postal Code" field.
    * `BillingCountry` to the "Country" field.

    Select the correct fields from your data source corresponding to each part of the address. If you are using latitude/longitude, map those fields accordingly.

<figure><img src="/files/E1wlqPvlR2nfV3pYM24F" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Test the Reactivity**

* **Preview:** Preview your Dynamic Component.
* **Select an Account:** Click on a row in the Data Table.
* **Observe the Map:** The Map should automatically update to display the location of the selected Account
  {% endstep %}
  {% endstepper %}


---

# 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/dynamic-components/tutorials/reactive-components/maps-and-geolocation/reactive-map-and-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.