JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/fixedcolumns/3.0.1/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/dataTables.fixedColumns.min.css">
This is a test of datatatables. It uses jquery. An additional plug in is required for fixed columns<br/><br/>
	
<table id="example" class="display cell-border" cellspacing="0" width="100%">
			<thead>
				<tr>
					<td><input type="checkbox" id="checkall" value="1" onclick="OnSelectAllCheckBoxClicked(this);"/></td>
					<th>First name</th>
					<th>Last name</th>
					<th>Position</th>
					<th>Office</th>
					<th>Age</th>
					<th>Start date</th>
					<th>Salary</th>
					<th>Extn.</th>
					<th>E-mail</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td><input type="checkbox" name="rowselect[] value="1"/></td>
					<td>Tiger</td>
					<td>Nixon</td>
					<td>Programmer</td>
					<td>Alburque</td>
					<td class="AlignRight">1</td>
					<td>2011/04/25</td>
					<td>$320,800</td>
					<td>8422</td>
					<td>[email protected]</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="rowselect[] value="1"/></td>
					<td>Steve</td>
					<td>Smith</td>
					<td>Programmer</td>
					<td>Bourne</td>
					<td class="AlignRight">2</td>
					<td>2011/07/25</td>
					<td>$170,750</td>
					<td>8422</td>
					<td>[email protected]</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="rowselect[] value="1"/></td>
					<td>Brian</td>
					<td>Johnson</td>
					<td>Programmer</td>
					<td>AnyTown</td>
					<td class="AlignRight">10</td>
					<td>2011/07/25</td>
					<td>$170,750</td>
					<td>8422</td>
					<td>[email protected]</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="rowselect[] value="1"/></td>
					<td>Ashton</td>
					<td>Cox</td>
					<td>Junior...

CSS

/* Ensure that the demo table scrolls */
	    th, td { white-space: nowrap; }
	    div.dataTables_wrapper {
	        width: 800px;
	        margin: 0 auto;		/* centers table. remove for left justified */
	    }
	    
	    /* this changes the row height */
		.dataTables_wrapper tbody tr {
		    height: 30px;
		    min-height: 30px;
		    max-height: 30px;
		}

		/* reduce the padding. the default is 10 on the sides and 8 on the top */
		.dataTables_wrapper td {
			padding: 5px !important;
		}
		

		/* set same font size for everything */
		.dataTables_wrapper {
		     font-family: Times New Roman, Arial, Sans-Serif !important;
			 font-size: 16px; 
		}

	    /* changing a cell to center, right aligmment */
	    .AlignCenter {text-align:center;}
	    .AlignRight {text-align:right;}

JavaScript

$(document).ready(function() {
		    var table = $('#example').DataTable( 
		    {
		    
		        paging:         false,
		        autoWidth:      true,		// must specify width in aoColumns if false
		        "columns": [				// there must be an entry for every column
				    {"width": "30px", "orderable": false},		
				    null,
				    null,
				    null,
				    null,
				    null,
				    null,
				    null,
				    null,
				    null
				  ]
			});
		    
		    new $.fn.dataTable.FixedColumns( table, 
				{
				    "leftColumns": 2		
				});
			} 
		);
		
		// select all checkbox changed
		function OnSelectAllCheckBoxClicked(cb) {
			// set all checkboxes in first column to same checked state
			$('input[type=checkbox][name^="rowselect"]').not(cb).prop('checked', cb.checked);
		}