Make HTML Table Sortable With sort-table Library

Category: Javascript , Table | May 21, 2020
Author:stationer
Views Total:27,608 views
Official Page:Go to website
Last Update:May 21, 2020
License:MIT

Preview:

Make HTML Table Sortable With sort-table Library

Description:

sort-table is a small JavaScript library which applies the sorting functionality to your HTML table.

How to use it:

Import the stylesheet sort-table.min.css and JavaScript sort-table.min.js files into the document.

<script src="sort-table.js"></script>
<link rel="stylesheet" href="sort-table.css">

The basic table sorting functionality can be added simply by adding CSS class js-sort-table to all tables within the document.

<table class="js-sort-table" id="demo1">
  <caption>&lt;table class="js-sort-table"&gt;</caption>
  <thead>
  <tr>
      <th class="js-sort-number">Row</th>
      <th>Strings</th>
      <th class="js-sort-date">Dates</th>
  </tr>
  </thead>
  <tbody>
  <tr>
      <td>1</td>
      <td>Shoe</td>
      <td>9/11/2001</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Twine</td>
      <td>12/7/1941</td>
  </tr>
  <tr>
      <td>3</td>
      <td>Thread</td>
      <td>1/20/2008</td>
  </tr>
  <tr>
      <td>4</td>
      <td>Rope</td>
      <td>9/17/1862</td>
  </tr>
  <tr>
      <td>5</td>
      <td>Yarn</td>
      <td>8/6/1945</td>
  </tr>
  <tr>
      <td>6</td>
      <td>Nylon</td>
      <td>7/4/1776</td>
  </tr>
  </tbody>
</table>

sort-table.js uses CSS classes to track the sort state. This allows for advanced styling by applying your own styles to the classes as shown below.

  • js-sort-asc: ascending sort
  • js-sort-desc: descending sort
  • js-sort-0: zero-based number of the sorted column
  • js-sort-string: sort by string
  • js-sort-date: sort by date
  • js-sort-number: sort by number
  • js-sort-last: sort by the last word
  • js-sort-input: sort by the input value

Changelog:

05/21/2020

  • Avoid attaching handler for ‘none’ columns

10/11/2019

  • Add support for ‘none’ sort type

02/08/2019

  • Adjusted Sort Direction Decorative Styles

You Might Be Interested In:


8 thoughts on “Make HTML Table Sortable With sort-table Library

  1. Ecki Mühlhäuser

    Hi,
    thanks for the very cool, easy to implement script!
    I have one question:
    Is ist possible, that “js-sort-date” can read a date-format like “14-07-2019″?
    At the moment the”js-sort-date” doesnt interprete that as a date (and it doesnt sort the data).

    Thanks a lot.
    Kind regards, Ecki

    Reply
    1. Kate

      I noticed the same thing. It only accepts the American format of MM-DD-YYYY not the international standard YYYY-MM-DD

      Reply
  2. loomski

    I may be blind…but I can’t find the css file you mention anywhere. Would love to try it though.

    Reply
  3. Pradeep

    This sort of number seem to be working out for integer values, does this even support floating numbers and -ve numbers.

    Rest all sorting, for string, integer is really good. especially multirow header is very useful.

    Reply

Leave a Reply