Sorting HTML Table Vanilla JavaScript Library

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change the sorting of table rows. The JavaScript Sortable.js library allows you to sort any static or dynamic HTML table. Blazing fast and easy to implement.

Just include JavaScript and it will work. No function calls are needed, everything is done with eventListener. (CSS isn’t much needed, but it makes it pretty and easy to use).

Please note that the massive Advanced and Advanced versions have been deprecated. I just can’t justify their existence If you need advanced sorting, set up the tables with the data sort attribute instead. The same goes for the ES6 version, it seems pointless.

Features:

713 bytes are minimized.
Works with tables generated from JS/ajax. (Due to the event listener)
Lightning-fast. Huge tables will make it slow and it might even cause the browser to freeze, especially for cell phones, so you know …
Requires thead and tbody.
Via browser, ie9 +
EventListeners attached to rows will be removed
Event listeners are no longer removed! 😊
Not tested with React, Angular, Vue, etc. No method will work without messing with it. Literally no way.

Must Read: Simple Modern JavaScript ES6 Library That Fetches JSON Data in an HTML Table

How to make use of it:

1. Import the stylesheet sortable.min.css and JavaScript sortable.min.js into the HTML document.

<link rel="stylesheet" href="sortable.min.css" />
<script src="sortable.min.js"></script>

2. Add the CSS class sortable to your HTML table and the library.

<table class="sortable">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

3. Ignore certain table columns utilizing the no-sort class.

<table class="sortable">
  <thead>
    <tr>
      <th>Month</th>
      <th class="no-sort">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

4. You can even sort any data (like dates, and file size) utilizing the data-sort attribute:

<table class="sortable">
  <thead>
    <tr>
      <th>Month</th>
      <th class="no-sort">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td data-sort="100">$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td data-sort="80">$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td data-sort="180">$180</td>
    </tr>
  </tfoot>
</table>