JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,fc-3.2.1,fh-3.1.1/datatables.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,fc-3.2.1,fh-3.1.1/datatables.js"></script>
<div class="tableContainer">
<table class="myTable">
<thead>
<tr>
<th>Notes</th>
<th>Country</th>
<th>Product</th>
<th>Strength</th>
<th>Formula</th>
<th>Pack Size</th>
<th>Commercial Status</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" placeholder="Enter comments here" value="double click me to select"/></td>
<td>Algeria</td>
<td>Product ABC DEF</td>
<td>10mg</td>
<td>10x100</td>
<td>100</td>
<td>Marketed</td>
<td><textarea value="100.00"/></td>
</tr>
<tr>
<td><input type="text" placeholder="Enter comments here"/></td>
<td>Bahrain</td>
<td>Product ABC DEF</td>
<td>10mg</td>
<td>10x100</td>
<td>100</td>
<td>Marketed</td>
<td><input type="text" value="100.00"/></td>
</tr>
<tr>
<td><input type="text" placeholder="Enter comments here"/></td>
<td>Canada</td>
<td>Product ABC DEF</td>
<td>10mg</td>
<td>10x100</td>
<td>100</td>
<td>Marketed</td>
<td><input type="text" value="100.00"/></td>
</tr>
<tr>
<td><input type="text" placeholder="Enter comments here"/></td>
<td>Denmark</td>
<td>Product ABC DEF</td>
<td>10mg</td>
<td>10x100</td>
<td>100</td>
<td>Marketed</td>
<td><input type="text" value="100.00"/></td>
</tr>
</tbody>
</table>
</div>
CSS
.tableContainer {
width: 500px;
}
JavaScript
$('.myTable').dataTable({
filter: false,
search: false,
paginate: false,
scrollX: true,
fixedColumns: {
leftColumns: 0,
rightColumns: 1
}
})