How to Filter HTML Table By Multiple Columns
First, let's add a basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to Filter HTML Table By Multiple Columns</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<body>
</body>
</html>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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to Filter HTML Table By Multiple Columns</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<body>
<table class="demo-table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first-name">Wendye</td>
<td class="last-name">Lightwing</td>
<td class="age">24</td>
</tr>
<tr>
<td class="first-name">Milena</td>
<td class="last-name">Torre</td>
<td class="age">82</td>
</tr>
<tr>
<td class="first-name">Erinn</td>
<td class="last-name">Hills</td>
<td class="age">81</td>
</tr>
<tr>
<td class="first-name">Yoshiko</td>
<td class="last-name">Smithson</td>
<td class="age">62</td>
</tr>
<tr>
<td class="first-name">Umberto</td>
<td class="last-name">McFadden</td>
<td class="age">93</td>
</tr>
<tr>
<td class="first-name">Donaugh</td>
<td class="last-name-name">Huban</td>
<td class="age">75</td>
</tr>
<tr>
<td class="first-name">Cami</td>
<td class="last-name">Pickthorn</td>
<td class="age">45</td>
</tr>
<tr>
<td class="first-name">Alistair</td>
<td class="last-name">Reddell</td>
<td class="age">55</td>
</tr>
<tr>
<td class="first-name">Genia</td>
<td class="last-name">Crawshay</td>
<td class="age">60</td>
</tr>
<tr>
<td class="first-name">Allyn</td>
<td class="last-name">Liell</td>
<td class="age">37</td>
</tr>
</tbody>
</table>
</body>
</html>Also, let's add some styles:
.demo-table{
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";
font-size: 1rem;
margin: 2rem auto;
border: 1px solid #ddd;
border-collapse: collapse;
width: 600px;
max-width: 95%;
}
.demo-table td,
.demo-table th{
padding: 1rem;
border: 1px solid #ddd;
text-align: left;
}
.demo-table tr:nth-child(even) td{
background: #f4f4f4;
}
input[type="text"]{
border: 1px solid #ccc;
border-radius: 0.5rem;
padding: 0.3rem 0.5rem;
}Now we need to add a DataGrid CSS to the HEAD of the document:
<!-- DataGrid library CSS -->
<link href="datagrid.min.css" rel="stylesheet" />And additionally, we need to add the DataGrid script at the bottom of the document.
<!-- DataGrid library JavaScript -->
<script src="datagrid.min.js"></script>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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to Filter HTML Table By Multiple Columns</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- DataGrid library CSS -->
<link href="datagrid.min.css" rel="stylesheet" />
<!-- Demo page CSS -->
<style>
.demo-table{
margin: 2rem auto;
border: 1px solid #ddd;
border-collapse: collapse;
width: 600px;
max-width: 95%;
}
.demo-table td,
.demo-table th{
padding: 1rem;
border: 1px solid #ddd;
text-align: left;
}
.demo-table tr:nth-child(even) td{
background: #f4f4f4;
}
</style>
</head>
<body>
<table class="demo-table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-grid>
<tr data-grid-item>
<td class="first-name">Wendye</td>
<td class="last-name">Lightwing</td>
<td class="age">24</td>
</tr>
<tr data-grid-item>
<td class="first-name">Milena</td>
<td class="last-name">Torre</td>
<td class="age">82</td>
</tr>
<tr data-grid-item>
<td class="first-name">Erinn</td>
<td class="last-name">Hills</td>
<td class="age">81</td>
</tr>
<tr data-grid-item>
<td class="first-name">Yoshiko</td>
<td class="last-name">Smithson</td>
<td class="age">62</td>
</tr>
<tr data-grid-item>
<td class="first-name">Umberto</td>
<td class="last-name">McFadden</td>
<td class="age">93</td>
</tr>
<tr data-grid-item>
<td class="first-name">Donaugh</td>
<td class="last-name-name">Huban</td>
<td class="age">75</td>
</tr>
<tr data-grid-item>
<td class="first-name">Cami</td>
<td class="last-name">Pickthorn</td>
<td class="age">45</td>
</tr>
<tr data-grid-item>
<td class="first-name">Alistair</td>
<td class="last-name">Reddell</td>
<td class="age">55</td>
</tr>
<tr data-grid-item>
<td class="first-name">Genia</td>
<td class="last-name">Crawshay</td>
<td class="age">60</td>
</tr>
<tr data-grid-item>
<td class="first-name">Allyn</td>
<td class="last-name">Liell</td>
<td class="age">37</td>
</tr>
</tbody>
</table>
<!-- DataGrid library JavaScript -->
<script src="datagrid.min.js"></script>
</body>
</html>Now, let's add text filter controls to the table thead section:
<table class="demo-table">
<thead>
<tr>
<th>
<input
type="text"
placeholder="Filter by first name"
data-grid-control="text-filter"
data-path=".first-name"
/>
</th>
<th>
<input
type="text"
placeholder="Filter by last name"
data-grid-control="text-filter"
data-path=".last-name"
/>
</th>
<th>
<input
type="text"
placeholder="Filter by age"
data-grid-control="text-filter"
data-path=".age"
/>
</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-grid>
<tr data-grid-item>
<td class="first-name">Wendye</td>
<td class="last-name">Lightwing</td>
<td class="age">24</td>
</tr>
<tr data-grid-item>
<td class="first-name">Milena</td>
<td class="last-name">Torre</td>
<td class="age">82</td>
</tr>
<tr data-grid-item>
<td class="first-name">Erinn</td>
<td class="last-name">Hills</td>
<td class="age">81</td>
</tr>
<tr data-grid-item>
<td class="first-name">Yoshiko</td>
<td class="last-name">Smithson</td>
<td class="age">62</td>
</tr>
<tr data-grid-item>
<td class="first-name">Umberto</td>
<td class="last-name">McFadden</td>
<td class="age">93</td>
</tr>
<tr data-grid-item>
<td class="first-name">Donaugh</td>
<td class="last-name-name">Huban</td>
<td class="age">75</td>
</tr>
<tr data-grid-item>
<td class="first-name">Cami</td>
<td class="last-name">Pickthorn</td>
<td class="age">45</td>
</tr>
<tr data-grid-item>
<td class="first-name">Alistair</td>
<td class="last-name">Reddell</td>
<td class="age">55</td>
</tr>
<tr data-grid-item>
<td class="first-name">Genia</td>
<td class="last-name">Crawshay</td>
<td class="age">60</td>
</tr>
<tr data-grid-item>
<td class="first-name">Allyn</td>
<td class="last-name">Liell</td>
<td class="age">37</td>
</tr>
</tbody>
</table>We can also add no results label control to the bottom of the table. This control will appear if the filters return no results.
<tfoot>
<tr>
<td colspan="3">
<!-- no results label -->
<div
data-grid-control="label"
data-type="no-results"
data-text="No results found.">
</div>
</td>
</tr>
</tfoot>The final step is to initialize the DataGrid library as follows:
<script>
datagrid();
</script>That's all! The final HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to Filter HTML Table By Multiple Columns</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- DataGrid library CSS -->
<link href="datagrid.min.css" rel="stylesheet" />
<style>
.demo-table{
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";
font-size: 1rem;
margin: 2rem auto;
border: 1px solid #ddd;
border-collapse: collapse;
width: 600px;
max-width: 95%;
}
.demo-table td,
.demo-table th{
padding: 1rem;
border: 1px solid #ddd;
text-align: left;
}
.demo-table tr:nth-child(even) td{
background: #f4f4f4;
}
input[type="text"]{
border: 1px solid #ccc;
border-radius: 0.5rem;
padding: 0.3rem 0.5rem;
}
</style>
</head>
<body>
<table class="demo-table">
<thead>
<tr>
<th>
<input
type="text"
placeholder="Filter by first name"
data-grid-control="text-filter"
data-path=".first-name"
/>
</th>
<th>
<input
type="text"
placeholder="Filter by last name"
data-grid-control="text-filter"
data-path=".last-name"
/>
</th>
<th>
<input
type="text"
placeholder="Filter by age"
data-grid-control="text-filter"
data-path=".age"
/>
</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-grid>
<tr data-grid-item>
<td class="first-name">Wendye</td>
<td class="last-name">Lightwing</td>
<td class="age">24</td>
</tr>
<tr data-grid-item>
<td class="first-name">Milena</td>
<td class="last-name">Torre</td>
<td class="age">82</td>
</tr>
<tr data-grid-item>
<td class="first-name">Erinn</td>
<td class="last-name">Hills</td>
<td class="age">81</td>
</tr>
<tr data-grid-item>
<td class="first-name">Yoshiko</td>
<td class="last-name">Smithson</td>
<td class="age">62</td>
</tr>
<tr data-grid-item>
<td class="first-name">Umberto</td>
<td class="last-name">McFadden</td>
<td class="age">93</td>
</tr>
<tr data-grid-item>
<td class="first-name">Donaugh</td>
<td class="last-name-name">Huban</td>
<td class="age">75</td>
</tr>
<tr data-grid-item>
<td class="first-name">Cami</td>
<td class="last-name">Pickthorn</td>
<td class="age">45</td>
</tr>
<tr data-grid-item>
<td class="first-name">Alistair</td>
<td class="last-name">Reddell</td>
<td class="age">55</td>
</tr>
<tr data-grid-item>
<td class="first-name">Genia</td>
<td class="last-name">Crawshay</td>
<td class="age">60</td>
</tr>
<tr data-grid-item>
<td class="first-name">Allyn</td>
<td class="last-name">Liell</td>
<td class="age">37</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<!-- no results label -->
<div
data-grid-control="label"
data-type="no-results"
data-text="No results found.">
</div>
</td>
</tr>
</tfoot>
</table>
<!-- DataGrid library JavaScript -->
<script src="datagrid.min.js"></script>
<script>
datagrid();
</script>
</body>
</html>Last updated
Was this helpful?