# How to Filter HTML Table By Multiple Columns
First, let's add a basic HTML structure:
```markup
How to Filter HTML Table By Multiple Columns
```
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`.**
```markup
How to Filter HTML Table By Multiple Columns
First Name
Last Name
Age
Wendye
Lightwing
24
Milena
Torre
82
Erinn
Hills
81
Yoshiko
Smithson
62
Umberto
McFadden
93
Donaugh
Huban
75
Cami
Pickthorn
45
Alistair
Reddell
55
Genia
Crawshay
60
Allyn
Liell
37
```
Also, let's add some styles:
```css
.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:
```markup
```
And additionally, we need to add the DataGrid script at the bottom of the document.
```markup
```
All we need to do now is to define what exactly should be filtered. Let's add the **`data-grid`** attribute to the **``** element of the table, and **`data-grid-item`** property to each **`
`** element of **`
`**. Now the table will look like follows:
```markup
How to Filter HTML Table By Multiple Columns
First Name
Last Name
Age
Wendye
Lightwing
24
Milena
Torre
82
Erinn
Hills
81
Yoshiko
Smithson
62
Umberto
McFadden
93
Donaugh
Huban
75
Cami
Pickthorn
45
Alistair
Reddell
55
Genia
Crawshay
60
Allyn
Liell
37
```
Now, let's add [text filter controls](https://docs.getdatagrid.com/controls/text-filter) to the table **`thead`** section:
```markup
First Name
Last Name
Age
Wendye
Lightwing
24
Milena
Torre
82
Erinn
Hills
81
Yoshiko
Smithson
62
Umberto
McFadden
93
Donaugh
Huban
75
Cami
Pickthorn
45
Alistair
Reddell
55
Genia
Crawshay
60
Allyn
Liell
37
```
{% hint style="info" %}
You may find the detailed documentation of the text filter control [here](https://docs.getdatagrid.com/controls/text-filter).
{% endhint %}
We can also add [no results label control ](https://docs.getdatagrid.com/controls/label#no-results-label)to the bottom of the table. This control will appear if the filters return no results.
```markup
```
The final step is to initialize the DataGrid library as follows:
```markup
```
That's all! The final HTML is:
```markup
How to Filter HTML Table By Multiple Columns