(Yoinked from stack overflow mostly) - here's some stuff to make sortable tables:
In the template:
<div class="sortableTable">
| *Name* | *Dangerousness* | *Description* |
| Biscuit | 7 | a person who resembles a biscuit |
| Ryder | 2 | a small child on a tiny quadbike |</div>
In the CSS:
div.sortableTable tr:first-child td {
cursor: pointer;
}
In the javascript:
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));// do the work...
document.querySelectorAll('div.sortableTable tr:first-child td').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
})));
It looks like you're new here. If you want to get involved, click one of these buttons!