JSFiddle - React, Tailwind, and code Playground

by Justin Hallett

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//rawgithub.com/Mottie/tablesorter/working/js/jquery.tablesorter.js"></script>
<script src="//rawgithub.com/Mottie/tablesorter/working/js/jquery.tablesorter.widgets.js"></script>
<script src="//rawgithub.com/Mottie/tablesorter/working/js/widgets/widget-pager.js"></script>
<script src="//rawgithub.com/Mottie/tablesorter/working/js/widgets/widget-cssStickyHeaders.js"></script>
<script src="//rawgithub.com/Mottie/tablesorter/working/js/jquery.tablesorter.widgets-filter-formatter.js"></script>
<script src="//rawgithub.com/Mottie/tablesorter/working/js/parsers/parser-date-extract.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://rawgit.com/Mottie/tablesorter/working/js/widgets/widget-columnSelector.js"></script>
<script src="http://mottie.github.io/tablesorter/docs/js/jquery.tipsy.min.js"></script>
<link rel="stylesheet" href="http://mottie.github.io/tablesorter/docs/css/tipsy.css">
<table id="table" class="tablesorter" data-table-page="codepen-vGnAa">
    <thead>
        <tr>
            <th class="filter-select filter-parsed filter-onlyAvail">First Name</th>
            <th class="filter-select filter-parsed filter-onlyAvail">Last Name</th>
            <th>Age</th>
            <th>Total</th>
            <th>Discount</th>
            <th class="sorter-extractUSLongDate">Date</th>
            <th class="sorter-false filter-false"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="holder-cell" class="no-edit firstname">Peter</td>
            <td data-dbvalue="1" class="lastname">Parker</td>
            <td>
                <div>28</div>
            </td>
            <td class="hasPrice" data-currencysym="£" data-currencycode="GBP">9.99</td>
            <td>20%</td>
            <td>Jul 6, 2006 8:14 AM</td>
            <td class="removeRow">x</td>
   ...

CSS

/* body */
 body {
    font-family: arial;
    padding: 0 42px;
    background-color: #fff;
}
/* table */
 table {
    min-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
}
/* Filter row is special case */
 table.tablesorter thead tr.tablesorter-filter-row td {
    padding: 3px 2px;
    text-align: center;
    white-space: nowrap;
}
table.tablesorter thead tr.tablesorter-filter-row td label {
    margin: 0;
}
table.tablesorter thead tr.tablesorter-filter-row td input.number {
    width: auto;
}
table.tablesorter thead tr.tablesorter-filter-row td input.hasDatepicker {
    max-width: 8em;
    width: 8em;
}
table.tablesorter thead tr.tablesorter-filter-row td div.compare-select-wrapper {
    display: inline;
}
table.tablesorter thead tr.tablesorter-filter-row td select.compare-select {
    -webkit-appearance: none;
    -moz-appearance: tab;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    max-width: 2.5em;
    width: 2.5em;
    padding: 2px 2px;
}
table.tablesorter thead tr.tablesorter-filter-row td select.disabled, table.tablesorter thead tr.tablesorter-filter-row td input.disabled {
    display: none;
}
/* hidden filter row */
 table.tablesorter .tablesorter-filter-row.hideme td {
    padding: 1px 0 0 0;
    margin: 0;
    line-height: 0;
    cursor: pointer;
}
table.tablesorter .tablesorter-filter-row.hideme td {
    background: #fff;
}
table.tablesorter .tablesorter-filter-row.hideme td * {
    height: 1px;
    min-height: 0;
    border: 0;
    padding: 0;
    margin: 0;
    /* don't use visibility: hidden because it disables tabbing */
    opacity: 0;
    filter: alpha(opacity=0);
}
/* tables */
 table.tablesorter {
    font-family: arial, verdana, sans-serif;
    font-size: 8pt;
    text-align: left;
    border-collapse: separate;
    width: auto;
    background: #fff;
    line-height: 2em;
    padding-bottom:...

JavaScript

function toolPanel($container, is_open) {
    var dropshadow = 6;
    var $handle = $container.find('.handle');
    var panel = $container.attr('id');

    if (is_open) {
        $container.animate({
            'left': '-' + ($container.width() - $handle.outerWidth() + dropshadow) + 'px',
        }, 500, function () {
            if ($container.is(':hidden')) $container.fadeIn(function () {
                if (panel == 'filtersContainer') {
                    $(this).trigger('sizeLabels');
                    $container.css('left', '-' + ($container.width() - $handle.outerWidth() + dropshadow) + 'px');
                }
            });
        });
    } else {
        $container.animate({
            'left': '0px',
        }, 500);
    }
}

function sizeToolContainer(panel) {
    var containerWidth = 108;

    $('#' + panel + 'Container .panelContainer .panel > label, #' + panel + 'Container .panelContainer .panel > .label').each(function () {
        var mywidth = $(this).outerWidth();

        if (mywidth > containerWidth) containerWidth = mywidth;
    });

    /* For the scroll bar */
    if ($('#' + panel + 'Container .panelContainer .panel').height() > $('#' + panel + 'Container .panelContainer').height()) {
        containerWidth += 20;
    }

    $('#' + panel + 'Container .panelContainer').width(containerWidth);

    toolPanel($('#' + panel + 'Container'), true);
}

function populateFilters() {
    /* Clear panel first */
    $('#filtersContainer .panel').empty();

    /* How many headers are there?*/
    var headerrows = $('table.tablesorter .tablesorter-headerRow').length - 1;

    /* Assume last row has all the cells */
    var $headercols = $('table.tablesorter .tablesorter-headerRow:eq(' + headerrows + ') th:not(.filter-false)');

    var prefix = [];
    var cloneid = 0;
    $.each($headercols, function () {
        var col = $(this).attr('data-column');

        if (headerrows > 0) {
            $.each($('table.tablesorter...