JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.24.5/js/jquery.tablesorter.widgets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.24.5/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.24.5/js/widgets/widget-scroller.min.js"></script>
 <div class="timebandsComposition-wrapper-MMI">
        <table class="table tableTimeBandsComposition text-center">
            <thead>
                <tr>
                    <th class="sorter-false" width="1%"></th>
                    <th class="sorter-false" width="1%"></th>
                    <th class="sorter-false" width="1%"></th>
                    <th class="sorter-false" width="1%">TOTAL</th>
                    <th class="sorter-false" width="4%">02:30</th>
                    <th class="sorter-false" width="4%">06:30</th>
                    <th class="sorter-false" width="4%">07:30</th>
                    <th class="sorter-false" width="4%">08:30</th>
                    <th class="sorter-false" width="4%">09:30</th>
                    <th class="sorter-false" width="4%">10:30</th>
                    <th class="sorter-false" width="4%">11:30</th>
                    <th class="sorter-false" width="4%">12:30</th>
                    <th class="sorter-false" width="4%">13:30</th>
                    <th class="sorter-false" width="4%">14:30</th>
                    <th class="sorter-false" width="4%">15:30</th>
                    <th class="sorter-false" width="4%">16:30</th>
                    <th class="sorter-false" width="4%">17:30</th>
                    <th class="sorter-false" width="4%">18:30</th>
                    <th class="sorter-false" width="4%">19:30</th>
     ...

CSS

.tableTimeBandsComposition tbody tr td{
    white-space: pre-line !important;
 }
 
 .TimeBandsCompVariable-MMI{
    transform:
          translate(8px, 12px)
          rotate(270deg);
    width:45px;
    display:block;
    padding:0;
 }
 
  .TimeBandsCompVariable-MMI:hover{
    background: transparent !important;
 }
 
 .TimeBandsCompVariableTD-MMI{
    padding: 0 !important;
 }
  

.tableTimeBandsComposition tbody tr td, .tableTimeBandsComposition thead tr th {
    text-align: center;
    font-size:11px;
    padding:1px;
    font-weight:700;
    
  }

  .tableTimeBandsComposition tbody tr td div{
    padding:5px;
  }
  
  .tableTimeBandsComposition thead tr th{
    white-space: pre-line !important;
    font-size: 9px !important;
  }
  
  .separatedRowProgramsGrid-MMI td{
    font-size: 9px !important;
  }
  
  .timebandsComposition-wrapper-MMI {
    position: relative;
    padding: 0 5px;
    overflow-y: auto;
  }

.tableTimeBandsComposition .red{
  color: #a94442;
  background-color: #f2dede;
}

.tableTimeBandsComposition .green {
  color: #3c763d;
  background-color: #dff0d8;
}

.tableTimeBandsComposition .yellow {
  color: #8a6d3b;
  background-color: #fcf8e3;
}

JavaScript

var startFixedColumns = 3;
    $('.tableTimeBandsComposition').tablesorter({
        delayInit: true, // don't parse the data in the table
        showProcessing: true,
        headerTemplate : '{content}',
        widthFixed: true,
        widgets: ['stickyHeaders', 'scroller' ],
        widgetOptions : {
            stickyHeaders_attachTo: '.timebandsComposition-wrapper-MMI',
            stickyHeaders_offset: 0,
            stickyHeaders_addCaption: true,
            scroller_height : 300,
            scroller_upAfterSort: true,
            scroller_jumpToHeader: true,
            scroller_barWidth : null,
            scroller_fixedColumns : startFixedColumns,
        }
    });