The tablesort npm package is a lightweight, dependency-free JavaScript library that allows you to add sorting functionality to HTML tables. It is designed to be simple to use and easily customizable.
Basic Table Sorting
This feature allows you to add basic sorting functionality to an HTML table. By including the Tablesort library and initializing it with the table element, users can click on the table headers to sort the rows.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/tablesort@5.2.1/dist/tablesort.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
</tr>
</tbody>
</table>
<script>
new Tablesort(document.getElementById('myTable'));
</script>
</body>
</html>
Custom Sort Functions
This feature allows you to define custom sort functions for specific columns. In this example, a custom sort function is used to sort dates in the format MM/DD/YYYY.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/tablesort@5.2.1/dist/tablesort.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th data-sort-method="custom">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>01/02/2020</td>
</tr>
<tr>
<td>12/31/2019</td>
</tr>
</tbody>
</table>
<script>
Tablesort.extend('custom', function(item) {
return new Date(item.split('/').reverse().join('-')).getTime();
});
new Tablesort(document.getElementById('myTable'));
</script>
</body>
</html>
Sorting with Data Attributes
This feature allows you to use data attributes to specify the sort method for a column. In this example, the 'data-sort-method' attribute is used to indicate that the 'Score' column should be sorted numerically.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/tablesort@5.2.1/dist/tablesort.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th data-sort-method="number">Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td data-sort="90">90</td>
</tr>
<tr>
<td>Bob</td>
<td data-sort="85">85</td>
</tr>
</tbody>
</table>
<script>
new Tablesort(document.getElementById('myTable'));
</script>
</body>
</html>
The tablesorter jQuery plugin provides similar functionality to tablesort, allowing you to add sorting capabilities to HTML tables. It offers more advanced features such as multi-column sorting, custom parsers, and widgets for additional functionalities. However, it requires jQuery as a dependency, which makes it heavier compared to the lightweight, dependency-free tablesort.
DataTables is a powerful jQuery plugin that provides extensive features for enhancing HTML tables, including sorting, filtering, pagination, and more. It is highly customizable and suitable for complex table manipulations. However, it is more complex and heavier than tablesort, making it more suitable for advanced use cases.
SortTable is a standalone JavaScript library that adds sorting functionality to HTML tables. It is similar to tablesort in that it is lightweight and does not require any dependencies. However, tablesort offers more customization options and a more modern API compared to SortTable.
A small & simple sorting component for tables written in Javascript.
<script src='tablesort.min.js'></script>
<!-- Include sort types you need -->
<script src='tablesort.numeric.js'></script>
<script src='tablesort.date.js'></script>
<script>
new Tablesort(document.getElementById('table-id'));
</script>
See all available sort types in the sorts directory. Defaults to string if no sort types are provided.
You can pass in options as a second parameter. Currently one option is
supported: descending: true. By default, sort is set to ascending.
new Tablesort(document.getElementById('table-id'), {
descending: true
});
For columns or rows that do not require sorting, you can add a class of
no-sort to a columns th or a tr element.
<th class='no-sort'>Name</th>
<tr class='no-sort'>
<td>1</td>
<td>Gonzo the Great</td>
<td>12-2-70</td>
<td>Radishes</td>
<td>$0.63</td>
</tr>
Sometimes text inside cells is not normalized. Using a data-sort attribute
you can use optional data to sort on.
<tr>
<td>1</td>
<td data-sort='1357656438'>01/08/13 @ 8:47:18am EST</td>
</tr>
<tr>
<td>2</td>
<td data-sort='1078673085'>3/7/2004 @ 9:24:45 EST</td>
</tr>
By adding a data-sort-method attribute to a table heading you can force
Tablesort to use a specific sorting method rather than guessing it. The value
of data-sort-method corresponds to the name of a sort function.
<th>Number</th>
<th data-sort-method='dotsep'>Version</th>
<tr>
<td>1</td>
<td>1.08.2013</td>
</tr>
<tr>
<td>2</td>
<td>3.7.2004</td>
</tr>
It is possible to automatically sort the table once you create a Tablesort
instance by adding sort-default class.
<th class='sort-default'>Name</th>
Tablesort supports two custom events: beforeSort & afterSort.
var table = document.getElementById('table-id');
var sort = new Tablesort(table);
table.addEventListener('beforeSort', function() {
alert('Table is about to be sorted!');
});
table.addEventListener('afterSort', function() {
alert('Table sorted!');
});
Tablesort supports sorting when new data has been added. Simply call the refresh method.
var table = document.getElementById('table-id');
var sort = new Tablesort(table);
// Make some Ajax request to fetch new data and on success:
sort.refresh();
// npm install tablesort
var tablesort = require('tablesort');
tablesort(el, options);
Add tablesort as an internal chain method to your Ender
compilation.
// ender add tablesort
$('.table').tablesort();
Add the styling below to your CSS or roll with your own.
th.sort-header::-moz-selection { background:transparent; }
th.sort-header::selection { background:transparent; }
th.sort-header {
cursor:pointer;
}
th.sort-header::-moz-selection,
th.sort-header::selection {
background:transparent;
}
table th.sort-header:after {
content:'';
float:right;
margin-top:7px;
border-width:0 4px 4px;
border-style:solid;
border-color:#404040 transparent;
visibility:hidden;
}
table th.sort-header:hover:after {
visibility:visible;
}
table th.sort-up:after,
table th.sort-down:after,
table th.sort-down:hover:after {
visibility:visible;
opacity:0.4;
}
table th.sort-up:after {
border-bottom:none;
border-width:4px 4px 0;
}
If you require a sort operation that does not exist in the sorts directory, you can add your own.
Tablesort.extend('name', function(item) {
// Regular expression to test against.
// `item` is a table value to evaluate.
return /foo/.test(item);
}, function(a, b) {
// Custom sort functionality goes here.
// e.g var n = (a > b) ? -1 : 1;
return n;
});
If you've made an extend function that others would benifit from pull requests are gladly accepted!
Tablesort relies on Grunt as its build tool. Simply run
grunt to package code from any contributions you make to src/tablesort.js
before submitting pull requests.
Tests are run via:
npm install && npm test
MIT
FAQs
A sorting component for HTML tables
The npm package tablesort receives a total of 242,950 weekly downloads. As such, tablesort popularity was classified as popular.
We found that tablesort demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.