JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<div class="header">
  <h1><strong>Deliverables</strong></h1>
  <p><strong>*Utilize the search bar to find a specific Deliverable based on any criteria*</strong></p>
</div>
<div class ="container">
<table id="myTable" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tfoot>
      <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </tfoot>
</table>
</div>

CSS

div.container {
	min-width: 980px;
	margin: 0 auto;
}
.header {
  padding: 10px;
  text-align: center;
}
body {
	font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;

JavaScript

function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
	//create an array of urls to run through the ajax request instead of having to do multiple AJAX Requests
    var urls = ["url1", "url2", "url3"];
       
    for (i=0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
      $.ajax({
        url: urls[i],
		'headers': { 'Accept': 'application/json;odata=nometadata' },
        success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
          data = data;
          var table = $('#myTable').DataTable();
          table.rows.add( data.value ).draw();
        }
      }); 
    } // missing bracket
}
$(document).ready(function() {
    
  $('#myTable').DataTable( {
    "columns": [
      { "data": "Program" },
      { "data": "Deliverable" },
      { "data": "To" },
      { "data": "Date" },
      { "data": "Approved" },
      { "data": "Notes" }
    ],
	dom: 'Bfrtip',
	buttons: [
		'copy','csv','excel','pdf','print'
	]
  } );
    
 loadData();
    
} );