Sort Table Data By Selected Column - jQuery tableSortable

File Size: 36.1 KB
Views Total: 6634
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Sort Table Data By Selected Column - jQuery tableSortable

A lightweight and fast sortable table jQuery plugin that allows for quick sorting of table columns by clicking header cells.

Works with nested table headers and rowspan & colspan attributes.

See Also:

How to use it:

1. Create an HTML table to be sortable. To disable the sortable functionality on a column, simply add the nosort class as follows:

<table id="myTable">
      <th rowspan="2" class="nosort" title="nosort">ID</th>
      <th rowspan="2">Company</th>
      <th colspan="2">Order</th>
      <td>Alfreds Futterkiste</td>
      <td>Ernst Handel</td>
      <td>Island Trading</td>

2. Load the tableSortable's script after jQuery.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- From dist folder -->
<script src="/path/to/dist/tableSortable.min.js"></script>
<!-- From a CDN -->
<script src=""></script>

3. Attach the plugin to the HTML table and done.


4. You're also allowed to create your own sorting function using the cmp config.

    cmp: (a,b) => a < b ? -1 : 1

5. Add arrows to header cells when sorting column data in either ascending (A-Z, 1-9) or descending (Z-A, 9-1) order.

.table_sortable thead th.desc:after {
  content: '↑';

.table_sortable thead th.asc:after {
  content: '↓';

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