window.onload = function() {
    var arrows, headers, header;

    headers = document.getElementsByTagName("th");

    for (var g = 0; g < headers.length; g++) {
        arrows = document.createElement('a');
        arrows.href = "#";
        arrows.className = "sort-by";
        headers[g].appendChild(arrows);
        headers[g].onclick = sortTable(g);
        headers[g].onkeypress = sortTable(g);
    }
}

function sortTable(n) {
    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('th').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));
    })));
}