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:
<!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:
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.
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:
Now let's replace table headers with Sort Button controls. Please note that data-id should have different values:
The final step is to initialize the DataGrid library as follows:
That's all! The final HTML is:
Last updated
Was this helpful?