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.

Also, let's add some styles:

Now we need to add a DataGrid CSS to the HEAD of the document:

And additionally, we need to add the DataGrid script at the bottom of the document.

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:

Now, let's add text filter controls to the table thead section:

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.

The final step is to initialize the DataGrid library as follows:

That's all! The final HTML is:

PreviousHTML Table with Sortable HeadersNextDouble Sort (Multiple Column Ordering)

Last updated

Was this helpful?