Classes that can be used with table-sort-js.

A guide on using HTML for those unfamiliar with HTML.


<table class=""> Description
table-sort Make tables sortable!. Sorts: Words, Numbers(naturally) and Dates out of the box without any config.
table-arrows Adds up or down arrows to indicate whether column is sorted in ascending or descending order.
remember-sort If clicking on different columns remembers sort of the original column.

<th class=""> Description
order-by-desc Orders by descending on the first click of a column (default aescending). Naming inspired by SQL.
file-size-sort Supports sorting files sizes from bytes to Tebibytes (B -> TiB). Can be Metric prefix (e.g 10KB), or Binary prefix(e.g 25KiB) and can contain a space or no space between number and unit type (e.g 25KB or 25 KB). It converts units into numbers (bytes) does conversion and then outputs to the binary prefix rounded to two decimal places. (e.g 25.00 KiB).
data-sort Sort by data attributes, e.g <td data-sort="42"></td> useful when you want to sort by the values inside of data-sort="" rather than values between td tags. For example:

  • <td data-sort="1">table</td>
  • <td data-sort="2">sort</td>
  • <td data-sort="3">js</td>

  • Will end up sorting in the order 1, 2 ,3 which spells out: table sort js. As opposed to sorting what is inside the <td> tags alphabetically which would spell: js sort table. This is useful for making custom sorts not supported by table-sort-js.
    disable-sort Disallow sorting the table by this specific column.

    Example using tags:

            
    <script src="table-sort.js"></script>
    <table class="table-sort table-arrows">
      <thead>
        <tr>
          <th class="data-sort">data</th>
          <th class="file-size-sort">file sizes</th>
          <th class="order-by-desc">birth date</th>
          <th class="disable-sort">unsortable</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-sort="2">sort</td>
          <td>10KiB</td>
          <td>1706/1/17</td>
          <td>1</td>
        </tr>
        <tr>
          <td data-sort="3">js</td>
          <td>1MB</td>
          <td>1835/11/25</td>
          <td>2</td>
        </tr>
        <tr>
          <td data-sort="1">table</td>
          <td>1TB</td>
          <td>1835/11/30</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
            
            
    data file sizes birth date unsortable
    sort 10KiB 1706/1/17 1
    js 1 MB 1835/11/25 2
    table 1TB 1835/11/30 3