Advanced Table

The Goal

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

Advanced Table Application

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

View[MainView]

• Datasource[users]

• MainView

  • Container[cntMain]

    • Label[lblUsers]

    • Advanced Table[tblUsers]

      • Column #1

        • Text[txtName]

      • Column #2

        • Text[txtAge]

Action

• GetUsersData

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.

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

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

FlowChart[GetUsersData]

GetUsersData[Output]

Tester[GetUsersData]

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

Outline[users]

users[Settings]

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

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.

tblUsers[Items]

Data Explorer[tblUsers]

Data Explorer[txtName]

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.

Follow up on our Advanced Table tutorial https://youtu.be/GJjuOJ6rOrw