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 selected the Load Users action in the Data field of our Table component.

For such components as Table, Chart, List View, and Grid View, the Data field is a dropdown. You just have to click it to see all available actions and variables - Suggested, Page, and App - and easily switch between them. The component structure will automatically regenerate based on your selection.

If you need to undo the changes, you can revert component structure to its previous state by clicking Undo in the toast that appears at the top or clicking the Revert button next to component structure.

---

The JS mode is still available for the Data field of Table, Chart, List View, and Grid View so you can switch to it if you prefer. In this mode, you can bind your actions to components manually, like before, and also manually regenerate component structure using the Generate structure button.

ℹ️ The Generate 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 Generate 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.