Minimalist Table Sorting Plugin with jQuery - TableSort

File Size: 16 KB
Views Total: 1324
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimalist Table Sorting Plugin with jQuery - TableSort

TableSort is a dead simple, Bootstrap-compatible jQuery table sort plugin which makes an html table with <thead> and <tbody> sortable on client side. The plugin provides a quick way for the user to re-order rows within a table.

Basic usage:

1. The plugin uses Font Awesome 4 for sorting signs by default.

<link rel="stylesheet" href="font-awesome.min.css">

2. Add the data-sortable attribute to table headers.

    <th data-sortable="true">#</th>
    <th data-sortable="true">Name</th>
    <th data-sortable="true">Date</th>

3. Specify the data values using the data-sort-value attribute.

<td data-sort-value="1">1</td>
<td data-sort-value="a">A</td>
<td data-sort-value="2015-03-01">
  March 1st 2015

4. Include the jQuery TableSort plugin after jQuery library but before you close the body tag.

<script src="//"></script>
<script src="dist/TableSort.min.js"></script>

5. Active the plugin by calling the function on the table tag.


6. Setup the default sorting direction.

  sortDirection: 'asc', // or desc

7. Replace the default sorting signs with yours.

  sortableIconClass: 'fa fa-sort',
  ascIconClass: 'fa fa-sort-asc',
  descIconClass: 'fa fa-sort-desc',

This awesome jQuery plugin is developed by AnthonyPorthouse. For more Advanced Usages, please check the demo page or visit the official website.