I have a mapped option that I am using for a select component. I want to sort the options alphabetically directly in the inspector UI element, but I am unsure of what JS function to use and what is possible. I'd like to avoid using a transformer because I have several of these mapped options that I need to have sorted and don't want to have a different transformer per component. Is there something simple that I am missing?
Since the values here refer to the items in an array, the most direct thing to do (probably) is sort as part of the query that generates this data. If you can't adjust the queries to sort for you before using the results in a component, and since you said you don't want to have to make a transformer for each component that needs to get sorted you might be able to create a generic transformer that uses a switch/case (by query) for the different sorting options required for each query to return the items to desired components.
@pyrrho Is there a was to pass the array to a generic transformer or JS code that would return the array sorted? If I could have a single transformer that acts as a defined sort function and I can feed in my different items and arrays that would be perfect. Just not sure if thats possible and how to do it
After much help and guidance from @Tess and @ScottR here is a way to sort locally in your component. I am using a query to pull in the data table that I then select a specific field from to populate the mapped options I want. By selecting the fx option for your data source on the component you can write more complex one liner JS code that will let you sort over that specific field.
I have the following in my dynamic coded data source:
{{_.sortBy(formatDataAsArray(your_data_source_query.data), ["field_you_want_to_sort_on"])}}
And for the value and label for the mapped options of the component I have the following:
{{item.field_you_want_to_sort_on}}
This alphabetizes the mapped options and doesn't required a transformed in order to sort over the desired field.
1 Like
