1

I am trying to filter data in tables by converting each header into a split button. Left part of the button will sort the data on click while the right part opens a dropdown at the moment. It looks like this currently enter image description here

It also seems that there is a possibility to open that area in a modal. I couldn't find any practices for modals vs dropdowns when it comes to table headers.

  1. One problem I noticed with dropdowns is that they get a little clunky in the mobile view
  2. Another problem is I have a dropdown inside my dropdown. Is this an acceptable UX thingy

enter image description here

Can someone kindly help clarify the right approach for this

2
  • 1
    Do you have access to a designer?
    – Confused
    Dec 2, 2018 at 14:35
  • @Confused unfortunately no, this is a bootstrapped side project and I am working on it alone
    – PirateApp
    Dec 2, 2018 at 15:16

2 Answers 2

2

Agree with the above that there are various considerations, such as how many options will be in that filter panel, is this a responsive page or will there be a mobile version of this experience, etc. Certainly you can have filtering options in a dropdown - pretty common - but it might depend on how many options you want in there.

But if the "clunkiness" issue you refer to is the fact that the dropdown covers your column content, you might encounter that in any UI if there are enough columns and depending on the data. if that's a concern you might want to have the filter panel for each column appear below the table header, pushing the content down so it is not covered... the filter panel in this context could span the full table and get as tall as it needs to accommodate more options, something like this:

table with filter options expanded below the header

Hope there's something useful here - Good luck!

1

There are other considerations that you need to take into account when deciding if a dropdown or a modal is going to be best for your table header filtering. There may not be an optimal solution, but you need to work through the pros and cons based on how the rest of the application interface has been implemented, and the data that you need to cater for.

For example, you will find that dropdowns can be a bit clunky if you have a very long list of items to scroll through, or if a user needs to select multiple items from a filter. A modal can be a little bit easier because you have slightly more room to work with, but as you pointed out it is also clunky on mobile.

There are alternate design patterns for data tables, where you can still use the accepted pattern of having a sort option attached to the table header, but put the filtering option above the table header row instead and implement a consistent filter pattern that is suited to the amount of data that you need the user to work through most frequently. This can even be a side panel or a fixed section above the data table. You'll have to decide on the best option based on the structure of the data that you need to display efficiently.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.