JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

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>
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.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>
</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"];

  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",
        visible: false
      },
      {
        "data": "Deliverable"
      },
      {
        "data": "To"
      },
      {
        "data": "Date"
      },
      {
        "data": "Approved"
      },
      {
        "data": "Notes"
      }
    ],

    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    rowGroup: {
      dataSrc: 'Program'
    }
  });

  loadData();

});