JSFiddle - React, Tailwind, and code Playground

by Lloyd Randolf Montifalcon

HTML

<script src="&lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-1.12.4.js&quot;&gt;&lt;/script&gt;"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.bootstrap.min.css">
<body>
	<div style="text-align: center;">
		<div id="container">
			<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
				<thead>
				    <tr id="exHeader">
				        <th>Name</th>
				        <th>Position</th>
				        <th>Office</th>
				        <th>Age</th>
				        <th>Start date</th>
				        <th>Salary</th>
				    </tr>
				    <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>
				       ...

CSS

/* Ensure that the demo table scrolls */
	    th, td { white-space: nowrap; }
	    div.dataTables_wrapper {
	        width: 600px;
	        margin: 0 auto;
	    }

	    tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    	}

JavaScript

<script type="text/javascript">
			$(document).ready(function() {

		    // Setup - add a text input to each footer cell
		    $('#example thead #exHeader th').each( function () {
		        var title = $(this).text();
		        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
		    } );


		    var table = $('#example').DataTable( {
		        scrollY:        "300px",
		        scrollX:        true,
		        scrollCollapse: true,
		        paging:         false,
		        fixedColumns:   {
		        	leftColumns:	2
		        }
		        ,

		        initComplete: function () {
		            this.api().columns([0,1,2]).every( function () {
		                var column = this;
		                var select = $('<select><option value=""></option></select>')
		                    .appendTo( $(column.header()).empty() )
		                    .on( 'change', function () {
		                        var val = $.fn.dataTable.util.escapeRegex(
		                            $(this).val()
		                        );
		 
		                        column
		                            .search( val ? '^'+val+'$' : '', true, false )
		                            .draw();
		                    } );
		 
		                column.data().unique().sort().each( function ( d, j ) {
		                    select.append( '<option value="'+d+'">'+d+'</option>' )
		                } );
		            } );
		        }

		    });

		/*table.columns().eq(0).each( function ( colIdx ) {
			$( 'input', 'th:nth-child('+(colIdx+1)+')' ).on( 'keyup change', function() {
			   table
			       .column( colIdx )
			       .search( this.value )
			       .draw();
			});
		});*/


		} );
	</script>