4
3 Comments

What's a good UX for table filtering?

I have quite a few data tables on my web app (like the one attached) and because it can contain a couple thousand rows, I want to have an option to filter down that data. I've seen SO MANY options that I'm not sure where to go next.

What I've seen so far:

  1. A filter button beside the header name that pops a context menu.
  • Good: doesn't take much space
  • Bad: I already have a filter icon and it's not easy to identify what filter was applied unless you click on it again
  1. A filter row just below the header.
  • Good: easy to spot what filters have been applied and easy to implement
  • Bad: It can look like just another data row and adds restrictions as to a single filter per column
  1. An independent panel above the table
  • Good: easy to implement, flexible, can be collapsed/expanded
  • Bad: It's outside the context of the table, would probably end up in a lot of select/input fields. I would probably have to move the date filter into this panel for consistency
  1. A single "advanced" search field (SQL query builder)
  • Good: very very very flexible, people can build OR/AND clauses, use LIKE, great/less than etc.
  • Bad: need to be careful with SQL injection, requires SQL knowledge (my audience are developers, but not everyone knows it). It's harder to implement because as it'd required some kind of auto-complete to help people identify column names

Have you implemented something like this? Or maybe you known an app that has nailed this problem? Would love to see some screenshots to give me some ideas.

Thanks!

posted to Icon for group Design and UX
Design and UX
on January 19, 2021
  1. 1

    Build CSV export. Will solve this and many more issues.

  2. 1

    Hi Sumbit,

    Great points there. I would recommend having like a '+' button to add new conditions to your filter. Benefits:

    • You can have as many filters as columns on the table (capped at a single filter per column) and the user can select from a list of column headers.
    • Each column can have it's own filtering logic (Greater than, Broad/Phrase match, etc)
    • When a new filter is added, it is added to the right side of the existing filters. Each filter can be deleted easily as there is a 'x' to its right.

    I hope this has given you some ideas and if not, at least another option out there!

    Regards,
    Sam

    1. 1

      yeah, you're right, I've seen that a few times as well. That's another option for sure, but I still haven't decided which one to go with. I might start simple and improve later.

Trending on Indie Hackers
How I Closed My First SaaS Client Without Writing a Single Line of Code User Avatar 16 comments Why Building in Public Changed My SaaS Journey Forever User Avatar 16 comments Meme marketing for startups 🔥 User Avatar 12 comments From $0 to $10k MRR: My Indie Hacker Journey – Part 2 User Avatar 8 comments From $0 to $10k MRR: My Indie Hacker Journey – Part 1 User Avatar 6 comments Protect your momentum like your life depends on It User Avatar 5 comments