JSFiddle - React, Tailwind, and code Playground

by Chris

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><input type="text" 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
  }
})