Sortera

Sortera

Sortera is a standalone, minimalistic yet powerful, javascript library that makes any HTML-table interactively sortable.

Highligts

  • Small footprint
  • Highly optimized code
  • Not relying on any third party libraries of any kind
  • Multi column sorting
  • Adapts to the application, supporting the following techiques

Sortera works by attaching events to the table headers of an existing table, hence your table need to have a html <thead> </thead> section, or <th> instead of <td> for column headers. See example tables to the rights.

<table class="sort-me">
  <!--  td for headers is supported,
        but only if the row is wrapped 
        in thead                    -->
  <thead>
    <tr>
      <td>Table Header</td>
    </tr>
  </thead>
  <tr>
    <td>Content</td>
  </tr> 
</table>

<table class="sort-me">
  <!--  When using th, you do not
        _need_ to have a thead-clause.
        But it's always recommended.    -->
  <tr>
    <th>Table Header</th>
  </tr>
  <tr>
    <td>Content</td>
  </tr>
</table>

Getting Started

Sortera is all about simplicity. To quickly make a table sortable, include the following script tag somewhere in your document.

<script src="//cdn.56k.guru/js/sortera/latest/sortera.min.js"></script>

… and call sortera() with a element as the first parameter.

sortera(document.getElementById('#thetable'));

Done!

Installation

You can get sortera in a variety of ways, the simplest being copying the cdn script tag below.

<script src="//cdn.56k.guru/js/sortera/latest/sortera.min.js"></script>

Uncompressed version, useful in debugging purposes.

<script src="//cdn.56k.guru/js/sortera/latest/sortera.js"></script>

Manual installation

  • Download latest zipball
  • Unpack
  • Grab sortera.min.js from the lib/ folder

Bower

bower install sortera

Npm

npm install sortera

License 

The MIT License (MIT)

Copyright (c) 2016 Robin Nilsson <hexagon@github>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Style

While sortera keeps it simple, and do not change the style of your table in any way. It does add a few classes which allow you to style the table according to to options.

Class Element Description
.s-sortable th, td Sortable column headers
.s-not-sortable th, td Ignored column headers
.s-arrow b The generated sort arrow

See the example stylesheet to the right.

/* Make ignored (non-sortable) column headers grayed out */
.s-not-sortable {
    color: #999999;
}

/* Make sort arrows slightly smaller, and less prominent */
.s-arrow {
    font-size: 0.8em;
}

Usage

It is possible to require and use sortera in a variety of ways, but the usage is very similar whichever way you choose.

Basic usage

/* --- jQuery --------------------------------------------------------
   Using jQuery, the first and only parameter is options              */

$('#thetable').sortera([<options>]);

/* --- Standalone ----------------------------------------------------
   Standalone mode works slightly different, where the first parameter
   is the element, and the second parameter is the options.	          */

sortera(<element>[, <options>]);

Multi column sorting

By default, the user is only able to sort by one column at a time, to enable multi-column sort, add multi: true to the options object.

// Standalone mode
var el = document.getElementById('#sortme');
sortera(el, { multi: true });

Live demo at examples/usage.standalone.html

Initial sort order

Without options, the table remain unchanged until the user clicks a table header. If you wan’t to specify one or more default sortings, this is how to do it.

sortOrder is an array of object which specifies column (z)

// jQuery mode
$('#sortme').sortera({
	sortOrder: [
		{ column: 2, order: -1},	// order 	-1 = ASCENDING
		{ column: 0, order: -1},	// column 	is zero-indexed
		{ column: 1, order:  1},	// order 	-1 = DESCENDING
	]
});

Live demo at examples/usage.jquery.html

Ignore columns

If you only want a specific set of columns to be sortable, add ignore: [] to the options.

ignore is a simple array of zero-indexed column indices.

// jQuery mode
$('#sortme').sortera({
    ignore: [0,2]    // Ignore clicks on the first 
                     // and third column header
});

All at once

So, you want to make the first, second and fourth column sortable, want to be able to add secondary sortings, and sort by column four by default.

// Standalone mode
var el = document.getElementById('#sortme');
sortera(el, {
	multi: true,
	sortOrder: [
		{ column: 3, order: -1 }
	],
	ignore: [2 ]
	
});