Ultra Fast HTML Table Sorting Library – sortable.js

Preview:

Description:

The sortable.js JavaScript library enables any static or dynamic HTML table to be sortable. Blazing fast and simple to implement.

How to use 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 will take care of the rest. Note that the HTML table MUST have thead and tbody elements.

<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 using 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 also sort any data (like dates, file size) using 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>

5. Use the data-sort-col attribute to sort different columns.

<thead>
  <tr>
    <th></th>
    <th>Category</th>
    <th class="show_name">Show</th>
    <th colspan="2">Overall</th>
    <th colspan="2" data-sort-col="5">On Our Dates</th>
    <th data-sort-col="7">First Sold Out</th>
  </tr>
</thead>

Changelog:

v3.0.0 (10/19/2023)

• aria-sort=”ascending|descending” used instead of class=”dir-d|dir-up” to keep track of direction.
• class=”dir-d|dir-up” removed.

08/23/2023

• v2.3.2: Number() instead of parseFloat() in compare

08/20/2023

• v2.3.1: Bugfixes

08/17/2023

• v2.3.0: Added class=”n-last” places empty cells always last, similar to what SQL does with ORDER BY foo NULLS LAST.

07/01/2023

• v2.2.0: th clicks only triggered in thead, not in tbody or tfoot; class=”no-sort” is now part of core JavaScript functionality, not CSS only like before

03/30/2023

• v2.1.3: sortable-base back in npm package

03/24/2023

• v2.1.0: Tiebreaker/secondary sort

03/22/2023

• v2.0.1: Bugfix

02/26/2023

• ie9 support dropped

02/10/2023

• bugfix

01/01/2023

• multiple <tbody /> work!

11/23/2022

• bugfix

08/10/2022

• added data-sort-col