Load dropdown with dynamic data
Learn how to load the dropdown data dynamically
When working with a Select component in Tables, you might not want to hardcode all of the dropdown values, so let’s check out how to populate the values dynamically with some JavaScript.
We suppose that by this time you have already connected your app to the data source
  1. 2.
    Add a Select component.
  2. 3.
    Go to the Component’s Main settings and structure tab - Options.
  3. 4.
    Switch to JS Mode and populate the exemplary code that should return the unique values that you need to see in the dropdown (we are using Country values as an example)
1
function onlyUnique(value, index, self) {
2
return self.findIndex(x => x.value === value.value) === index;
3
}
4
return {{ actions.loadData.data }}.map(item => {
5
return {value: item.country, title: item.country};
6
})
7
.filter(onlyUnique);
Copied!
Check the dropdown - the values should sit there already!
Now, we need to make sure the data in the table is filtered according to the selected value in the dropdown. Follow the below steps:
  1. 1.
    Click on the Select component - in the Main Settings & structure, go down to the Triggers tab
  2. 2.
    For ease of use, set a name to your Select component, e.g. selectItem (for our example case, that would be selectCountry)
Setting Component Name
3. Now, we need to add a new Action triggered On Changes: select Add new Action from the actions’ dropdown
The Action includes the loadData action from the previous step, BUT we add an additional Filter by the required variable. Reference the Select variable as {{ui.selectItem.value}}, e.g. Country = {{ ui.selectCountry.value}}
Adding a Filter to the Action
4. As the last step, we also need to assign this Action to the Table, so select the Table, and change the reference on the Data settings {{actions.selectItem.data}}
Reaasigning Action to the Table
Try the dropdown now - the values will be dynamically updated as you change the selection
Last modified 1mo ago
Copy link