JSFiddle - React, Tailwind, and code Playground

by nathanlogan

HTML

<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.10.8/jquery.tablesorter.min.js"></script>
<div class="container">
<table border="0" cellpadding="0" cellspacing="0" class="scrolledTableHeader">
    <tr>
        <th><span>C1</span></th>
        <th><span>Another Col</span></th>
        <th><span>Clmn 3</span></th>
    </tr>
</table>

<div class="scrolledTableBody">
    <table border="0" cellpadding="0" cellspacing="0" class="tablesorter">
        <thead>
            <tr>
                <th><span>C1</span></th>
                <th><span>Another Col</span></th>
                <th><span>Clmn 3</span></th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>Data data data data</td>
            <td>Data</td>
            <td>Data data data data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
      ...

CSS

.container {
    height:100%;
}

table {
    border:1px solid pink;
    border-width:1px 0 0 1px;
}
th, td {
    border:1px solid pink;
    border-width:0 1px 1px 0;
    padding:3px 5px;
}
th {
    overflow:hidden;
    background:#eee;
    white-space:nowrap;
    border-bottom:0;
}
.scrolledTableBody {
    overflow:hidden;
}
.scrolledTableBody, .scrolledTableBody table {
    height:200px;
    width:400px;
}

.scrolledTableBody table thead {
    display:none;
}
}

JavaScript

// Since you can't apply jScrollPane to a <tbody> directly,
//    (as discussed here: https://groups.google.com/forum/#!topic/jscrollpane/Gl-0dCo0EA0)
// this is an alternative approach to having a fixed header with jScrollPane.


$(".scrolledTableBody table").tablesorter();

var sortDirections = [];
$(".scrolledTableHeader th").each(function(i) {
    $(this).bind("click", function(){
        sortDirections[i] = sortDirections[i] ? 0 : 1;
        $(".scrolledTableBody table").trigger("sorton", [[[ i, sortDirections[i] ]]]);
    });
});


$('.scrolledTableBody').jScrollPane();


$('.scrolledTableHeader').each(function(){
    var $this = $(this);
    var $ths = $this.find('th');
    var $tds = $this.next().find('table:first tbody tr:eq(0) td');
    var thWidths = [];
    var tdWidths = [];
    
    // get minimum column widths
    $ths.find('span').each(function(i){
        thWidths[i] = $(this).width();
    });
    
    // set minimum data widths based on minimum column widths
    $tds.each(function(i){
        $(this).css('min-width', (thWidths[i]) +'px');
    });
    
    // get data column widths
    $tds.each(function(i){
        tdWidths[i] = $(this).width();
    });
    
    // now set header widths
    $ths.each(function(i){
        $(this).css('width', tdWidths[i] +'px');
    });
});