How to load data into a Smart table in UI Bakery

In this guide, you'll learn how to use Data Tool to connect data to a Smart table in the UI Bakery app builder.

To fetch data from a URL, open the Builder, and create an action.

The first action should be an HTTP GET method request with a URL.

For example, you can use this one – https://example-data.draftbit.com/todo_lists?_sort=id&_order=desc

Don't forget to save your data as a variable in the App State Manager. In the mentioned example, the type of a variable is "array".

Give a name to the created action step, e.g. "loaddata".

Now, you need to open the Builder, and add a Smart Table. Click on the space where you need to place your Smart Table, and call for a Component picker using a grey plus icon inside the space.

Select the Smart Table, delete the hardcoded data from the "Data" field, and add the variable created earlier.

The last step is to set proper keys to get data in the Smart Table general settings on the sidebar.

Don't forget to execute an action consisting of 2 steps – HTTP GET method request and Save data to App State. Click on the Smart Table, open the data settings, select the action created earlier in the "On Init" field.

That's all!

Click on the preview button to see the result.

To see how it works:

  1. Register, or log in UI Bakery.
  2. Create a new project, or open the existing one.
  3. Follow the steps in the guide above to get the result.