<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" />
<link href="styles.css" rel="stylesheet" />
<div class="item header">
data-grid-control="sort-button"
data-type="text">Name</a>
data-grid-control="sort-button"
data-type="number">Birth Year</a>
<div class="data" data-grid>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1956</div>
<div class="item" data-grid-item>
<div class="name">Birdie</div>
<div class="year">1987</div>
<div class="item" data-grid-item>
<div class="name">Denver</div>
<div class="year">1976</div>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1955</div>
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1965</div>
<div class="item" data-grid-item>
<div class="name">Heath</div>
<div class="year">2013</div>
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1973</div>
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1940</div>
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1972</div>
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1967</div>
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1939</div>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1957</div>
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1971</div>
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1941</div>
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1966</div>
<!-- DataGrid library JavaScript -->
<script src="datagrid.min.js"></script>