<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" />
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";
border-collapse: collapse;
.demo-table tr:nth-child(even) td{
<table class="demo-table">
placeholder="Filter by first name"
data-grid-control="text-filter"
placeholder="Filter by last name"
data-grid-control="text-filter"
placeholder="Filter by age"
data-grid-control="text-filter"
<td class="first-name">Wendye</td>
<td class="last-name">Lightwing</td>
<td class="first-name">Milena</td>
<td class="last-name">Torre</td>
<td class="first-name">Erinn</td>
<td class="last-name">Hills</td>
<td class="first-name">Yoshiko</td>
<td class="last-name">Smithson</td>
<td class="first-name">Umberto</td>
<td class="last-name">McFadden</td>
<td class="first-name">Donaugh</td>
<td class="last-name-name">Huban</td>
<td class="first-name">Cami</td>
<td class="last-name">Pickthorn</td>
<td class="first-name">Alistair</td>
<td class="last-name">Reddell</td>
<td class="first-name">Genia</td>
<td class="last-name">Crawshay</td>
<td class="first-name">Allyn</td>
<td class="last-name">Liell</td>
<!-- no results label -->
data-grid-control="label"
data-text="No results found.">
<!-- DataGrid library JavaScript -->
<script src="datagrid.min.js"></script>