herotable v1.1.6

Herotable

Herotable is a plug-in for the jQuery Javascript library, to make your tables have the ability to filter, sort and hide and a lot of another features.

Demo

Installing

npm install herotable

From CDN :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/herotable@latest/dist/css/main.min.css">

<script src="https://cdn.jsdelivr.net/npm/herotable@latest/dist/js/index.js"></script>

Note:

You must import the jquery plugin before the herotable.

Usage

$('table').herotable();

with options :

$('table').herotable({
    // options
});

Available options:

Example:

$('table').herotable({
    afterHideCallback: function(data) {
        console.log(`Column index is: ${data.col_index}`);
        console.log(`New width is: ${data.new_width}`);
    },
    lang: {
        generalSearch: "Search on products",
    }
});

Another Example:

$('table').herotable({
    columns: {
        sizes: {0: 100, 1: 50}, // first column will take "100px", and the second "50px"
        hidden: [2, 3], // hide the third and fourth columns
    },
});

For a scrollableWrapper optionm you can determine the max height of the wrapper in your css :

.scrollable-herotable-wrapper {
    max-height: 350px !important;  /* default is 50vh */
}

Date Format :

// you can use any date library you want, we'll use moment.js as an example.
<script src="//momentjs.com/downloads/moment-with-locales.js"></script>

$('table').herotable({
    dateFormatFunc: function(date) {
        // If we show the dates in table by this format (DD/MM/YYYY), so
        // we'll parse it to timestamp like that through moment.js
        return +moment(date, 'DD/MM/YYYY');
    }
});

Columns Types : There are an automatically types detector for columns, and you can also define the columns types manually like that:

$('table').herotable({
    // available types: number - string - date
    columns: {
        types: ['number', 'number', 'string', 'date'],
    }
});

If you would like to destroy the herotable :

let instance = $('table').herotable();
instance[0].herotable.destroy();

Sometimes you would like to initialize the herotable in a global place, so you don't have the instance direcly, you can do this:

$('#table-id').herotable(); // in a global place

$('#table-id')[0].herotable.destroy();

And you can pass the destroy argument to herotable directly like this:

$('#table-id').herotable('destroy');