Bind data to UI

Now that you've fetched the required data from the data source, you need to bind the data from your executed action to the data field of the respective component.

In our case, we simply added the Load Users action to the data field of our Table component.

For some components, like Table, Detail, and others, you may also need to click the Regenerate structure button. In our example here, it will automatically regenerate table columns based on the data structure of our Action.

ℹ️ The Regenerate structure button works in the following way:

When you click it, UI Bakery takes the first object from the data property and, based on the name and format of the data, suggests what type of column or input (for a Form) should be generated. This way, if the Table structure has already been generated and you want to change only the data itself, you have two options: either use the Regenerate structure button or manually add columns to the table.

If you have a large number of columns, this button action will generate only about 20 columns and show only around 8. If you need more, you will have to add them manually.