Sort An HTML Table By Clicking The Header Of A Column – tablesort

Preview:

Description:

A vanilla JS table sorter that allows you to sort data in an HTML table by clicking the header of a column.

How to use it:

1. Add the minified version of the tablesort library to the page.

<script src="tablesort.min.js"></script>

2. Determine the sort type in the data-sort attribute:

<table class="table-sortable">
  <thead>
    <tr>
      <th data-sort="string">String</th>
      <th data-sort="int">Int</th>
      <th data-sort="float">Float</th>
      <th data-sort="date">Date</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

3. Initialize the tablesort on the HTML table and done.

document.querySelector('.table-sortable').tsortable()

4. Recommended CSS styles.

[data-sort]:hover {
  cursor: pointer;
}
[data-dir="asc"]:after {
  content: ' ↗';
}
[data-dir="desc"]:after {
  content: ' ↘';
}