Advanced Table
The Goal
Prepare a simple Application showing users' data in an Advanced Table.
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
How to bind Datasource with an Advanced Table.
The Project Structure
1. Create an Action Returning Data
First, prepare an Action returning the user's data in the array.
Create a new Action, name it
GetUsersData
.On Start -> Add and wire together Output and set up its return value as a ƒx function.
Now you can test your Action if the proper Datasource is returned.
2. Add and Bind the MainView
Datasource
MainView
DatasourceAdding Data from Action will bind the user's list with the MainView
.
Click on Add Data from Action in the Outline Panel, name it
users
, and associate Action Name ->GetUsersData
3. Prepare a Basic Layout with an Advanced Table
Let's prepare a basic Layout with an Advanced Table.
Place a new Container into the
MainView
Canvas, name itcntMain
, and set up its Item Flex ->Stretch
; Padding ->Wide
; Spacing ->Medium
If you like, place into
cntMain
a Label, name itlblUsers
and configure as follows:Value -> "
Users Advanced Table
"; Text Style ->Bold
; Font Size ->XLARGE
; Foreground ->RED
; Icon Name -> "mdi/account-supervisor
"; Icon Size ->Medium
Finally, put into
cntMain
a new Advanced Table, set up its ID ->tblUsers
and add two columns:Column
#1
-> Add one Column Titles ->Name
Column
#2
-> Add one Column Titles ->Age
4. Bind users
Datasource with the Advanced Table
users
Datasource with the Advanced TableMaking your tblUsers
Table life means that you have to bind Items property with users Datasource and place in components representing data content.
Edit
tblUsers
-> Items ->users.data
bind as a ƒx function.Into the Table Canvas columns, place two Text components and bind them dynamically:
Column
Name
-> add Text; ID ->txtName
; Value ->item.name
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.
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
Last updated