Sortable table pure JS

by flashback_ua

HTML

<body>

<table id="report"><tr>
<th> TestName </th>
<th> TotalIterations </th>
<th> FailedIterations </th>
<th> AverageTime </th>
<th> Percentile90Time </th>
<th> MaxTime </th>
<th> MinTime </th>
<th> CreationTime </th>
<th> AbsDiff </th>
<th> PercDiff </th>
<th> Verdict
 </th>
</tr>
<tr>
<td> CopyFilesLocalBigFile </td>
<td> 1 </td>
<td> 0 </td>
<td> 31.289 </td>
<td> 31.289 </td>
<td> 31.289 </td>
<td> 31.289 </td>
<td> 2018-05-08 18:13:01.831 </td>
<td> 2.424 </td>
<td> 8.4 </td>
<td> Warning
 </td>
</tr>
<tr>
<td> CopyFilesLocalBunchFiles </td>
<td> 1 </td>
<td> 0 </td>
<td> 57.781 </td>
<td> 57.781 </td>
<td> 57.781 </td>
<td> 57.781 </td>
<td> 2018-05-08 18:15:31.612 </td>
<td> 0 </td>
<td> 0 </td>
<td> Unknown
 </td>
</tr>
<tr>
<td> CopyFilesLocalFilesSmall </td>
<td> 10 </td>
<td> 0 </td>
<td> 0.154 </td>
<td> 0.08 </td>
<td> 0.861 </td>
<td> 0.07 </td>
<td> 2018-05-08 15:38:18.241 </td>
<td> 0.116 </td>
<td> 305.26 </td>
<td> Failed
 </td>
</tr>
<tr>
<td> CopyFilesNetworkBigFile </td>
<td> 1 </td>
<td> 0 </td>
<td> 72.184 </td>
<td> 72.184 </td>
<td> 72.184 </td>
<td> 72.184 </td>
<td> 2018-05-08 18:12:25.252 </td>
<td> 16.428 </td>
<td> 29.46 </td>
<td> Warning
 </td>
</tr>
<tr>
<td> CopyFilesNetworkBunchFiles </td>
<td> 1 </td>
<td> 0 </td>
<td> 81.508 </td>
<td> 81.508 </td>
<td> 81.508 </td>
<td> 81.508 </td>
<td> 2018-05-08 18:14:28.625 </td>
<td> 5.257 </td>
<td> 6.89 </td>
<td> Warning
 </td>
</tr>
<tr>
<td> InstallMSIApplicationFirefox </td>
<td> 2 </td>
<td> 0 </td>
<td> 4.219 </td>
<td> 4.219 </td>
<td> 4.929 </td>
<td> 3.508 </td>
<td> 2018-05-08 18:16:08.512 </td>
<td> -0.104 </td>
<td> -2.41 </td>
<td> Ok
 </td>
</tr>
<tr>
<td> InstallMSIApplicationSkype </td>
<td> 1 </td>
<td> 0 </td>
<td> 7.7 </td>
<td> 7.7 </td>
<td> 7.7 </td>
<td> 7.7 </td>
<td> 2018-05-08 18:16:30.752 </td>
<td> 0.297 </td>
<td> 4.01 </td>
<td> Warning </td>
</tr>
</table>
</body>

CSS

#report {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border - collapse: collapse;
            width: 100 %;
        }

#report td, #report th {
        border: 1px solid #ddd;
    padding: 6px;
}

#report tr:nth-child(even){background-color: #f2f2f2;}

#report tr:hover {background-color: #ddd;}

#report th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
	cursor: pointer;
}

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('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) );
})));