Loading dropdown values dynamically

To quickly populate your dropdown values into the Select component of the Table, it’s best to use the below approach:

Add a Select component above your Table (you should already have a connected data source and data loaded to the Table);

Go to the Component’s Main settings and structure tab - Options;

Switch to JS Mode and populate the exemplary code as below that should return the unique values that you need to see in the dropdown (we are using Country values as an example)

function onlyUnique(value, index, self) {
return self.findIndex(x => x.value === value.value) === index;
}
return {{ actions.loadData.data }}.map(item => {
return {value: item.country, title: item.country};
})
.filter(onlyUnique);

:bangbang: Note! Some points worth mentioning about the code above:

  1. The data is taken from the data loading step - return {{ actions.loadData.data }}
  2. You will need to replace the variables based on your data, Country variable is used as an example here - return {value: item.country, title: item.country} - so don’t forget to edit your code before using it

Time to filter the data in the table according to the selected value in the dropdown:

  1. Click on the Select component - in the right menu, go to the Triggers tab

  2. Set a name to your Select component, e.g. selectItem

  3. 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, with an additional Filter by the required variable. Reference the Select variable as {{ui.selectItem.value}}, e.g. Country = {{ ui.selectCountry.value}}

  1. Assign this Action to the Table: select the Table, and change the reference on the Data settings {{actions.selectItem.data}}