Table Filter
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 category.
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 examples 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)
Very helpful… Good Job. You can add more table filter pattern examples from extjs.com