Make HTML Table Sortable With sort-table Library

Category: Javascript , Table | December 1, 2018
Author: stationer
Views Total: 205
Official Page: Go to website
Last Update: December 1, 2018
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

You Might Be Interested In:

Leave a Reply