JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<table>
  <tr>
    <th>Country</th>
    <th>Date</th>
    <th>Size</th>
  </tr>
  <tr>
    <td>France</td>
    <td>2001-01-01</td>
    <td><i>25</i></td>
  </tr>
  <tr>
    <td><a href=#>spain</a></td>
    <td><i>2005-05-05</i></td>
    <td></td>
  </tr>
  <tr>
    <td><b>Lebanon</b></td>
    <td><a href=#>2002-02-02</a></td>
    <td><b>-17</b></td>
  </tr>
  <tr>
    <td><i>Argentina</i></td>
    <td>2005-04-04</td>
    <td><a href=#>100</a></td>
  </tr>
  <tr>
    <td>USA</td>
    <td></td>
    <td>-6</td>
  </tr>
</table>

CSS

/* table, th, td {
    border: 1px solid black;
}
th {
    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));
})));