It can sort table's content as a whole by some (all, if you wish) columns values in ASC or DESC order. Also you can divide all the rows into groups and rows will be sorted within those groups.
How to import?
npm i @curveballerpacks/tablesorter to install the package. To include the plugin in your bundles:
- The Sass preprocessor is used for styles. The source file can be imported into your styles via
@import '@curveballerpacks/tablesorter/src/sass/tablesorter'and then processed and bundled into your styles. It is worth mentioning that you should set the path for your bundler. For example, for
gulp-sassit might look like:
or just indicate the full path inside sass
- Tablesorter makes use of Node's modules. It requires its only dependency - jQuery - and can be required itself in your script via
require("@curveballerpacks/tablesorter");NPM will manage possible duplicates/conflicts of jQuery versions in its dependency graph mostly on its own.
The table itself must have
tablesorter class. The control row (
<th>-s) should have
tsTitles class (customizable via settings) and the data should be placed inside
tsGroup class (customizable via settings). In this simple case the 1st and 8st columns of the table will become "sortable" with indicated initial sorting order. In other words, after clicking, for example, on the 1st column's header the table rows will be sorted by the 1st column values in the given order (desc).
tablesorterColumns, it is possible, as mentioned above, to pass into the plugin
tablesorterTitlesClass (defaults to 'tsTitles') and
tablesorterGroupsClass (defaults to 'tsGroup') settings with corresponding changes in the page markup.