How to use Select components in Smart tables in UI Bakery

Check a step-by-step guide to learn how to work with Select components in the Smart tables you build in UI Bakery.

Firstly, you need to have real data that is not hardcoded in a Table.

1. Open the Builder in UI Bakery, and create a Table here.

2. Select a Smart Table, and go to its data settings. Find the "On Init" action here.

3. Create an action consisting of two steps: HTTP GET method request (you can use this one: https://example-data.draftbit.com/todo_lists?_sort=id&_order=desc) and Save Data to App State.

4. Create a variable, give it a name, and set its type as "array".

5. Go back to the Builder, select the Smart table, and delete the hardcoded data in the "Data" field. Type {{ here, and select the variable created previously.

6. Set proper IDs for the Smart table to load the data into the Smart table.

7. Let's now work with the Select component. Put the code in the "Columns" field.

Use this variable to select values from real data:



8. Go back to the Data tool, and select the action created at the beginning.

9. Add one more step here – a Code step. Paste the code:



10. Finally, save the Data to App State Manager, create a variable named namefilterlsit, and set its type as "array".

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.