Sortable Table
A table with clickable headers that sort rows by text or number.
Requires Bootstrap 5. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><div class="card border-0 shadow-sm" style="max-width:360px"><table class="table table-hover mb-0 small">
<thead class="table-light"><tr><th id="thName" style="cursor:pointer">Name ⇅</th><th id="thAge" style="cursor:pointer" class="text-end">Age ⇅</th></tr></thead>
<tbody id="stBody">
<tr><td>Charlie</td><td class="text-end">34</td></tr>
<tr><td>Alice</td><td class="text-end">28</td></tr>
<tr><td>Bob</td><td class="text-end">41</td></tr>
</tbody>
</table></div>var body=document.getElementById('stBody');
function sortBy(col,num){var rows=[].slice.call(body.querySelectorAll('tr'));rows.sort(function(a,b){var x=a.children[col].textContent,y=b.children[col].textContent;return num?x-y:x.localeCompare(y)});rows.forEach(function(r){body.appendChild(r)})}
document.getElementById('thName').onclick=function(){sortBy(0,false)};
document.getElementById('thAge').onclick=function(){sortBy(1,true)};Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.