# Advanced Table

### The Goal

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

![Advanced Table Application](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FV9x41pT23xjVAwPKK4Vd%2Fimage.png?alt=media\&token=eec8ca8f-83e3-406b-8b63-f3b372370a0b)

### 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]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FRBTx33Q9snBsXOVm9pAf%2Fimage.png?alt=media\&token=61d0e838-22f3-4dcf-8064-9c3557a4b496)
{% endtab %}

{% tab title="GetUsersData\[Output]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FjQV2x5YoMp8ql878VggQ%2Fimage.png?alt=media\&token=eea87e3b-9092-4011-86c6-b8ba50af6703)
{% endtab %}

{% tab title="Tester\[GetUsersData]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FoZH92qWMjcfFqDUU6twP%2Fimage.png?alt=media\&token=b0c74656-a4e9-49cd-9381-9fa7f77b6e36)
{% 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]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FneWWwtlhgDCZuYtAz70O%2Fimage.png?alt=media\&token=4a6c7a77-9b2f-46a2-80c4-6b9467e17713)
{% endtab %}

{% tab title="users\[Settings]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FlXiKaGvfsinIEUr4IAF9%2Fimage.png?alt=media\&token=6a9b26c4-e9f7-4ed7-8c1b-67d5346eb6d6)
{% 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]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2F4gpV0THLd9zwPILyR1KZ%2Fimage.png?alt=media\&token=d8fb4355-74a3-4072-8de9-3a873302cb09)
{% endtab %}

{% tab title="Data Explorer\[tblUsers]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FOBUNqZRDXRabd09zYoha%2Fimage.png?alt=media\&token=c9765240-decd-4a19-bdab-50738342ff58)
{% endtab %}

{% tab title="Data Explorer\[txtName]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2F95VumIWYus0nCX1ajj0g%2Fimage.png?alt=media\&token=c8106d4d-da1b-485b-b4b3-6df50b434a27)
{% 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 %}