JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    </head>
    <body>
    <div class="container">
        <table id="example" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Program</th>
                <th>Deliverable</th>
                <th>To</th>
                <th>Date Submitted</th>
                <th>Approved</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    </div>
    </body>
</html>

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

JavaScript

$(document).ready( function () {
var data = [
    {
    "Program": "Program 1",
    "Deliverable": "Monthly Status Report (MSR)",
    "To": "[email protected]",
    "Date": "03/30/2002",
    "Approved": "Yes",
    "Notes": "Example Notes"
        },
    {
    "Program": "Program 1",
    "Deliverable": "Meeting Minutes",
    "To": "[email protected]",
    "Date": "03/30/2012",
    "Approved": "No",
    "Notes": "Example Notes"
        },
    {
    "Program": "Program 2",
    "Deliverable": "Monthly Status Report (MSR)",
    "To": "[email protected]",
    "Date": "03/30/2002",
    "Approved": "Yes",
    "Notes": "Example Notes"
        },
    {
    "Program": "Program 3",
    "Deliverable": "Monthly Status Report (MSR)",
    "To": "[email protected]",
    "Date": "03/30/2002",
    "Approved": "Yes",
    "Notes": "Example Notes"
        }


];

var table = $('#example').DataTable({
    data: data,
    columns: [
      {data:'Program', title: 'Program'},
      {data:'Deliverable', title: 'Deliverable'},
      {data:'To', title: 'To'},
      {data:'Date', title: 'Date'},
      {data:'Approved', title: 'Approved'},
      {data:'Notes', title: 'Notes'},
    ],
    //striped, hover, order-column, row-border
    'order': [[3, 'desc']],
    'dom': 'Bfrtip',
    'buttons': [
    	'copy', 'csv', 'excel', 'pdf', 'print'
    ]
  });
});