JSFiddle - React, Tailwind, and code Playground

by cr0wn3r

HTML

<script src="http://autobahn.tablesorter.com/jquery.tablesorter.js"></script>
<div id='header1'>header1</div>

<div id='left-col'>
    <a href='#' id='col-resize'>clickme</a><br />
    Left<br />
    Col
</div>

<div id='right-col'>
    <table>
        <thead>
            <tr id='header-row'>
                <th class='rc-1-0'>A</th>
                <th class='rc-2-0'>B</th>
                <th class='rc-3-0'>C</th>
                <th class='rc-4-0'>D</th>
                <th class='rc-5-0'>E</th>
                <th class='rc-6-0'>F</th>
                <th class='rc-7-0'>G</th>
                <th class='rc-8-0'>H</th>
            </tr>
        </thead>
        <tbody>
            <tr id='row1'>
                <td class='rc-1-0'>s</td>
                <td class='rc-2-0'>s</td>
                <td class='rc-3-0'>s</td>
                <td class='rc-4-0'>s</td>
                <td class='rc-5-0'>s</td>
                <td class='rc-6-0'>s</td>
                <td class='rc-7-0'>s</td>
                <td class='rc-8-0'>s</td>
            </tr>
            <tr>
                <td class='rc-1-0'>a</td>
                <td class='rc-2-0'>g</td>
                <td class='rc-3-0'>s</td>
                <td class='rc-4-0'>i</td>
                <td class='rc-5-0'>k</td>
                <td class='rc-6-0'>e</td>
                <td class='rc-7-0'>v</td>
                <td class='rc-8-0'>h</td>
            </tr>       
            <tr>
                <td class='rc-1-0'>a</td>
                <td class='rc-2-0'>l</td>
                <td class='rc-3-0'>s</td>
                <td class='rc-4-0'>i</td>
                <td class='rc-5-0'>v</td>
                <td class='rc-6-0'>e</td>
                <td class='rc-7-0'>v</td>
                <td class='rc-8-0'>n</td>
            </tr> 
            <tr>
                <td class='rc-1-0'>s</td>
                <td class='rc-2-0'>s</td>
                <td class='rc-3-0'>s</td>
                <td class='rc-4-0'>s</td>
...

CSS

#header1 { background-color: red; height: 20px; border: 1px solid red }
table th, table td { padding:5px; border: 1px solid #ccc; }
table th { color: #fff; background-color: blue }
table { width: 100%; }

#right-col { margin-left: 150px; }
#left-col { width: 140px; float:left; background-color: #ddd; }

JavaScript

/* jquery scrollToFixed plugin from bigspotteddog https://github.com/bigspotteddog/ScrollToFixed */
(function(a){a.ScrollToFixed=function(d,r){var c=this;c.$el=a(d);c.el=d;c.$el.data("ScrollToFixed",c);var j=false;var l=c.$el;var e=0;var g=0;var q=-1;var h=-1;var m=null;function b(){i();h=-1;e=l.offset().top;g=l.offset().left;if(q==-1){orginalOffsetLeft=g}j=true;if(c.options.bottom!=-1){p()}}function f(){return l.css("position")=="fixed"}function k(){return l.css("position")=="absolute"}function p(){if(!f()){m.css({display:l.css("display"),width:l.outerWidth(true),height:l.outerHeight(true),"float":l.css("float")});l.css({width:l.width(),position:"fixed",top:c.options.bottom==-1?c.options.marginTop:"",bottom:c.options.bottom==-1?"":c.options.bottom,})}}function i(){if(f()||k()){h=-1;m.css("display","none");l.css({width:"",position:"",left:"",top:""})}}function o(s){if(s!=h){l.css("left",g-s);h=s}}function n(){if(!j){b()}var s=a(window).scrollLeft();var t=a(window).scrollTop();if(c.options.bottom==-1){if(c.options.limit>0&&t>=c.options.limit-c.options.marginTop){l.css({width:l.width(),position:"absolute",top:c.options.limit,left:g})}else{if(t>=e-c.options.marginTop){p();h=-1;o(s)}else{i()}}}else{if(c.options.limit>0){if(t+a(window).height()-l.outerHeight()>=c.options.limit-c.options.marginTop){i()}else{p();o(s)}}else{o(s)}}}c.init=function(){c.options=a.extend({},a.ScrollToFixed.defaultOptions,r);if(navigator.platform=="iPad"||navigator.platform=="iPhone"||navigator.platform=="iPod"){return}c.$el.css("z-index",c.options.zIndex);m=a("<div/>");c.$el.after(m);a(window).bind("resize",function(s){b();n()});a(window).bind("scroll",function(s){n()});if(c.options.bottom!=-1){p()}};c.init()};a.ScrollToFixed.defaultOptions={marginTop:0,limit:0,bottom:-1,zIndex:1000};a.fn.scrollToFixed=function(b){return this.each(function(){(new a.ScrollToFixed(this,b))})}})(jQuery);
/* /end of plugin */
             
// set table to be sorted             
// $('table').tablesorter();

//...