JSFiddle - React, Tailwind, and code Playground

by protasovams

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.0.2/css/dataTables.fixedColumns.css">
<script src="//cdn.datatables.net/fixedcolumns/3.0.2/js/dataTables.fixedColumns.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
               ...

CSS

td.group,
td.group:hover {
    background-color: #bbb !important;
}

JavaScript

$(document).ready( function () {
	var oTable = $('#example').dataTable( {
		"sScrollY": "300px",
		"sScrollX": "100%",
		"sScrollXInner": "150%",
		"bScrollCollapse": true,
		"bPaginate": false,
		"aaSortingFixed": [ [1, 'asc'] ],
		"aoColumnDefs": [
			{ "bVisible": false, "aTargets": [1] }
		]
	} );

	new  $.fn.dataTable.FixedColumns( oTable, {
		"fnDrawCallback": function ( left, right ) {
			var oSettings = oTable.fnSettings();
			if ( oSettings.aiDisplay.length == 0 )
			{
				return;
			}

			var nGroup, nCell, iIndex, sGroup;
			var sLastGroup = "", iCorrector=0;
			var nTrs = $('#example tbody tr');
			var iColspan = nTrs[0].getElementsByTagName('td').length;

			for ( var i=0 ; i<nTrs.length ; i++ )
			{
				iIndex = oSettings._iDisplayStart + i;
				sGroup = oSettings.aoData[ oSettings.aiDisplay[iIndex] ]._aData[1]			;
				
				if ( sGroup != sLastGroup )
				{
					/* Cell to insert into main table */
					nGroup = document.createElement( 'tr' );
					nCell = document.createElement( 'td' );
					nCell.colSpan = iColspan;
					nCell.className = "group";
					nCell.innerHTML = "&nbsp;";
					nGroup.appendChild( nCell );
					nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );

					/* Cell to insert into the frozen columns */
					nGroup = document.createElement( 'tr' );
					nCell = document.createElement( 'td' );
					nCell.className = "group";
					nCell.innerHTML = sGroup;
					nGroup.appendChild( nCell );
					$(nGroup).insertBefore( $('tbody tr:eq('+(i+iCorrector)+')', left.body)[0] );

					iCorrector++;
					sLastGroup = sGroup;
				}
			}
		}
	} );
} );