# Double Sort (Multiple Column Ordering)
DataGrid library allows sorting on multiple columns at the same time. Let's see an example with **double sorting** a list of DIV elements.
Let's add a basic HTML structure:
```markup
Double Sort (Multiple Column Ordering)
Name
Birth Year
Arch
1956
Birdie
1987
Denver
1976
Arch
1955
Oberon
1965
Heath
2013
Filippo
1973
Kip
1940
Filippo
1972
Oberon
1967
Kip
1939
Arch
1957
Filippo
1971
Kip
1941
Oberon
1966
```
Page styles could be:
{% code title="styles.css" %}
```css
.wrapper{
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;
width: 400px;
max-width: 95%;
margin: 3rem auto;
display: flex;
flex-direction: column;
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid #ccc;
}
.item{
display: flex;
border-bottom: 1px solid #ccc;
padding: 0.5rem 1rem;
}
.item:last-child{
border-bottom: 0;
}
.header{
font-weight: bold;
background: #e0f9ff;
}
.item >div{
width: 50%;
}
.item a{
color: #000
}
.item 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;
}
```
{% endcode %}
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
```
Now we need to define what exactly should be sorted. Let's add the **`data-grid`** attribute to the div that wraps data and the **`data-grid-item`** property to each data element. Now the HTML will look like follows:
```markup
Arch
1956
Birdie
1987
Denver
1976
Arch
1955
Oberon
1965
Heath
2013
Filippo
1973
Kip
1940
Filippo
1972
Oberon
1967
Kip
1939
Arch
1957
Filippo
1971
Kip
1941
Oberon
1966
```
Now let's replace table headers with [Sort Button controls](/controls/sort-button-control.md). Please note that **`data-id`** should have different values:
```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
Double Sort (Multiple Column Ordering)
```
{% 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/double-sort-multiple-column-ordering.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.