JSFiddle - React, Tailwind, and code Playground

by JustinsCook

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.6/jqc-1.12.3/dt-1.10.12/fh-3.1.2/r-2.1.0/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.6/jqc-1.12.3/dt-1.10.12/fh-3.1.2/r-2.1.0/datatables.min.js"></script>
<div class="row">
    	<div class="panel panel-default">
    <div class="panel-body">
			 <table cellspacing="0" width="100%" align="center" id="myTable" class="table table-striped table-bordered table-hover display dt-responsive nowrap" data-page-length='10'>
				 <thead> 
					<tr >
					  <th class="text-center" data-priority="2">Risk Level</th>
					  <th class="text-center" data-priority="1">Supplier Name</th>
					  <th class="text-center" data-priority="5">DNB DUNS</th>
					  <th class="text-center" data-priority="6">Location</th>
					  <th class="text-center" data-priority="9">SQE</th>
					  <th class="text-center" data-priority="10">Buyer</th>
					  <th class="text-center" data-priority="4">Status</th>
					  <th class="text-center" data-priority="7">Date Contacted</th>
					  <th class="text-center" data-priority="8">Completed Date</th>
					  <th class="text-center" data-priority="3">Available Actions</th>
					</tr>
				 </thead>
				<tbody>
					
			 <tr class="small">
			  <td align="center" >Data</td>
				 <td>Supplier Data</td>
         <td>DNB Data</td>
			  <td class="text-capitalize">Location Data</td>
			  <td class="text-capitalize">SQE Data</td>
			  <td class="text-capitalize">
			  Buyer Data
			  </td>
			  <td  class="text-center">Current Status</td>
			  <td class="text-center">12/01/2016</td>
			  <td class="text-center">12/01/2016</td>
				 <td class="text-center">Action</td>
			</tr>
				</tbody>
			</table>
						</div></div>	
  </div>

JavaScript

$(document).ready(function(){
    $('#myTable').DataTable({
	"order":[[1,'asc']],
	"fixedHeader": true,	
    "responsive": true,  
  	"autoWidth": true ,
	"drawCallback": function( settings ) {
        $("#myTable").wrap( "<div class='col-sm-12 table-responsive'></div>" );
    }
	});
});