# HTML Table with Sortable Headers
[DataGrid Library](https://codecanyon.net/item/datagrid-javascript-pagination-sort-and-filter/29876926) may be used for creating HTML tables with sortable headers, search, and pagination. Any DataGird control can be used with tables as with any other HTML structure.
First, let's add a minimal HTML structure:
```markup
HTML Table with Sortable Headers
```
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
HTML Table with Sortable Headers
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{
margin: 2rem auto;
border: 1px solid #ddd;
border-collapse: collapse;
table-layout: fixed;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 100%;
}
.demo-table td,
.demo-table th{
padding: 1rem;
border: 1px solid #ddd;
width: 33%;
text-align: left;
}
.demo-table tr:nth-child(odd) td{
background: #f4f4f4;
}
.demo-table th a{
color: #07909b;
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
}
.demo-table th a::after{
margin-left: 1rem;
display: inline-block;
font-size: 1rem;
content: '\2195';
}
.dg-sort-selected.dg-asc::after{
content: '\25BC';
font-size: 0.8rem;
}
.dg-sort-selected.dg-desc::after{
content: '\25B2';
font-size: 0.8rem;
}
```
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 sorted. Let's add the **`data-grid`** attribute to the **``** element of the table, and **`data-grid-item`** property to each **`
`** element. Now the table will look like follows:
```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
```
Now let's replace table headers with [Sort Button controls](/controls/sort-button-control.md):
```markup
```
{% hint style="info" %}
You may find the detailed documentation of the sort button control [here](/controls/sort-button-control.md).
{% endhint %}
The final step is to initialize the DataGrid library as follows:
```markup
```
That's all! The final HTML is:
```markup
Sort HTML Table with DataGrid Library
```
{% content-ref url="/pages/-MQQn12NPwQm2oJuaIYx" %}
[Broken mention](broken://pages/-MQQn12NPwQm2oJuaIYx)
{% endcontent-ref %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.getdatagrid.com/how-to/html-table-with-sortable-headers.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.