Double Sort (Multiple Column Ordering)
Last updated
Was this helpful?
Last updated
Was this helpful?
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Double Sort (Multiple Column Ordering)</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Demo page CSS -->
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div class="item header">
<div>Name</div>
<div>Birth Year</div>
</div>
<!-- items to sort -->
<div class="data">
<div class="item">
<div class="name">Arch</div>
<div class="year">1956</div>
</div>
<div class="item">
<div class="name">Birdie</div>
<div class="year">1987</div>
</div>
<div class="item">
<div class="name">Denver</div>
<div class="year">1976</div>
</div>
<div class="item">
<div class="name">Arch</div>
<div class="year">1955</div>
</div>
<div class="item">
<div class="name">Oberon</div>
<div class="year">1965</div>
</div>
<div class="item">
<div class="name">Heath</div>
<div class="year">2013</div>
</div>
<div class="item">
<div class="name">Filippo</div>
<div class="year">1973</div>
</div>
<div class="item">
<div class="name">Kip</div>
<div class="year">1940</div>
</div>
<div class="item">
<div class="name">Filippo</div>
<div class="year">1972</div>
</div>
<div class="item">
<div class="name">Oberon</div>
<div class="year">1967</div>
</div>
<div class="item">
<div class="name">Kip</div>
<div class="year">1939</div>
</div>
<div class="item">
<div class="name">Arch</div>
<div class="year">1957</div>
</div>
<div class="item">
<div class="name">Filippo</div>
<div class="year">1971</div>
</div>
<div class="item">
<div class="name">Kip</div>
<div class="year">1941</div>
</div>
<div class="item">
<div class="name">Oberon</div>
<div class="year">1966</div>
</div>
</div>
</div>
</body>
</html>Page styles could be:
.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;
}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>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:
<!-- items to sort -->
<div class="data" data-grid>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1956</div>
</div>
<div class="item" data-grid-item>
<div class="name">Birdie</div>
<div class="year">1987</div>
</div>
<div class="item" data-grid-item>
<div class="name">Denver</div>
<div class="year">1976</div>
</div>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1955</div>
</div>
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1965</div>
</div>
<div class="item" data-grid-item>
<div class="name">Heath</div>
<div class="year">2013</div>
</div>
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1973</div>
</div>
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1940</div>
</div>
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1972</div>
</div>
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1967</div>
</div>
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1939</div>
</div>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1957</div>
</div>
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1971</div>
</div>
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1941</div>
</div>
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1966</div>
</div>
</div>Now let's replace table headers with Sort Button controls. Please note that data-id should have different values:
<div class="item header">
<div>
<a
href="#"
data-id="name"
data-grid-control="sort-button"
data-path=".name"
data-direction="asc"
data-toggle-direction
data-type="text">Name</a>
</div>
<div>
<a
href="#"
data-id="year"
data-grid-control="sort-button"
data-path=".year"
data-direction="asc"
data-toggle-direction
data-type="number">Birth Year</a>
</div>
</div>You may find the detailed documentation of the sort button control here.
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>Double Sort (Multiple Column Ordering)</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 -->
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div class="item header">
<div>
<a
href="#"
data-id="name"
data-grid-control="sort-button"
data-path=".name"
data-direction="asc"
data-toggle-direction
data-type="text">Name</a>
</div>
<div>
<a
href="#"
data-id="year"
data-grid-control="sort-button"
data-path=".year"
data-direction="asc"
data-toggle-direction
data-type="number">Birth Year</a>
</div>
</div>
<!-- items to sort -->
<div class="data" data-grid>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1956</div>
</div>
<div class="item" data-grid-item>
<div class="name">Birdie</div>
<div class="year">1987</div>
</div>
<div class="item" data-grid-item>
<div class="name">Denver</div>
<div class="year">1976</div>
</div>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1955</div>
</div>
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1965</div>
</div>
<div class="item" data-grid-item>
<div class="name">Heath</div>
<div class="year">2013</div>
</div>
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1973</div>
</div>
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1940</div>
</div>
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1972</div>
</div>
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1967</div>
</div>
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1939</div>
</div>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1957</div>
</div>
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1971</div>
</div>
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1941</div>
</div>
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1966</div>
</div>
</div>
</div>
<!-- DataGrid library JavaScript -->
<script src="datagrid.min.js"></script>
<script>
datagrid();
</script>
</body>
</html>