Table Filter

Narrowing search results shown in a table by specific columns. How to filter them?

Overview

A table filter is to search data in a table with specific conditions. The table filter is useful in case there is large data set of results that can be filtered to find expected information. Besides, there should be one or more table columns which can be grouped into categories.

How it works?

There is a select box or text field input that is used to define condition values to filter in each column. When a filter condition is selected, the data in table is auto-filtered. Optionally, multiple filters can be added. For example, 2 or 3 filters are selected at once, the results returned in the table must be satisfied with all filter conditions.

Template

Table Filtering
Index Number Name Amount
Filter:
0 0 Bill $1.73
1 1 Joe $1.73
2 2 Bob $1.53
3 3 Matt $1.93
4 4 Mark $1.03
5 0 Tom $1.93
6 1 Jake $0.63
7 2 Greg $0.73
8 3 Bill $1.93
9 4 Joe $2.03
10 0 Bob $2.03
11 1 Matt $0.73
12 2 Mark $0.13
13 3 Tom $0.33
14 4 Jake $0.33
15 0 Greg $1.83
16 1 Bill $1.23
17 2 Joe $0.13
18 3 Bob $0.93
19 4 Matt $1.63
20 0 Mark $0.53
21 1 Tom $0.13
22 2 Jake $1.83
23 3 Greg $0.73
24 4 Bill $0.83
25 0 Joe $0.53
26 1 Bob $0.63
27 2 Matt $0.53
28 3 Mark $0.43
29 4 Tom $1.53
30 0 Jake $0.43
31 1 Greg $0.13
32 2 Bill $1.23
33 3 Joe $1.93
34 4 Bob $0.03

In details:

Object Class
Table uiGrid, table, table-bordered, table-striped
Select Box select, input[type="file"]
Input Box input

Status

Status Description
Default status The table is displayed with default data that is all data or filtered by default conditions.
Filtered status Users execute a specific filter. The table is displayed with the filtered data.

Rules

TFR-01 Column data matches with its filter.
TFR-02 Filters are displayed below the column title.
TFR-03 Filter text length is limited to 20 characters.
TFR-04 Data can be filtered by the condition combination.