JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://datatables.net/download/build/nightly/jquery.dataTables.js?_=11"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row" >
    <div class="col-md-12">
        <table id="marginTable" class="table-bordered display">
			<thead>
				<tr>
					<th>Type</th>
					<th>Region</th>
					<th>Recommended Margin (%)</th>
					<th>Current Margin (%)</th>
				</tr>
			</thead>
			<tbody>
                <td>ABC</td>
                <td>XYZ</td>
                <td>LMO</td>
                <td>QWE</td>
                        
                    
                
					
							
			</tbody>
		</table>
	</div>
</div>

JavaScript

$(document).ready(function(){
	$("#marginTable").dataTable({
		"oLanguage": {
	         "sSearch": "Filter records:"
	       }
	});
});