Table Filter

Problem

Users want to control which subset of the total information they want to see in tables.

Solution

Allow the users to select a subset of the information items directly above the table

From www.hotmail.com

Use when

You are designing a Web-based Application or any other site where a lot of data is presented in a table, possibly using a Table Sorter. The amount of information-items is high and users need to filter out certain items. for example, belonging to a certain category or which certain attributes.

How

There are two ways that a subset can be selected, either using one combo box based on one dimension or using combo boxes for every column in the table (multi-dimensional filter). When there are only a few meaningful subsets use a combo box. When users require very flexible filtering, for example in a issue tracking system, provide combo boxes in every column so that complex filters can be made.

When users can filter on column values, the interface becomes a variation of Faceted Navigation since users are building up facet values as they set column filters to specific values. After the selection by the user, the table is automatically redrawn showing only the elements of the subset. When users often create the same complex filter (e.g. all open issues assigned to me with high priority), provide functionality to store filters.

Usually, the table can only display the first items of the subsets and therefore Paging is needed to browse through the entire list.

Why

Filtering allows users to quickly reduce the amount of items shown and help them to adjust their information to the task. For expert users, multi-dimensional filtering on all columns can be a very powerful feature that can replace reporting functionality or the Advanced Search functionality.

More Examples

This example taken from Excel where multi-column filtering is used in an issue list:

Comments

2 comments have been added to this pattern

Morten, 12th August 2009

Good stuff!

But what about this: (as in my case)

Each row have many, many columns and the table only show a few of those column (which I can choose in the interface).

For example a person which has a name, address, gender, date of birth, ++ and the table only shows the name.

Now I want to filter the gender showing only the boys of the bunch, still only showing the name. And most importantly without first bringing up a gender culumn and then choosing "male" in the drop down.

I'm just throwing this out there. It's a tricky one :)

Basel Shishani, 14th August 2011

I commend you for putting this useful information on the web, but the language you use is sometimes not precise and requires some head scratching on part of the reader.

For example: 'which subset of information'? What does that mean? When you filter by columns that's a subset of information and when you filter by rows that's again a subset of infromation. So which one are you talking about.

Then you have a pic showing a table from Hotmail, which does not seem related to the concept you're discussing. The reader checks 'directloy above the table' and there's onthing that allows selecting a subset of information. Rather there are actions to be performed on selected rows - and the selection is done on the side per row not at the top - so how is this pic related to the concept you're presenting.

'The amount of information-items is high' - here the reader is starting to guess that are you seem to be talking about rows?! But can't you just say too many rows?!