Problem summary

The user wants to narrow down the search results shown in a table by specific columns

Example

Usage

  • Use when you have a very large data set of results that is too large to show in one page
  • Use when one or more table columns can easily be summarized into categories to filter by.

More examples

Solution

Provide dropdown inputs that present the categories by which the user can filter the data set by. Once the user selects a category and clicks “Filter” or something similar (when the user submits the form), the same data set is shown, but only with rows that belongs to the category selected.

Optionally, multiple filters can be added. If this solution is chosen, you must be aware to update the categories of each dropdown box accordingly when one category is selected – as the selecting values in one category might reduce the options left in another.

Rationale

Adding filters to your tables lets the user reduce the amount of items shown. Filters help narrow down search results, letting the user find more accurate results.

This article has been commented 7 times. Join the discussion!

More examples of the Table Filter pattern See all 6 example screenshots

7 comments

  • D6b75f080bf56a7d06478293110b27e1

    Pravin Joshi on May 07, 2008

    Very helpful… Good Job. You can add more table filter pattern examples from extjs.com

  • B92854183c4b6c1a615a985d12e78703

    Stephen Lacy on Dec 08, 2008

    Good but not complete, not all filters are single select multiple choice.
    Have a look at boo.com for an example of a complex filtering system that really works.

  • 3c2875dc32407ea40a75694564e38559

    Luke on Feb 09, 2009

    I want to thank you for writing this, and also thank Pravin for posting the link to extjs.com. There are some great UI design resources out there if one knows where to look and shares the wealth…

  • 331cf0464074625171cbc358451d9614

    GN on Apr 28, 2009

    There is another website and its a great repository called patterntap.com

  • 6d065c45e5eab9e533d850c0e9e1deeb

    korbsan on Jun 19, 2009

    don’t forget to add an invisible HTML-label for each select-dropdown to guarantee web-accessibility.

  • 2f94a58bbda2369618def09ec22a9aed

    Josh Johnson on Aug 27, 2009

    This is a nice start on a pattern, but it should also be called out that it’s not especially scalable in either the column or data directions. If I have columns with widely varying values, you’d have to instantiate every possible value in the drop-down, or hope that you can define intelligent ranges. Alternatively, if your table has a large number of columns, then matching the column to the filter becomes unwieldy. I’ve seen two variations that address each of these.

    The first is to apply a single filter by means of a drop-down that lists all the column titles followed by an input. This lets the user specify the values in the context of whatever column they choose. But this comes at the expense of only providing one filter across the table.

    For the second issue of large numbers of columns, I’ve seen designs that introduce a dedicated row (above or below the header) to contain column specific drop-downs, and each drop-down has an artificial “All” value as a default. This design negates the Filter button, as the filter is executed immediately on changes.

    I’d like to see all the patterns do a better job of calling out their pros and cons, since we all know there’s no such thing a one-size-fits-all pattern for design. If there was, we’d all be out of jobs. :)

  • Baec0db89f03ac2d569f6d3d8b213004

    tobypsl on Jun 04, 2010

    Does anyone know how to set up aliases in the drop down list filters ? As pointed out in one of the posts above sometimes there are columns with widely varying values and rather than instatiate every value (as some solutions do) it would help to set up an alias in the drop down that corresponded to a range of values ?

    cheers

Post a comment

To avoid spam, no URLs are allowed.