# Advanced Table

### The Goal

Prepare a simple *Application* showing users' data in an *Advanced Table*.

![Advanced Table Application](/files/LHBi53mrODSHC9xl3hX2)

### The Description

Any loaded *Datasource* can be bound with a content of an *Advanced Table*. In our case, we will bind an *Action*, returning the user's data.

### Knowledge You Will Get

1. How to bind *Datasource* with an *Advanced Table*.

### The Project Structure

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] Datasource\[`users`]

* [ ] MainView
  * [ ] Container\[`cntMain`]
    * [ ] Label\[`lblUsers`]
    * [ ] Advanced Table\[`tblUsers`]
      * [ ] Column `#1`
        * [ ] Text\[`txtName`]
      * [ ] Column `#2`
        * [ ] Text\[`txtAge`]
          {% endtab %}

{% tab title="Action" %}

* [ ] `GetUsersData`
  {% endtab %}
  {% endtabs %}

### 1. Create an Action Returning Data

First, prepare an *Action* returning the user's data in the *array*.

1. Create a new **Action**, name it `GetUsersData`.
2. *On Start* -> Add and wire together **Output** and set up its return *value* as a *ƒx function.*

```javascript
[
  {name: "John Doe", age: 32},
  {name: "Jane Doe", age: 29}
]
```

Now you can test your *Action* if the proper *Datasource* is returned.

{% tabs %}
{% tab title="FlowChart\[GetUsersData]" %}
![](/files/UUsl5Smj6WI2ky8XIYYg)
{% endtab %}

{% tab title="GetUsersData\[Output]" %}
![](/files/UTZv9wsvHPR0qLJvblXE)
{% endtab %}

{% tab title="Tester\[GetUsersData]" %}
![](/files/pWcEVVKxW2HDPBz4bI1T)
{% endtab %}
{% endtabs %}

### 2. Add and Bind the `MainView` Datasource

*Adding Data from Action* will bind the user's list with the `MainView`.

1. Click on **Add Data from Action** in the *Outline Panel*, name it `users`, and associate *Action Name* -> `GetUsersData`

{% tabs %}
{% tab title="Outline\[users]" %}
![](/files/n8Y16GXeO0MTauJvfjGX)
{% endtab %}

{% tab title="users\[Settings]" %}
![](/files/08Un4PCKlCZa35f1SIK4)
{% endtab %}
{% endtabs %}

### 3. Prepare a Basic Layout with an Advanced Table

Let's prepare a basic *Layout* with an *Advanced Table*.

1. Place a new **Container** into the `MainView` *Canvas*, name it `cntMain`, and set up its *Item Flex* -> `Stretch`; *Padding* -> `Wide`; *Spacing* -> `Medium`
2. If you like, place into `cntMain` a **Label**, name it `lblUsers` and configure as follows:
   1. *Value* -> "`Users Advanced Table`"; *Text Style* -> `Bold`; *Font Size* -> `XLARGE`; *Foreground* -> `RED`; *Icon Name* -> "`mdi/account-supervisor`"; *Icon Size* -> `Medium`
3. Finally, put into `cntMain` a new **Advanced Table**, set up its *ID* -> `tblUsers` and add two columns:
   1.  *Column* `#1` -> Add one *Column Titles* -> `Name`
   2. *Column* `#2` -> Add one *Column Titles* -> `Age`

### 4. Bind `users` Datasource with the Advanced Table

Making your `tblUsers` *Table* life means that you have to bind Items property with users *Datasource* and place in *components* representing data content.

1. Edit `tblUsers` -> *Items* -> `users.data` bind as a *ƒx function.*
2. Into the *Table Canvas* columns, place two *Text* components and bind them dynamically:
   1. *Column* `Name` -> add **Text**; *ID* -> `txtName`; *Value* -> `item.name`
   2. *Column* `Age` -> add **Text**; *ID* -> `txtAge`; *Value* -> `item.age`

{% hint style="info" %}
Keep in mind that you can always follow different *Datastructures* by selected components in the *Data Explorer*. You can see `items` under `tblUsers`; meanwhile, `item` on the column chosen component.
{% endhint %}

{% tabs %}
{% tab title="tblUsers\[Items]" %}
![](/files/FELdDCQndrD0thVHU2Ws)
{% endtab %}

{% tab title="Data Explorer\[tblUsers]" %}
![](/files/RFoRgD4Qs5JTblHIkM2S)
{% endtab %}

{% tab title="Data Explorer\[txtName]" %}
![](/files/r3zJ4ljqyWQ3Ns8jdm5d)
{% endtab %}
{% endtabs %}

### The Conclusion

The *Advanced Tables* are effectively used with many different components, like icons or others. Try to add more columns and upgrade *return values* by the *Action*.

{% hint style="info" %}
Follow up on our *Advanced Table* tutorial <https://youtu.be/GJjuOJ6rOrw>
{% endhint %}


---

# 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.adapptio.com/working-with-adapptio/components/advanced-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.