Top Related Projects
Drop-in script to make tables sortable
Github fork of Christian Bach's tablesorter plugin + awesomeness ~
DataTables but in TypeScript transpiled to Vanilla JS
Quick Overview
Tablesort is a lightweight JavaScript library for creating sortable HTML tables. It allows users to sort table data by clicking on column headers, providing an interactive and user-friendly way to organize tabular information on web pages.
Pros
- Lightweight and dependency-free
- Easy to implement with minimal setup
- Supports custom sort functions for complex data types
- Responsive and works well on mobile devices
Cons
- Limited built-in sorting options compared to more complex table libraries
- Lacks advanced features like pagination or filtering
- May require additional styling for optimal appearance
- Not suitable for very large datasets or complex table structures
Code Examples
- Basic implementation:
new Tablesort(document.getElementById('myTable'));
This code initializes Tablesort on a table with the ID 'myTable'.
- Custom sort function for a specific column:
new Tablesort(document.getElementById('myTable'), {
descending: true,
compare: function(a, b) {
if (a > b) return -1;
if (a < b) return 1;
return 0;
}
});
This example sets up Tablesort with a custom comparison function and sets the initial sort direction to descending.
- Excluding a column from sorting:
new Tablesort(document.getElementById('myTable'), {
exclude: { 'class': ['no-sort'] }
});
This code prevents sorting on columns with the class 'no-sort'.
Getting Started
- Include the Tablesort script in your HTML:
<script src='tablesort.min.js'></script>
- Add the 'data-sort' attribute to the table headers you want to be sortable:
<table id="myTable">
<thead>
<tr>
<th data-sort-method='number'>ID</th>
<th>Name</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<!-- Table rows here -->
</tbody>
</table>
- Initialize Tablesort in your JavaScript:
document.addEventListener('DOMContentLoaded', function() {
new Tablesort(document.getElementById('myTable'));
});
This sets up Tablesort to run when the DOM is fully loaded, making the table sortable.
Competitor Comparisons
Drop-in script to make tables sortable
Pros of Sortable
- More feature-rich with built-in support for various data types and custom sorting functions
- Better documentation and examples, making it easier for developers to implement and customize
- Actively maintained with regular updates and bug fixes
Cons of Sortable
- Larger file size and potentially higher performance overhead
- Steeper learning curve due to more complex API and configuration options
- Requires jQuery as a dependency, which may not be ideal for all projects
Code Comparison
Tablesort:
new Tablesort(document.getElementById('myTable'));
Sortable:
$('#myTable').sortable({
columns: {
0: { sortFunction: customSort },
2: { sortFunction: 'date' }
}
});
Summary
Tablesort is a lightweight, vanilla JavaScript solution for simple table sorting needs. It's easy to implement but has limited features. Sortable, on the other hand, offers more advanced functionality and customization options but comes with a larger footprint and jQuery dependency. The choice between the two depends on project requirements, performance considerations, and desired level of control over sorting behavior.
Github fork of Christian Bach's tablesorter plugin + awesomeness ~
Pros of tablesorter
- More feature-rich with advanced sorting options, including multi-column sorting
- Extensive documentation and examples
- Supports various data types and custom parsers
Cons of tablesorter
- Larger file size and potentially higher performance overhead
- Steeper learning curve due to more complex configuration options
Code Comparison
tablesort:
new Tablesort(document.getElementById('table-id'));
tablesorter:
$("#table-id").tablesorter({
theme: 'blue',
widgets: ['zebra', 'filter'],
sortList: [[0,0], [1,0]]
});
Key Differences
- Complexity: tablesort is simpler and more lightweight, while tablesorter offers more advanced features.
- Customization: tablesorter provides more extensive customization options.
- Dependencies: tablesort is standalone, while tablesorter requires jQuery.
- Performance: tablesort may have better performance for simple sorting tasks.
- Community: tablesorter has a larger user base and more frequent updates.
Use Cases
- Choose tablesort for simple sorting needs in lightweight projects.
- Opt for tablesorter when advanced sorting features and extensive customization are required.
Both libraries are suitable for different scenarios, depending on project requirements and complexity.
DataTables but in TypeScript transpiled to Vanilla JS
Pros of simple-datatables
- More feature-rich, including pagination, search, and export options
- Supports dynamic data loading and AJAX
- Better documentation and examples
Cons of simple-datatables
- Larger file size and potentially higher performance overhead
- Steeper learning curve due to more complex API
Code Comparison
tablesort:
new Tablesort(document.getElementById('table-id'));
simple-datatables:
const dataTable = new simpleDatatables.DataTable("#table-id", {
searchable: true,
fixedHeight: true,
perPage: 10
});
Key Differences
- tablesort focuses solely on sorting functionality, while simple-datatables offers a broader range of features
- simple-datatables provides more customization options but requires more configuration
- tablesort has a smaller footprint and is easier to implement for basic sorting needs
Use Cases
- tablesort: Ideal for simple table sorting requirements with minimal setup
- simple-datatables: Better suited for complex data presentation needs, including search, pagination, and advanced filtering
Community and Maintenance
- tablesort: Smaller community, less frequent updates
- simple-datatables: Larger user base, more active development and maintenance
Performance Considerations
- tablesort: Lightweight and fast for small to medium-sized tables
- simple-datatables: May have performance impact on large datasets, but offers optimization options
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
tablesort
A small & simple sorting component for tables written in JavaScript
Quick start
Download the ZIP of this repository or install via command line:
npm i tablesort
# Or if you're using Yarn
yarn add tablesort
<script src='tablesort.min.js'></script>
<!-- Include sort types you need -->
<script src='tablesort.number.js'></script>
<script src='tablesort.date.js'></script>
<script>
new Tablesort(document.getElementById('table-id'));
</script>
Browser Support
 |  |  |  |  |
|---|---|---|---|---|
| 8+ â | 3.6+ â | 10+ â | 11.50+ â | 5.1+ â |
Node/Browserify
// npm install tablesort
var tablesort = require('tablesort');
tablesort(el, options);
Default CSS
Add the styling from tablesort.css file to your CSS or roll with your own.
Extending Tablesort
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 benefit from pull requests are gladly accepted!
Contributing
Dependencies: Node.js 16 or 18; npm 8.
Tablesort relies on Grunt as its build tool. Simply run
npm run build to package code from any contributions you make to src/tablesort.js
before submitting pull requests.
Tests are run via:
npm ci && npm t
Licence
MIT
Bugs?
Top Related Projects
Drop-in script to make tables sortable
Github fork of Christian Bach's tablesorter plugin + awesomeness ~
DataTables but in TypeScript transpiled to Vanilla JS
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot