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:

| Name | Description | |--------------------| ---------------------| |isRTL | If the table is in RTL direction, make it rtl in herotable, Boolean (default: false)| |GeneralSearch | Show the general search input above the table, Boolean (default: false) | |scrollableWrapper | Make the table scrollable, Boolean (default: false)| |columnSearch | Enable searching on each column, Boolean (default: true)| |columnResizer | Enable resizing feature on columns, Boolean (default: true)| |hideColumn | Enalbe the hide column feature, Boolean (default: true) | |noAvailableData | When the table is empty, would you like to show the empty row or not, Boolean (default: true)| |afterResizeCallback | You can call your callback function after column resizing, there is passed parameter to function is data contains on (new_width and col_index), function (default: null)| |afterHideCallback | You can call your callback function after column hiding, function (default: null)| |afterShowHiddenColsCallback| You can call your callback function after show the hidden columns, function (default: null)| |hideFooterIfBodyEmpty| You can hide the footer when you search on something and the no results, Boolean (default: true)| |columns | From columns option you can edit the column width and column visibility at the begining, Object (default: {sizes: {}, hidden: [], types: []})| |enableSumValuesOnColumns | You can enable sum values on columns and put the summation in footer, Array(default: [])| |sumValuesCell | When you enable the summation on column, the summation will be displayed in td tag in the same index in footer, but you can determine nested element inside td, string (default: 'td')| |decimalNumberLength| If you enabled the summation on columns, you can make the summation with decimal like: 50.016 through define the length, Number(default: 0)| |withPagination | For enable the pagination feature, you must make the value is true, Boolean(default: false)| |rowsPerPage | If you enabled the pagination feature, you maybe would like to change the rows count per page, Number(default: 15)| |lang | Change the default text on elements, like (generalSearch, noAvailableData, showHiddenColumn, nextPaginateBtn, prevPaginateBtn, all)| |dateFormatFunc| The default format for date columns is ISO 8601, the date that you added in the table cells will passed to new Date() method automatically, but if you want a custom date format, use dateFormatFunc and return a timestamp value.| |preserveState | Preserve the state in the search inputs when return back to the page. Boolean(default: true)|

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');