Another approach to sort HTML table. (based on W3.JS HTML Sort)
let tid = "#usersTable";_x000D_
let headers = document.querySelectorAll(tid + " th");_x000D_
_x000D_
// Sort the table element when clicking on the table headers_x000D_
headers.forEach(function(element, i) {_x000D_
element.addEventListener("click", function() {_x000D_
w3.sortHTML(tid, ".item", "td:nth-child(" + (i + 1) + ")");_x000D_
});_x000D_
});
_x000D_
th {_x000D_
cursor: pointer;_x000D_
background-color: coral;_x000D_
}
_x000D_
<script src="https://www.w3schools.com/lib/w3.js"></script>_x000D_
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />_x000D_
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>_x000D_
_x000D_
<table id="usersTable" class="w3-table-all">_x000D_
<!-- _x000D_
<tr>_x000D_
<th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(1)')">Name</th>_x000D_
<th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(2)')">Address</th>_x000D_
<th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(3)')">Sales Person</th>_x000D_
</tr> _x000D_
-->_x000D_
<tr>_x000D_
<th>Name</th>_x000D_
<th>Address</th>_x000D_
<th>Sales Person</th>_x000D_
</tr>_x000D_
_x000D_
<tr class="item">_x000D_
<td>user:2911002</td>_x000D_
<td>UK</td>_x000D_
<td>Melissa</td>_x000D_
</tr>_x000D_
<tr class="item">_x000D_
<td>user:2201002</td>_x000D_
<td>France</td>_x000D_
<td>Justin</td>_x000D_
</tr>_x000D_
<tr class="item">_x000D_
<td>user:2901092</td>_x000D_
<td>San Francisco</td>_x000D_
<td>Judy</td>_x000D_
</tr>_x000D_
<tr class="item">_x000D_
<td>user:2801002</td>_x000D_
<td>Canada</td>_x000D_
<td>Skipper</td>_x000D_
</tr>_x000D_
<tr class="item">_x000D_
<td>user:2901009</td>_x000D_
<td>Christchurch</td>_x000D_
<td>Alex</td>_x000D_
</tr>_x000D_
_x000D_
</table>
_x000D_