Table Filter Edit
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.
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.
More example images of the 'Table Filter' pattern
-
-
When searching for equipment at dabs.com, you can filter your search by several categories. Once you click a filter, the search results are updated and excess options are removed. (Sent in by Michael Dewhirst)
-
At winestore-online, you can search for wine based on the characteristics you like. Results are then listed showing the percentage of match between your search and the wines available.
-
Cleanly designed table filter at builditwithme.com that has mac-feeling about it.
This document is in version 3 and was last updated on Aug 31, 2009 by Anders. Edit this pattern.
Related information
Collection
Related patterns
See it in action
Table Filter has 6 comments
-
almost 2 years ago
Pravin Joshi
7 May 2008
Very helpful… Good Job. You can add more table filter pattern examples from extjs.com
-
over 1 year ago
Stephen Lacy
8 Dec 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. -
about 1 year ago
Luke
9 Feb 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…
-
11 months ago
GN
28 Apr 2009
There is another website and its a great repository called patterntap.com
-
9 months ago
korbsan
19 Jun 2009
don’t forget to add an invisible HTML-label for each select-dropdown to guarantee web-accessibility.
-
7 months ago
Josh Johnson
27 Aug 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. :)