1

I'm working on a web app containing a lot of datatables with some well known filters on each page, all of them pertaining to a specific domain (or website):

enter image description here enter image description here enter image description here

A domain may or may not have an organisation (although in practise this is always true). A domain always has a country.

With some test data this would look something like:

enter image description here enter image description here enter image description here

I want to come up with a single dropdown to filter on domain, organisation and country as i want to conserve space and use a single UI component for simplicity. I'm having trouble coming up with a good design.

Some inspiration i thought of:

Microsoft advertising (bing ads);

enter image description here

Google ads has 2 dropdowns in the main menu header;

enter image description here

Google analytics uses multiple levels which may be something i can go for:

enter image description here

Notes;

  • Multiple options may be selected
  • Most of the times the filter for domains is used, occasionally the other ones.
  • It may look like the organisations are grouped per country, which is usually the case but not always
  • There may be other properties to filter down the line (like the main language or something) but lets keep that out of scope for now.
  • This is my first time posting here so let me know if this question is not a good fit.
Improve this question
1
  • 1
    I think you're overcomplicating things. Your UI is confusing; you have a button with a reload icon (why?), then a search box, then a select field, then a date field. And after that, you want more dropdowns. I'd just use a regular search box with predictive search and then offer to filter results (if needed). If this is not what you're looking for, search for "faceted search," which is what you actually want, but has some principles that make it less confusing.
    – Devin
    Commented Aug 18, 2023 at 23:33

1 Answer 1

Reset to default
1

This is for data tables, so I'm assuming you have some space to work with. If you need everything you showed us in your wireframe, I suggest grouping the filters together, and keeping the refresh and search separate. I'm working on a single data table and I have filters in the top left of the table, search in the top right, and refresh in the bottom left. Depending on whether search of filter will be used more by your user, you can switch those 2. Additionally, you can try to merge your filters together kind of like this. enter image description here

Improve this answer

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.