📔
DataGrid Documentation
📔
DataGrid Documentation
📔
DataGrid Documentation
📔
DataGrid Documentation
Getting Started
Buy DataGrid on CodeCanyon
Controls
Text Filter
Sort DropDown Control
Sort Button Control
Checkbox Filter
Radio Button Filter
Select Filter
Button Filter
Pagination
Page Size Control
Label Control
Multiple version of the same control (data-id attribute)
Languages Support
Special Classes
Deep Links
Storage
Multiple DataGrids on Page
How To
How To Sort Table in JavaScript
HTML Table with Sortable Headers
How to Filter HTML Table By Multiple Columns
Double Sort (Multiple Column Ordering)
Powered by GitBook

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>

You may find the detailed documentation of the text filter control here.

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>
How To - Previous
HTML Table with Sortable Headers
Next - How To
Double Sort (Multiple Column Ordering)
Last updated 4 months ago