Table Filter

Problem

Users want to decide which subset of the data they want to see in a table.

Solution

Provide a way to let the users to specify the filters for the data directly above the table.

Context

You are designing a view where you need to display a table with a lot of rows, possibly using Sortable Table and Paging.

Rationale

Filtering the content allows users to focus in the information that is important for the current task. It lets them better understand the data and find the rows they are looking for.

It can be seen as an implementation of Active Filtering.

Implementation

There are two ways of specifying the filter. One is using a set of combo boxes on top of the table, one for each dimension. The other one is having one combo box on top of each column. Depending on how complex are the filtering needs of your users, you could use one approach or the other.

Having filters in each column is not as intuitive as having the filters above the table, but most users will probably know how to operate them as it’s being used by spreadsheets for a long time.

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.

If it’s common for the users to always create the same filters, then it’s useful to provide them a way to save them so they can apply them later.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Table Filter pattern is implemented in the following ASP.NET controls: WebDataGrid, WebGrid, WebDropDown. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms WinGrid control with the Filtering features enabled to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinGrid Samples -> V9.1 Excel Style Filtering to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF xamDataGrid control with Record Filtering enabled. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Filter Record to see it in action.

Sources

Patterns In Interaction Design, Table Filter

Tags

Search, Displaying Complex Data, Analysis, Grid.