---
title: "Displaying a Subview in a Table Row"
---

# Displaying a Subview in a Table Row

> In a Perspective Table component, you have the option to enable subviews. When a subview is set up, you can click on the Expand icon and have another view display without closing the first view. This example sets up a table with several city statistics and when the Expand icon is selected for a city, a Map component will be displayed showing the location of the city on the map.

This example focuses on using a Map component in a subview on the table, but the larger implication here is that subviews in table rows can receive values from each row and utilize them with property bindings, allowing each subview to contain data unique to the row. The image below shows what our finished view will look like.

![](subview-imgs/2019-12-05_16-51-49.png)

## Summary of Subviews
When subviews are enabled for each row in a table, the row will implicitly pass some parameters over to the subview. The passed parameters are:

* row - a number representing the row
* rowIndex - a number reepresenting the index of the current row
* value -  JSON Object representing the contents of the row. The value of each column in the row will be a value under this object. 

Thus, in the image above where our table has a **country** column, the subview will receive the value of country at `params.value.country`. So you can create a component binding on the subview's configuration that references a value at `params.value.country`.

## Create a View for the Table Data
We'll start by creating a view that will contain the table. 
1. Right click on Views to create a view.  In the example, we named the new view **CityStats**, set it as a **Coordinate** root container Type, and checked the Page URL option. Pages can be added later as well. 

    ![](subview-imgs/2020-01-02_13-33-34.png)

2. Drag a Table component onto the view. 
3. The table needs to have Latitude and Longitude data for the map to show that location. Highlight and copy the following data:
    ```
    [
    {
        "city": "Folsom",
        "country": "United States",
        "population": 77271,
        "lat": 38.678287,
        "lng": -121.177318
    },
    {
        "city": "Jakarta",
        "country": "Indonesia",
        "population": 10187595,
        "lat": -6.208404,
        "lng": 106.849087
    },
    {
        "city": "Madrid",
        "country": "Spain",
        "population": 3233527,
        "lat": 40.41498,
        "lng": -3.702002
    },
    {
        "city": "Prague",
        "country": "Czech Republic",
        "population": 1241664,
        "lat": 50.073453,
        "lng": 14.450091
    },
    {
        "city": "San Diego",
        "country": "United States",
        "population": 1406630,
        "lat": 32.713832,
        "lng": -117.158616
    },
    {
        "city": "San Francisco",
        "country": "United States",
        "population": 884363,
        "lat": 37.776379,
        "lng": -122.423501
    },
    {
        "city": "Shanghai",
        "country": "China",
        "population": 24153000,
        "lat": 31.227167,
        "lng": 121.498839
    },
    {
        "city": "Tokyo",
        "country": "Japan",
        "population": 13617000,
        "lat": 35.69042,
        "lng": 139.746457
    },
    {
        "city": "Washington, DC",
        "country": "United States",
        "population": 658893,
        "lat": 38.90598,
        "lng": -77.04882
    },
    {
        "city": "Wellington",
        "country": "New Zealand",
        "population": 405000,
        "lat": -41.284336,
        "lng": 174.770488
    }
    ]
    ```
4. Right click on the data property of the Table component and select **Paste**.

    ![](subview-imgs/2019-12-04_15-18-59.png)

5. Your table will now display the data for 10 rows and 5 columns.

    ![](subview-imgs/image2021-10-29_13-39-23.png)

6. Next, enable the **subview** property under props.rows. 

    ![](subview-imgs/2019-12-04_15-46-43.png)

7. The table now has Expand ![](<subview-imgs/expand-tiny 15.png>) icons for each row.

    ![](subview-imgs/2019-12-05_9-37-17.png)

## Create a View for Displaying the Map
Next we'll make the view that will be display a map of the cities in our table. 

1. In the Project Browser, right click on Views to create a view. Name the new view **CityMaps**. Set it as a **Flex** layout, so the map easily takes up all available space. Lastly, do not check the Page URL option, as we don't need a corresponding page. 

    ![](subview-imgs/2020-06-04_10-33-13.png)

2. Drag a Map component onto the **CityMaps** View.
3. Set the Map's **position.grow** property to **1** so it resizes to take up the entire view.
4. Click on the **CityMaps** view in the Project Browser. In the Property Editor, click the ![](image2022-11-9_11-25-38.png) **Add View Parameter** link under **Params** and choose **Object**.
5. Double click on key, and enter **value** as the object name. Note that the object **must** be named "value". 
6. Next, we'll add two parameters to that value object. 
    1. Click ![](image2022-11-9_11-25-38.png) **Add View Parameter** link under Params and choose **Value**. 

        ![](subview-imgs/2019-12-05_16-27-13.png)

    1. Double click on key, and enter "**lat**". This matches the lat (latitude) column from the Table on the CityStats view. This name must *exactly* match the column name in the table.
    1. Click the ![](image2022-11-9_11-25-38.png) **Add Object Member** icon next to value and choose **Value**.
    1. Double click on key, and enter "**lng**". This matches the lng (longitude) column from the Table on the CityStats view. This name must exactly match the column name in the table.

        ![](subview-imgs/2020-08-31_11-15.png)

        :::note
        It's important that the object here is named "value". The perspective table we're going to embed the map into has a feature where content from each row in the table can be passed to its subview. This mechanism requires that the subview contain an object named "value". If you want the subview to be passed any of the values from its parent row, simply make a "value" object, and add values to it where the keys match the name of the column on the table. 
        :::
7. Next select the Map component. We need to set the map's initial geographic center to the view parameters. In the Property Editor, expand the **init.center** property. 
    1. Click on the **Binding** ![](<subview-imgs/binding small-24.png>) icon next to the **lat** property. 
    1. On the Edit Binding screen, select **Property** as the binding type.
    1. Click the **Browse Properties** ![](<subview-imgs/insert_property small_24.png>) icon. Navigate to view, the params, the value, and then the **lat** property. 
    1. Click **OK**, then click **OK** again to save the binding.
    :::note
    At this point, the init.center.lat property is bound to view.params.value.lat where view.params.value.lat's value is "value" instead of a valid latitude number. This will cause a Component Error which is expected. 
    :::

    ![](subview-imgs/2019-12-05_14-23-23.png)

## Use the Maps View as a Subview for the Table
Lastly, we need to tell the CityStats View to use CityMaps as its subview.

1. On the CityStats View, select the **Table** component.
2. In the Property Editor, scroll down to the **rows.subview.enabled** property. 
3. Next, enable the **enabled** property.

    ![](subview-imgs/2019-12-04_15-46-43.png)

    As a result, you'll notice the table now has **Expand** ![](<subview-imgs/expand-tiny 15.png>) icons for each row.

    ![](subview-imgs/2019-12-05_9-37-17.png)

4. Find **rows.subview.viewPath**, and click the dropdown to see the a list of possible views. Choose **CityMaps** from the list and click **OK**. 

    ![](subview-imgs/2019-12-05_15-47-05.png)

5. **Save** your project.  
6. Put the Designer into **Preview** mode. Click on the **Expand** ![](<subview-imgs/expand-tiny 15.png>) icon next to one of the cities. You'll see a map of the city appear underneath the table row for that city. To close the map, click the **Collapse** ![](<subview-imgs/collapse small-24.png>) icon.

    ![](subview-imgs/2019-12-04_14-58-20.png)