For filtering tabular data as part of a reporting feature in a B2B web application targeted at relatively low-tech users, what are the pros and cons of having filtering UI be part of the column headers vs. in a separate part of the page?

For our application, filtering will almost always be included when executing a report for the first time, but relatively infrequently modified after running the report. In other words, it's more important to make it easy to define filters vs. being able to easily modify them later.

Filtering will almost always be simple: choosing a single value, a group of values, a range, or (for text values) contains/not-contains.

Examples of each model are below.

In-Grid Filtering Examples:

enter image description here

enter image description here

Out-of-grid filtering examples:

enter image description here

enter image description here

I'm admittedly leaning towards out-of-grid filtering because I think it may be more discoverable for novice users, and because it will work better if we want to add non-grid displays like charts. But I want to make sure I understand pros and cons of both options before deciding one way or the other.

  • You are most likely to get a better answers if you describe the specifics the filtering to be done - whatever answers people will give here, they may not be ideal to your specific needs (for instance, how complex filtering is, what fields are included). Also, I believe there is also a third option of a filter button that opens an interactive popup. – Izhaki Apr 16 '14 at 0:30
up vote 3 down vote accepted

I think the biggest con of "in-grid filtering" versus 'out-of-grid filtering" is the fact "in-grid filtering" often has limited space. Filters have to be small and have to be in direct context with the content in the column they're placed above.

I can't really back this up with any real data, but here's my personal view:
"in-grid-filtering" should be used to order rows (like ordering on date ascending or descending) or to filter a column like in your second image. When it goes beyond that I would suggest "out-of-grid-filtering".

I like the "look" of in-grid-column header filtering because it looks so organized but as the comment above mentioned if it's really filtering the whole set and not just sorting then it should be above the table and not in the column header. I would have just voted that comment up but I don't have enough points. I am on this question because I'm working on the a similar ui this morning.

I find that this is always a "gray area" depending on the specifics of the layout.

On the Pro side of in-grid filtering:

  1. You don't need to waste any space providing a label for the filter (as it is in the column title
  2. The context for the filter is visually obvious as it is nested in that column
  3. It is easy to see (when looking at the results after searching) what filter was applied to the column

On the Con side of in-grid filtering (or Pro side of out-of-grid filtering):

  1. You'll need to do it out-of-grid if the column you want to filter on is not visible (though some would argue this is an anti-pattern in itself)
  2. If your filter is a pseudo or conceptual filter e.g. "Open vs. Closed" for leads... where the definition of what qualifies as "open" or "closed" is a combination of filters (where create_date > X, sales_rep is set, sales_funnel > step Y, etc.)
  3. You need a lot of space to display a filter option 1

1 - This is a debatable item, even with in-grid filtering there's nothing saying that once invoked it can't overlay the grid and provide all the real estate needed e.g. enter image description here

Finally there's nothing saying that you can't have a bit of both. I've had lots of success with in-grid filtering, with the option to have a few high level out-of-grid filters above the result set.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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