JSFiddle - React, Tailwind, and code Playground

by cr0wn3r

HTML

<div id="wrapper">
<table id="sel">
    <thead>
        <tr>
            <th>A</th><th>A</th><th>A</th><th>A</th><th>A</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>footer</td><td>footer</td><td>footer</td><td>footer</td><td>footer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>       
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr> 
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr> 
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
        </tr>
        <tr>
           ...

JavaScript

/*!
* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
*
* Copyright (c) 2011 Mark Malek
* http://fixedheadertable.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
* 
* http://docs.jquery.com/Plugins/Authoring
* jQuery authoring guidelines
*
* Launch  : October 2009
* Version : 1.2.2
* Released: May 9th, 2011
*
* 
* all CSS sizing (width,height) is done in pixels (px)
*/
(function(a) {
    a.fn.fixedHeaderTable = function(f) {
        var e = {
            width: "100%",
            height: "100%",
            borderCollapse: true,
            themeClass: "fht-default",
            autoShow: true,
            loader: false,
            footer: false,
            cloneHeadToFoot: false,
            cloneHeaderToFooter: false,
            autoResize: false,
            create: null
        };
        var c = {};
        var b = {
            init: function(g) {
                c = a.extend({}, e, g);
                return this.each(function() {
                    var i = a(this),
                        h = this;
                    if (d._isTable(i)) {
                        b.setup.apply(this, Array.prototype.slice.call(arguments, 1));
                        a.isFunction(c.create) && c.create.call(this)
                    } else {
                        a.error("Invalid table mark-up")
                    }
                })
            },
            setup: function(v) {
                var t = a(this),
                    u = this,
                    m = t.find("thead"),
                    p = t.find("tfoot"),
                    i = t.find("tbody"),
                    k, o, s, j, h, r, n = 0;
                c.scrollbarOffset = d._getScrollbarWidth();
                c.themeClassName = c.themeClass;
                if (c.width.search("%") > -1) {
                    var q = t.parent().width() - c.scrollbarOffset
                } else {
                    var q = c.width - c.scrollbarOffset
               ...