JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/ju/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-colvis-1.2.1/b-flash-1.2.1/b-html5-1.2.1/b-print-1.2.1/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.2/r-2.1.0/sc-1.4.2/se-1.2.0/datatables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/sunny/jquery-ui.css">
<script src="https://cdn.datatables.net/v/ju/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-colvis-1.2.1/b-flash-1.2.1/b-html5-1.2.1/b-print-1.2.1/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.2/r-2.1.0/sc-1.4.2/se-1.2.0/datatables.js"></script>
<div id="SearchResults">
  <table id="SearchResultsTable">
    <thead>
      <tr>
        <th></th>
        <th>Region</th>
        <th>PN</th>
        <th>Description</th>
        <th>Duration</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <br/>
  <input type="button" id="AddSelected" value="Add Selected" />
</div>

JavaScript

var models = [{
   "ID": 1,
   "SOW": "SOWWWWW",
   "Title": "TITLE!",
   "Description": "DESCRIPTION!"
 }];

 $("#SearchResultsTable").DataTable({
   "destroy": true,
   "scrollY": "200px",
   "scrollCollapse": true,
   "paging": false,
   "data": models,
   "dom": '',
   "aoColumns": [{
     "mData": "ID",
     "mRender": function(data, type, full) {
       return data;
     }
   }, {
     "mData": "SOW",
     "mRender": function(data, type, full) {
       return data;
     }
   }, {
     "mData": "Title"
   }, {
     "mData": "Description"
   }, {
     "mData": "SOW",
     "mRender": function(data, type, full) {
       return data;
     }
   }]
 });