Adding paging, sorting and filtering toolbars to a table

Question

I have a bunch of report views, which essentially are tables. They should enable the user with sorting, paging and filtering capabilities.

My idea is to add those features via menu-bars.

Paging would go at the bottom:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Sorting and Filtering should go on top.

But they're displayed differently because if paging is needed is determined at opening time, but filtering and sorting are optional.

In the case, that everything is needed, it would look like this:

^{download bmml source}

It's sorted by multiple columns and has a bunch of expert filters.

The question is, how should I handle the visibility? I don't want to show GUI elements that aren't needed every time, but I also don't want to let the user miss them.

Maybe my menu-bar idea isn't that good at all and I should use external dialogs or something.

Answer 1

The best implementation of this that I have seen is from OkCupid. When searching for matches, there are a number of filters that can be added (via the advanced tab), which you only see once you have chosen them.

The two bottom ones are examples of advanced filters, and can be removed by selecting the 'x'.

This has been tried and tested on millions of users, and has proven to be flexible, and easy to use. I would suggest modelling your filtering on theirs. I would however consider changing the 'advanced' tab to something like 'add filter'.

Answer 2

Your solution is good.

I am assuming the paging is always visible (unless content is <1 page)

Given that you want to hide the other elements: Sorting, Filter unless needed, I would simply provide two clickable buttons/links at the top of the table that would expand inline to reveal the GUI you have shown above. That's it, very simple and you are done. e.g.

^{download bmml source – Wireframes created with Balsamiq Mockups}

The important thing is to have Elements to show that the feature exists, if you want to hide the corresponding UI element.

Though for Sorting I would stick with conventions, i.e. titles of the column, rather than providing a separate interface, as it is confusing. In your mockup, you have the sorting indication arrows and the sorting bar. However, assuming you can't do header sorting, the menubar idea is ok.