Analytics table

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<table class="analytics-table" id="myTable">
  <caption>City(<b>10</b>)</caption>
  <thead>
    <tr style="background: #CCCCCC;">
      <th>City</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>NONE</td>
      <td>577652</td>
    </tr>
    <tr>
      <td>Nieuwegein</td>
      <td>976</td>
    </tr>
    <tr>
      <td>Mijdrecht</td>
      <td>766</td>
    </tr>
    <tr>
      <td>Veenendaal</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Haarlem</td>
      <td>27692</td>
    </tr>
    <tr>
      <td>Gossau</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Heiwajima</td>
      <td>65</td>
    </tr>
    <tr>
      <td>Amsterdam</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Utrecht</td>
      <td>1</td>
    </tr>
    <tr>
      <td></td>
      <td>2</td>
    </tr>
  </tbody>
</table>

CSS

/*
        -----------------------------------------------
        Author	    :   Imri Paloja
        Email	    :	[email protected]
        HomePage    :   eurobytes.nl
        Version	    :   1.0
        Name        :   EuroCMS
        Description :   The EuroCMS Cascade Styling
        -----------------------------------------------
        */

th[onclick="sortTable(0)"],
th[onclick="sortTable(1)"] {
  cursor: pointer;
}


html,
body {
  background: #F9F9F9 !important;
}

#content {
  background-color: unset !important;
  background-image: unset !important;
  box-shadow: unset !important;
}

table button {
  width: 40%;
  display: inline-block;
}

table td {
  text-align: center;
}

section {
  margin: 0% 0px 1% 0px !important;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  padding: 20px 30px;
  background: #FFFFFF;
  min-height: 150px;
  height: 100%;
  width: 100% !important;
}

/*.column ul {*/
/*width: unset;*/
/*min-width: unset;*/
/*max-width: unset;*/

/*height: unset;*/
/*min-height: unset;*/
/*max-height: unset;*/
/*}*/

/*.column li {*/
/*width: unset;*/
/*min-width: unset;*/
/*max-width: unset;*/
/*}*/

/*
            This removes the dotted border in Firefox.
        */
:focus,
button:focus,
input:focus,
select:focus {
  outline: none !important;
}

/*
            In the latest Firefox, this is not needed, but will keep this in here anyways.
         */
::-moz-focus-inner {
  outline: none !important;
  border: 0 !important;
}

/* Some CSS */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::selection {
  background-color: #0065A4;
  color: #FFFFFF;
}

::-moz-selection {
  background-color: #0065A4;
  color: #FFFFFF;
}

html {
  font-size: 62.5%;
  background: #3F4C6B;
}

body {
  background: #3F4C6B;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  position: relative;
  margin:...

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(tbody => table.appendChild(tbody));
})));

/* function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc";
  Make a loop that will continue until
  no switching has been done:
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    Loop through all table rows (except the
    first, which contains table headers):
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      Get the two elements you want to compare,
      one from current row and one from the next:
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      //check if the two rows should switch place,

if (Number(x.innerHTML) > Number(y.innerHTML)) {
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase())...