tablemodify is a javascript-plugin which boosts your html tables with awesome style and functionalities!
It is written in plain js, so no jQuery is required. Tm is based on a core Tablemodify-object which can be extended by several modules. There are some modules defined by default or you could even write your own if you wish to.

Browser support: supported by all major browsers (IE11, Firefox, Opera, Chrome, Safari).
the current version is 0.9.6

First of all, get the sources from Github ("/dist/") and include them in your header.
what you need:

• tablemodify.js or tablemodify.min.js
• tablemodify.css
• a .css-file from the theme folder

var tm,
    options = {} // some options can be passed via this object, read more below

function init() {
    tm = new Tablemodify('#myTable', options) // assume the table's selector is #myTable.
}
window.addEventListener('DOMContentLoaded', init)

options

an overview over all the options you can choose:

{
    // table will be wrapped in a container. you may give it an id
    containerId: 'myContainer',

    // default is 'en', choose between 'en', 'de', or add own Language pack (read below)
    language: 'en',

    // necessary! pass your theme's name here
    theme: 'default',

    // pass 'fade' or null. adds a nice transition when the table data changes
    transition: 'fade',

    /*
    This is an overview of the default modules tablemodify offers.
    All modules are optional.
    To run a module, add it's name to the following object. the values are js-objects again.
    To run a module with default values, you can just pass an empty object, for example: "sorter: {}",
    The specific module settings will be explained in the accompaniyng chapter.
    */
    modules: {
        columnStyles: columnStylesSettings,
        filter: filterSettings,
        sorter: sorterSettings,
        pager: pagerSettings,
        fixed: fixedSettings
    }
}

All modules are optional and work independent. Once initialized, it is possible to access them via tm.getModule(name), each provides some utilities you can use.

sorter

This module sorts the rows of your tbody, ascending or descending, sorted by a single column or even by multiple columns.
For multisort, press shift and click another head cell. Still press shift and click a selected cell again to invert the order. For big data amounts, it is recommended to combine sorter and pager or sort via php.

var sorterSettings = {
    /*
        these are the defaults:
    */
    initialColumn: 'firstEnabled',   // initial sorting column, either a column index or the special value 'firstEnabled'
    initialOrder: 'asc',             // initial sorting order, either 'asc', or 'desc'
    enableMultisort: true,           // enable/disable multisort functionality
    columns: {
        all: {
            enabled: true,
            parser: 'intelligent' // different types of parsers: 'intelligent' (for strings and numbers combined),
                                  // 'string', 'numeric' (integer and float), 'date' (see below)
        },

        /*
            custom settings for single columns:
        */
        0: {
            enabled: false // disable sorting
        },
        1: {
            parser: 'date', // use another parser for this column
            parserOptions: { // provide parameters to the parser
                preset: 'english'
            }
        }
    },
    /*
        adding own parsers. Read below how it works.
    */
    customParsers: customParsers
}

parsers

there are some parsers available by default:

var customParsers = {
       myParser: function(a, b) {
           /*
               parameters a, b: strings of two cell-contents to compare.

               if a > b, return a positive number,
               if a < b, return a negative number,
               if a = b, return 0. (<- this is important for multisort!)
           */
           // for example, this is the implementation of parser "string"
           if (a > b) return 1
           if (a < b) return -1
           return 0
       }
   }

change header appearance

you can simply overwrite the default sorter styles of your table. Therefore, tm provides several css-classes.
Different order-icons:

    /* default sorter icon (for no active sorting) */
    .tm-container td.sortable {
        background-image:url(path/to/your/icon-default.jpg);
    }

    /* icon for active ascending order */
    .tm-container td.sortable.sort-up {
        background-image:url(path/to/your/icon-up.jpg);
    }
    /* icon for active descending order */
    .tm-container td.sortable.sort-down {
        background-image:url(path/to/your/icon-down.jpg);
    }

different background-color of active sorting:

    /* this will set the color to yellow */
    .tm-container td.sortable.sort-up, .tm-container td.sortable.sort-down {
        background-color: 'yellow'
    }

pager

filter

fixed

columnStyles

resizer