Sort by dropdown option

Hi,

thanks for your post, and sorry for the trouble.

Unfortunately, I’m not aware of an existing solution to this. You could maybe try a custom approach using JavaScript/jQuery, where selecting an option from the dropdown then triggers a click on the cell header of the date column (which you could hide with CSS code).

Regards,
Tobias

Hello Tobias,

I have a custom HTML solution that I want to share for adding a dropdown menu triggering A-Z/Z-A sorting on a specific column header. Below is the code with modifiable variables “column-6” and “widget-7”. Works for hidden columns too.

<script>
            setTimeout(() => {
                var flag = 0;
                document.getElementsByClassName("column-6")[0].click();
                var dropdown = document.createElement("div");
                dropdown.className = "column-filter-widget";
                dropdown.id = "dropdown";
                dropdown.innerHTML = '<select class="widget-7"><option value="">Sort by length</option><option value="1">Oldest to Newest</option><option value="2">Newest to Oldest</option></select>';
                document.getElementsByClassName("column-filter-widgets")[0].appendChild(dropdown);
                document.getElementById("dropdown").addEventListener("change",function(){
                    let selectedValue = document.getElementsByClassName("widget-7")[1].value;
                    if(selectedValue == 1 && flag == 1){
                        document.getElementsByClassName("column-6")[0].click();
                        flag = 0;
                    }
                    else if(selectedValue == 2 && flag == 0){
                        document.getElementsByClassName("column-6")[0].click();
                        flag = 1;
                    }
                });
            }, 1000);
        </script>

Thank you for the continued support,
Vlad

• This reply was modified 3 years, 10 months ago by vladsitaru.

Hi,

interesting idea! Thanks for sharing this!

Best wishes,
Tobias