# 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.

{% hint style="success" %}
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.
{% endhint %}

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.

{% @arcade/embed flowId="ex8KtZc2n8wxyqgqJTgU" url="<https://app.arcade.software/share/ex8KtZc2n8wxyqgqJTgU>" %}

***

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 next to the *Columns* section.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F3wZjwSS6IibF6F9jnQnI%2FCleanShot%202025-06-23%20at%2012.53.04%402x-min.png?alt=media&#x26;token=1df7f1d9-8f6c-44d9-b5cf-7d3e0b1bbcc9" alt=""><figcaption></figcaption></figure>

#### :information\_source: 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/build-from-scratch/getting-started/bind-data-to-ui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.