Tablesorter

Finally brought to Nitro by popular demand! Requires 3rd party library, tablesorter.js. May not be compatible with older versions of tablesorter. Read Tablersorter Documentation for details on implementation and features.

A simple version is implemented below. To toggle icons and set specific columns to unsortable requires additional script.

Add class .table-sortable to the table, or target with custom class or id and apply javscsript manually. Follow the example below for the .table-sortable__icon, and add .table-sortable__sorter-false to columns that should not have sorting (if desired). Add a title attribute to the th for additional labeling for mouse users.

<table class="table-sortable table">
   <thead class="table__header">
      <tr>
         <!-- each column with sortable -->
         <th class="table__heading" title="Press to toggle sort by ID">
            ID
            <span class="icon_inline">
               <svg class="icon icon_fill table-sortable__icon" width="16" height="16"
                  role="img" 
                  aria-label="Sort column">
                  <use href="/images/core-icons.svg#icon-sort-unsorted" />
               </svg>
            </span>
         </th>
         <!-- each column not sortable -->
         <th class="table__heading table-sortable__sorter-false">
            Email (not sortable)
         </th>
      </tr>
   </thead>
   <!-- rest of table -->
</table>

The code snippet below can be used globally. Use the variable to modify individual table's features as necessary. Relies on classes provided by the library (.tablesorter-headerUnSorted, .tablesorter-headerAsc, and .tablesorter-headerDesc).

$(document).ready(function() { 
  $(".table-sortable").tablesorter({
      headers: {
         '.table-sortable__sorter-false' : {
            sorter: false
         }
      }
   }).bind('sortEnd', function() {
      $(".tablesorter-headerUnSorted .table-sortable__icon")
         .find("use")
         .attr("href", "/images/core-icons.svg#icon-sort-unsorted");
      $(".tablesorter-headerAsc .table-sortable__icon")
         .find("use")
         .attr("href", "/images/core-icons.svg#icon-sort-up");
      $(".tablesorter-headerDesc .table-sortable__icon")
         .find("use")
         .attr("href", "/images/core-icons.svg#icon-sort-down");
   });
});