Author: | tofsjonas |
---|---|
Views Total: | 43 views |
Official Page: | Go to website |
Last Update: | March 30, 2023 |
License: | MIT |
Preview:

Description:
The sortable.js JavaScript library enables any static or dynamic HTML table to be sortable. Blazing fast and simple to implement.
How to use it:
1. Import the stylesheet sortable.min.css
and JavaScript sortable.min.js
into the HTML document.
<link rel="stylesheet" href="sortable.min.css" /> <script src="sortable.min.js"></script>
2. Add the CSS class sortable
to your HTML table and the library will take care of the rest. Note that the HTML table MUST have thead
and tbody
elements.
<table class="sortable"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>
3. Ignore certain table columns using the no-sort
class.
<table class="sortable"> <thead> <tr> <th>Month</th> <th class="no-sort">Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>
4. You can also sort any data (like dates, file size) using the data-sort
attribute:
<table class="sortable"> <thead> <tr> <th>Month</th> <th class="no-sort">Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td data-sort="100">$100</td> </tr> <tr> <td>February</td> <td data-sort="80">$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td data-sort="180">$180</td> </tr> </tfoot> </table>
5. Use the data-sort-col
attribute to sort different columns.
<thead> <tr> <th></th> <th>Category</th> <th class="show_name">Show</th> <th colspan="2">Overall</th> <th colspan="2" data-sort-col="5">On Our Dates</th> <th data-sort-col="7">First Sold Out</th> </tr> </thead>
Changelog:
03/30/2023
- v2.1.3: sortable-base back in npm package
03/24/2023
- v2.1.0: Tiebreaker/secondary sort
03/22/2023
- v2.0.1: Bugfix
02/26/2023
- ie9 support dropped
02/10/2023
- bugfix
01/01/2023
- multiple <tbody /> work!
11/23/2022
- bugfix
08/10/2022
- added data-sort-col