Table Filter Design pattern

Problem summary

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

Example

TableFilter

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

  • TableFilter

    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)

  • winestore-online.com

    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.

  • www.builditwith.me

    Cleanly designed table filter at builditwithme.com that has mac-feeling about it.

  • www.authenticjobs.com

    A life table filter is used to filter search results at authenticjobs.com

8 Comments

Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 102 votes, 75.49% like this one.

Example images

  • TableFilter
  • winestore-online.com
  • www.builditwith.me
  • www.authenticjobs.com
  • appboy.com

See it in action

Related articles