DataGrid Documentation
Search…
Controls
How to Filter HTML Table By Multiple Columns
First, let's add a basic HTML structure:
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<title>How to Filter HTML Table By Multiple Columns</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
</head>
8
<body>
9
10
</body>
11
</html>
Copied!
Now, let's add a table with some sample data. It will contain three columns - user first name, user last name, and age. Each column has an appropriate CSS class:
.first-name and .last-name, and .age.1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<title>How to Filter HTML Table By Multiple Columns</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
</head>
8
<body>
9
<table class="demo-table">
10
<thead>
11
<tr>
12
<th>First Name</th>
13
<th>Last Name</th>
14
<th>Age</th>
15
</tr>
16
</thead>
17
<tbody>
18
<tr>
19
<td class="first-name">Wendye</td>
20
<td class="last-name">Lightwing</td>
21
<td class="age">24</td>
22
</tr>
23
<tr>
24
<td class="first-name">Milena</td>
25
<td class="last-name">Torre</td>
26
<td class="age">82</td>
27
</tr>
28
<tr>
29
<td class="first-name">Erinn</td>
30
<td class="last-name">Hills</td>
31
<td class="age">81</td>
32
</tr>
33
<tr>
34
<td class="first-name">Yoshiko</td>
35
<td class="last-name">Smithson</td>
36
<td class="age">62</td>
37
</tr>
38
<tr>
39
<td class="first-name">Umberto</td>
40
<td class="last-name">McFadden</td>
41
<td class="age">93</td>
42
</tr>
43
<tr>
44
<td class="first-name">Donaugh</td>
45
<td class="last-name-name">Huban</td>
46
<td class="age">75</td>
47
</tr>
48
<tr>
49
<td class="first-name">Cami</td>
50
<td class="last-name">Pickthorn</td>
51
<td class="age">45</td>
52
</tr>
53
<tr>
54
<td class="first-name">Alistair</td>
55
<td class="last-name">Reddell</td>
56
<td class="age">55</td>
57
</tr>
58
<tr>
59
<td class="first-name">Genia</td>
60
<td class="last-name">Crawshay</td>
61
<td class="age">60</td>
62
</tr>
63
<tr>
64
<td class="first-name">Allyn</td>
65
<td class="last-name">Liell</td>
66
<td class="age">37</td>
67
</tr>
68
</tbody>
69
</table>
70
</body>
71
</html>
Copied!
Also, let's add some styles:
1
.demo-table{
2
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3
font-size: 1rem;
4
margin: 2rem auto;
5
border: 1px solid #ddd;
6
border-collapse: collapse;
7
width: 600px;
8
max-width: 95%;
9
}
10
11
.demo-table td,
12
.demo-table th{
13
padding: 1rem;
14
border: 1px solid #ddd;
15
text-align: left;
16
}
17
18
.demo-table tr:nth-child(even) td{
19
background: #f4f4f4;
20
}
21
22
input[type="text"]{
23
border: 1px solid #ccc;
24
border-radius: 0.5rem;
25
padding: 0.3rem 0.5rem;
26
}
Copied!
Now we need to add a DataGrid CSS to the HEAD of the document:
1
<!-- DataGrid library CSS -->
2
<link href="datagrid.min.css" rel="stylesheet" />
Copied!
And additionally, we need to add the DataGrid script at the bottom of the document.
1
<!-- DataGrid library JavaScript -->
2
<script src="datagrid.min.js"></script>
Copied!
All we need to do now is to define what exactly should be filtered. Let's add the
data-grid attribute to the <tbody> element of the table, and data-grid-item property to each <tr> element of <tbody>. Now the table will look like follows:1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<title>How to Filter HTML Table By Multiple Columns</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
8
<!-- DataGrid library CSS -->
9
<link href="datagrid.min.css" rel="stylesheet" />
10
11
<!-- Demo page CSS -->
12
<style>
13
.demo-table{
14
margin: 2rem auto;
15
border: 1px solid #ddd;
16
border-collapse: collapse;
17
width: 600px;
18
max-width: 95%;
19
}
20
21
.demo-table td,
22
.demo-table th{
23
padding: 1rem;
24
border: 1px solid #ddd;
25
text-align: left;
26
}
27
28
.demo-table tr:nth-child(even) td{
29
background: #f4f4f4;
30
}
31
</style>
32
</head>
33
<body>
34
<table class="demo-table">
35
<thead>
36
<tr>
37
<th>First Name</th>
38
<th>Last Name</th>
39
<th>Age</th>
40
</tr>
41
</thead>
42
<tbody data-grid>
43
<tr data-grid-item>
44
<td class="first-name">Wendye</td>
45
<td class="last-name">Lightwing</td>
46
<td class="age">24</td>
47
</tr>
48
<tr data-grid-item>
49
<td class="first-name">Milena</td>
50
<td class="last-name">Torre</td>
51
<td class="age">82</td>
52
</tr>
53
<tr data-grid-item>
54
<td class="first-name">Erinn</td>
55
<td class="last-name">Hills</td>
56
<td class="age">81</td>
57
</tr>
58
<tr data-grid-item>
59
<td class="first-name">Yoshiko</td>
60
<td class="last-name">Smithson</td>
61
<td class="age">62</td>
62
</tr>
63
<tr data-grid-item>
64
<td class="first-name">Umberto</td>
65
<td class="last-name">McFadden</td>
66
<td class="age">93</td>
67
</tr>
68
<tr data-grid-item>
69
<td class="first-name">Donaugh</td>
70
<td class="last-name-name">Huban</td>
71
<td class="age">75</td>
72
</tr>
73
<tr data-grid-item>
74
<td class="first-name">Cami</td>
75
<td class="last-name">Pickthorn</td>
76
<td class="age">45</td>
77
</tr>
78
<tr data-grid-item>
79
<td class="first-name">Alistair</td>
80
<td class="last-name">Reddell</td>
81
<td class="age">55</td>
82
</tr>
83
<tr data-grid-item>
84
<td class="first-name">Genia</td>
85
<td class="last-name">Crawshay</td>
86
<td class="age">60</td>
87
</tr>
88
<tr data-grid-item>
89
<td class="first-name">Allyn</td>
90
<td class="last-name">Liell</td>
91
<td class="age">37</td>
92
</tr>
93
</tbody>
94
</table>
95
96
<!-- DataGrid library JavaScript -->
97
<script src="datagrid.min.js"></script>
98
99
</body>
100
</html>
Copied!
1
<table class="demo-table">
2
<thead>
3
<tr>
4
<th>
5
<input
6
type="text"
7
placeholder="Filter by first name"
8
data-grid-control="text-filter"
9
data-path=".first-name"
10
/>
11
</th>
12
<th>
13
<input
14
type="text"
15
placeholder="Filter by last name"
16
data-grid-control="text-filter"
17
data-path=".last-name"
18
/>
19
</th>
20
<th>
21
<input
22
type="text"
23
placeholder="Filter by age"
24
data-grid-control="text-filter"
25
data-path=".age"
26
/>
27
</th>
28
</tr>
29
<tr>
30
<th>First Name</th>
31
<th>Last Name</th>
32
<th>Age</th>
33
</tr>
34
</thead>
35
<tbody data-grid>
36
<tr data-grid-item>
37
<td class="first-name">Wendye</td>
38
<td class="last-name">Lightwing</td>
39
<td class="age">24</td>
40
</tr>
41
<tr data-grid-item>
42
<td class="first-name">Milena</td>
43
<td class="last-name">Torre</td>
44
<td class="age">82</td>
45
</tr>
46
<tr data-grid-item>
47
<td class="first-name">Erinn</td>
48
<td class="last-name">Hills</td>
49
<td class="age">81</td>
50
</tr>
51
<tr data-grid-item>
52
<td class="first-name">Yoshiko</td>
53
<td class="last-name">Smithson</td>
54
<td class="age">62</td>
55
</tr>
56
<tr data-grid-item>
57
<td class="first-name">Umberto</td>
58
<td class="last-name">McFadden</td>
59
<td class="age">93</td>
60
</tr>
61
<tr data-grid-item>
62
<td class="first-name">Donaugh</td>
63
<td class="last-name-name">Huban</td>
64
<td class="age">75</td>
65
</tr>
66
<tr data-grid-item>
67
<td class="first-name">Cami</td>
68
<td class="last-name">Pickthorn</td>
69
<td class="age">45</td>
70
</tr>
71
<tr data-grid-item>
72
<td class="first-name">Alistair</td>
73
<td class="last-name">Reddell</td>
74
<td class="age">55</td>
75
</tr>
76
<tr data-grid-item>
77
<td class="first-name">Genia</td>
78
<td class="last-name">Crawshay</td>
79
<td class="age">60</td>
80
</tr>
81
<tr data-grid-item>
82
<td class="first-name">Allyn</td>
83
<td class="last-name">Liell</td>
84
<td class="age">37</td>
85
</tr>
86
</tbody>
87
</table>
Copied!
We can also add no results label control to the bottom of the table. This control will appear if the filters return no results.
1
<tfoot>
2
<tr>
3
<td colspan="3">
4
<!-- no results label -->
5
<div
6
data-grid-control="label"
7
data-type="no-results"
8
data-text="No results found.">
9
</div>
10
</td>
11
</tr>
12
</tfoot>
Copied!
The final step is to initialize the DataGrid library as follows:
1
<script>
2
datagrid();
3
</script>
Copied!
That's all! The final HTML is:
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<title>How to Filter HTML Table By Multiple Columns</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
8
<!-- DataGrid library CSS -->
9
<link href="datagrid.min.css" rel="stylesheet" />
10
11
<style>
12
.demo-table{
13
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
14
font-size: 1rem;
15
margin: 2rem auto;
16
border: 1px solid #ddd;
17
border-collapse: collapse;
18
width: 600px;
19
max-width: 95%;
20
}
21
22
.demo-table td,
23
.demo-table th{
24
padding: 1rem;
25
border: 1px solid #ddd;
26
text-align: left;
27
}
28
29
.demo-table tr:nth-child(even) td{
30
background: #f4f4f4;
31
}
32
33
input[type="text"]{
34
border: 1px solid #ccc;
35
border-radius: 0.5rem;
36
padding: 0.3rem 0.5rem;
37
}
38
</style>
39
</head>
40
<body>
41
<table class="demo-table">
42
<thead>
43
<tr>
44
<th>
45
<input
46
type="text"
47
placeholder="Filter by first name"
48
data-grid-control="text-filter"
49
data-path=".first-name"
50
/>
51
</th>
52
<th>
53
<input
54
type="text"
55
placeholder="Filter by last name"
56
data-grid-control="text-filter"
57
data-path=".last-name"
58
/>
59
</th>
60
<th>
61
<input
62
type="text"
63
placeholder="Filter by age"
64
data-grid-control="text-filter"
65
data-path=".age"
66
/>
67
</th>
68
</tr>
69
<tr>
70
<th>First Name</th>
71
<th>Last Name</th>
72
<th>Age</th>
73
</tr>
74
</thead>
75
<tbody data-grid>
76
<tr data-grid-item>
77
<td class="first-name">Wendye</td>
78
<td class="last-name">Lightwing</td>
79
<td class="age">24</td>
80
</tr>
81
<tr data-grid-item>
82
<td class="first-name">Milena</td>
83
<td class="last-name">Torre</td>
84
<td class="age">82</td>
85
</tr>
86
<tr data-grid-item>
87
<td class="first-name">Erinn</td>
88
<td class="last-name">Hills</td>
89
<td class="age">81</td>
90
</tr>
91
<tr data-grid-item>
92
<td class="first-name">Yoshiko</td>
93
<td class="last-name">Smithson</td>
94
<td class="age">62</td>
95
</tr>
96
<tr data-grid-item>
97
<td class="first-name">Umberto</td>
98
<td class="last-name">McFadden</td>
99
<td class="age">93</td>
100
</tr>
101
<tr data-grid-item>
102
<td class="first-name">Donaugh</td>
103
<td class="last-name-name">Huban</td>
104
<td class="age">75</td>
105
</tr>
106
<tr data-grid-item>
107
<td class="first-name">Cami</td>
108
<td class="last-name">Pickthorn</td>
109
<td class="age">45</td>
110
</tr>
111
<tr data-grid-item>
112
<td class="first-name">Alistair</td>
113
<td class="last-name">Reddell</td>
114
<td class="age">55</td>
115
</tr>
116
<tr data-grid-item>
117
<td class="first-name">Genia</td>
118
<td class="last-name">Crawshay</td>
119
<td class="age">60</td>
120
</tr>
121
<tr data-grid-item>
122
<td class="first-name">Allyn</td>
123
<td class="last-name">Liell</td>
124
<td class="age">37</td>
125
</tr>
126
</tbody>
127
<tfoot>
128
<tr>
129
<td colspan="3">
130
<!-- no results label -->
131
<div
132
data-grid-control="label"
133
data-type="no-results"
134
data-text="No results found.">
135
</div>
136
</td>
137
</tr>
138
</tfoot>
139
</table>
140
141
<!-- DataGrid library JavaScript -->
142
<script src="datagrid.min.js"></script>
143
144
<script>
145
datagrid();
146
</script>
147
</body>
148
</html>
Copied!
How To - Previous
HTML Table with Sortable Headers
Next - How To
Double Sort (Multiple Column Ordering)
Last modified 1yr ago
Copy link