Jquery Plugins

(function( $ ) {
    $.fn.reindex = function() {
        $(this).find('tbody tr:not(.details)').each(function(idx) {
            $(this).find('td:first-child input').val((idx+1));
        });
        $(this).find("tbody>tr:not(.details):odd").css("background-color", "#d7d7d7");
        $(this).find("tbody>tr:not(.details):even").css("background-color", "#ffffff");
        $(this).find("tbody>tr:not(.details):odd input").css("background-color", "#d7d7d7");
        $(this).find("tbody>tr:not(.details):even input").css("background-color", "#ffffff");
        return $(this);
    };
}) ( jQuery );

(function( $ ) {
    $.fn.sortable = function() {
        function sorter() {
            getCellValue = ( tr, idx ) =>
                $( tr ).find('td').eq( idx ).find( 'input' ).val();

            comparer = (idx, asc) => (a, b) => ((v1, v2) =>
                v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
                ) ( getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx) );

            var tbl_rows = table.find('>tbody>tr:not(.details)');

            var idx = $(this).closest('th').index();

            var tbl = table[0];
            if (typeof tbl.asc === 'undefined') {
                tbl.asc = 1;
            }

            Array.from(tbl_rows).sort( comparer(idx, tbl.asc = !tbl.asc) )
                .forEach(tr => table.find('>tbody')[0].appendChild(tr) );

            tbl_rows.each(function() {
                var elm = $(this);
                var id = $(this).attr('data-id');
                var details = elm.parent().find('tr.details[data-id=' + id + ']');
                details.insertAfter(elm);
            });
        }

        var table = $(this);
        var wrap = $('<div class="table wrap"></div>');
        table.parent().append( wrap );
        wrap.append( table );
        table.find('thead th span').on('click', sorter);
        table.css('display', 'block');

        return table;
    };
}) ( jQuery );

(function( $ ) {
    $.fn.size = function(table_width=0) {
        var table = $(this);
        table.width( 0 );

        var wrap = $(this).closest('.table.wrap');
        wrap.css( { width: table_width, overflow: 'auto' } );

        var span = $('<span>' +
            table.find('td:last-child input').val() + '</span>');
        $('footer').append( span.hide() );

        table.find('th span').each(function( ) {
            $(this).width( $(this).closest('button').width() );
        });
        table.find('th:last-child span').width( span.width() );

        wrap.on('mouseup', function() {
            wrap.off('mousemove');
        });
        wrap.on('mouseleave', function() {
            wrap.off('mousemove');
        });

        table.find('thead th button').on('dblclick', function() {
            var width = 0;
            var idx = $(this).closest('th').index();
            table.find('tbody tr:not(.details)').each(function() {
                var input = $(this).find('td').eq( idx ).find('input');
                span.text( input.val() );
                width = span.width() > width ? span.width() : width;
            });
            table.find('thead th').eq( idx ).width(width);
            table.find('thead th span').eq( idx ).width(width);
            return false;
        });

        wrap.on('mousedown', function(e) {
            var deltaX = 0;
            var curX = e.pageX;
            var elm = $(document.elementFromPoint(e.pageX, e.pageY)).closest('th');

            if(e.offsetX > elm.outerWidth() - 6) {
                wrap.on('mousemove', function(e) {
                    deltaX = e.pageX - curX;
                    curX = e.pageX;
                    elm.width( elm.width() + deltaX );

                    elm.find('span').width( elm.find('span').width() + deltaX );
                    if ( table.width() + deltaX > wrap.width() ) {
                        table.width(table.width() + deltaX);
                        elm.find('span').width( elm.find('span').width() + deltaX );
                    }
                });
                return false;
            }
        });
        return $(this);
    };
}) ( jQuery );