Sortable

a vanilla javascript table sorter.

Makes any table with class="sortable", er, sortable. That is the user can click on a table header and change the sorting of the table rows.

Just include the JavaScript and it will work. No function calls needed, all is done with an eventListener. (the CSS is not strictly needed, but makes it pretty and user friendly)

Worth mentioning:

An example:

<table class="sortable">
  <thead>
    <tr>
      <th>Role</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Master</td>
      <td>Rick</td>
    </tr>
    <tr>
      <td>Servant</td>
      <td><a href="javascript:alert('Morty');">Morty</a></td>
    </tr>
  </tbody>
</table>
<link href="sortable.css" rel="stylesheet">
<script src="sortable.js"></script>

would yield:

Role Name
Master Rick
Servant Morty

The Files (right click to download)

The minified files:

You can also download all of the files directly from GitHub

A slightly larger example

personal hardware software
job title name company processor ram graphics card screen width screen height platform browser browser version language
BossStan the ManMonsters IncAMD2Nvidia1530981Win32IE11en-US
SlaveBridget JonesThe Handi78gb15301080Linux x86_64Firefox54sv-SE
HRBruce WayneLeague of Shadowsi5?GeForce15301080Linux x86_64Opera46sv
ProgrammerBilbo BagginsBrotherhood of Evil Mutantsi34 gigabyte15301080Linux x86_64Opera46sv
bossStan the ManMonsters IncAMD2Nvidia1530981Win32IE11en-US
SlaveBridget JonesThe Handi78gb15301080Linux x86_64Firefox54sv-SE
HRBruce WayneLeague of Shadowsi5?GeForce15301080Linux x86_64Opera46sv
ProgrammerBilbo BagginsBrotherhood of Evil Mutantsi34 gigabyte15301080Linux x86_64Opera46sv
BossStan the ManMonsters IncAMD2Nvidia1530981Win32IE11en-US
SlaveBridget JonesThe Handi78gb15301080Linux x86_64Firefox54sv-SE
HRBruce WayneLeague of Shadowsi5?GeForce15301080Linux x86_64Opera46sv
ProgrammerBilbo BagginsBrotherhood of Evil Mutantsi34 gigabyte15301080Linux x86_64Opera46sv
BossStan the ManMonsters IncAMD2Nvidia1530981Win32IE11en-US
SlaveBridget JonesThe Handi78gb15301080Linux x86_64Firefox54sv-SE
HRBruce WayneLeague of Shadowsi5?GeForce15301080Linux x86_64Opera46sv
ProgrammerBilbo BagginsBrotherhood of Evil Mutantsi34 gigabyte15301080Linux x86_64Opera46sv
BossStan the ManMonsters IncAMD2Nvidia1530981Win32IE11en-US
SlaveBridget JonesThe Handi78gb15301080Linux x86_64Firefox54sv-SE
HRBruce WayneLeague of Shadowsi5?GeForce15301080Linux x86_64Opera46sv
ProgrammerBilbo BagginsBrotherhood of Evil Mutantsi34 gigabyte15301080Linux x86_64Opera46sv
BossStan the ManMonsters IncAMD2Nvidia1530981Win32IE11en-US
SlaveBridget JonesThe Handi78gb15301080Linux x86_64Firefox54sv-SE
HRBruce WayneLeague of Shadowsi5?GeForce19201080Linux x86_64Opera46sv
ProgrammerBilbo BagginsBrotherhood of Evil Mutantsi34 gigabyte19201080Linux x86_64Opera46sv
BossStan the ManMonsters IncAMD2Nvidia1920981Win32IE11en-US
SlaveBridget JonesThe Handi78gb19201080Linux x86_64Firefox54sv-SE
HRBruce WayneLeague of Shadowsi5?GeForce19201080Linux x86_64Opera46sv
ProgrammerBilbo BagginsBrotherhood of Evil Mutantsi34 gigabyte19201080Linux x86_64Opera46sv
BossStan the ManMonsters IncAMD2Nvidia1920981Win32IE11en-US
SlaveBridget JonesThe Handi78gb19201080Linux x86_64Firefox54sv-SE
HRBruce WayneLeague of Shadowsi5?GeForce19201080Linux x86_64Opera46sv
ProgrammerBilbo BagginsBrotherhood of Evil Mutantsi34 gigabyte19201080Linux x86_64Opera46sv
BossStan the ManMonsters IncAMD2Nvidia1920981Win32IE11en-US
SlaveBridget JonesThe Handi78gb19201080Linux x86_64Firefox54sv-SE
HRBruce WayneLeague of Shadowsi5?GeForce19201080Linux x86_64Opera46sv
ProgrammerBilbo BagginsBrotherhood of Evil Mutantsi34 gigabyte19201080Linux x86_64Opera46sv
BossStan the ManMonsters IncAMD2Nvidia1920981Win32IE11en-US
SlaveBridget JonesThe Handi78gb19201080Linux x86_64Firefox54sv-SE
HRBruce WayneLeague of Shadowsi5?GeForce19201080Linux x86_64Opera46sv
ProgrammerBilbo BagginsBrotherhood of Evil Mutantsi34 gigabyte19201080Linux x86_64Opera46sv