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)
Please note that the advanced and mega-advanced version have been deprecated. I just couldn't justify their existence 🤷♂️ If you need advanced sorting, prepare the tables with the data-sort attribute instead. The same goes for the ES6 version, it seemed a bit pointless.
-
795 bytes minified.
-
Works with JS/ajax generated tables.(due to the eventListener)
-
Lightning fast. Huge tables will make it slow and may freeze the browser, especially for mobiles, so you know...
-
Requires thead and tbody.
-
cross browser, ie9+
-
eventListeners attached to the rows WILL be removed -
eventListeners are no longer removed! 😊
-
NOT tested with React, Angular, Vue, etc. (The virtual DOM would not be updated, so it would most likely mess them up completely.)
-
Works with Svelte!
-
data-sort-alt
allows for alternative sorting while holding shift or alt. Thanks wodny! -
Elements inside
th
now works. Thanks mxve!
You can find a simple demo on https://tofsjonas.github.io/sortable/
<table class="sortable">
<thead>
<tr>
<th><span>Role</span></th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Genius</td>
<td>Rick</td>
</tr>
<tr>
<td><a href="javascript:alert('Inline javascript works!');">Sidekick</a></td>
<td>Morty</td>
</tr>
</tbody>
</table>
<link href="https://tofsjonas.github.io/sortable/sortable.css" rel="stylesheet" />
<script src="https://tofsjonas.github.io/sortable/sortable.js"></script>
(The span
is just there to prove that elements inside the th
works)
If you wish to disable sorting for a specific field, the easiest way is to add a class to it, like so:
<tr>
<th class="no-sort">Role</th>
<th>Name</th>
</tr>
and then use css to block clicks. like so:
th.no-sort {
pointer-events: none;
}
This is a bit trickier, but it doesn't require any changes to the html, so I guess it could be worth it in some cases.
/* the first column in every sortable table
should not be sortable*/
.sortable th:nth-child(1) {
background: pink;
color: red;
pointer-events: none;
}
/* the seventh column in the second .sortable
table should not be sortable*/
.sortable:nth-of-type(2) th:nth-child(7) {
background: pink;
color: red;
pointer-events: none;
}
Using the data-sort
attribute you can have one visible value and one sortable value.
This is useful in case you have for instance sizes like kb, Mb, GB, etc.
<table class="sortable">
<thead>
<tr>
<th>Movie Name</th>
<th>Size</th>
<th>Release date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zack Snyder's Justice League</td>
<td data-sort="943718400">900MB</td>
<td data-sort="20210318">03/18/2021</td>
</tr>
<tr>
<td>The Sound of Music</td>
<td data-sort="1610612736">1.5GB</td>
<td data-sort="19651209">12/09/1965</td>
</tr>
</tbody>
</table>
If you click on a table header while holding shift or alt an alternative
data-sort-alt
attribute is used for sorting if available and the usual
data-sort
otherwise.