JSFiddle - React, Tailwind, and code Playground

HTML

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.21/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>
<script src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel ="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/>
<link rel ="stylsheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
<link rel ="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.min.css"/>
  <div class ="heading">
  <h1 class="center"><strong>Deliverables</strong></h1>
  <p><strong>Click the Program/Deliverable names to Collapse/Expand the rows</strong></p>
  </div>
<div class ="container">
<table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
  <thead class="thead-dark">
    <tr>
      <th>Program</th>
     ...

CSS

h1{
  text-align: center;
}
p{
  text-align: center;
}
#myform {
	margin:0 auto;
	width:250px;
	padding:14px;
	align: center;
}

label {
	width: 10em;
	float: left;
	margin-right: 0.5em;
	display: block;
	vertical-align: middle;
}
.submit {
	float:right;
}

fieldset {
	background:#EBF4FB none repeat scroll 0 0;
	border:2px solid #B7DDF2;
	width: 450px;
}

legend {
	color: #fff;
	background: #80D3E2;
	border: 1px solid #781351;
	padding: 2px 6px
	text-align: center;
}
.elements {
	padding:10px;
}
p {
	border-bottom:1px solid #B7DDF2;
	color:#666666;
	font-size:12px;
	margin-bottom:20px;
	padding-bottom:10px;
}
span {
	color:#666666;
	font-size:12px;
	margin-bottom:1px;
	
}
.btn{
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #B7DDF2;
  
}

.btn:hover{
  color: #333333;
  background-color: #e6e6e6;
}

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

var data = [
    [ "AMMO", "Meeting Minutes", "[email protected]", "02/10/2020", "Yes", "Example Notes" ],
    [ "AMMO", "Monthly Status Report", "[email protected]", "02/10/2020", "Yes", "Example Notes" ],
    [ "Dar-Q", "Meeting Minutes", "[email protected]", "02/10/2020", "Yes", "Example Notes" ],
    [ "Dar-Q", "Monthly Status Report", "[email protected]", "02/10/2020", "Yes", "Example Notes" ],
    [ "WTBn", "Meeting Minutes", "[email protected]", "02/10/2020", "Yes", "Example Notes" ],
    [ "WTBn", "Monthly Status Report", "[email protected]", "02/10/2020", "Yes", "Example Notes" ],
];
 
$(document).ready(function() {
 var collapsedGroups = {}; 
    var top = '';
    var parent = '';

  var table = $('#myTable').DataTable( {
        data: data,
        columns: [
            { data: "Program", visible: false },
            { data: "Deliverable", visible: false },
            { data: "To" },
            { data: "Date" },
            { data: "Approved" },
            { data: "Notes" }
        ],
        dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
	 buttons: [{
      extend: 'collection',
      className: "btn-dark",
      text: 'Export',
      buttons:
      [{
      extend: "excel", className: "btn-dark"
    },
	  {
      extend: "pdf", className: "btn-dark"
    },
       {
      extend: "print", className: "btn-dark"   
    },
	{
	text: 'Update Table',
	action: function (e, dt, node, config){
		$('#myModal').modal('show');
		}
	}
      ],
    }],
	order: [[0, 'asc'], [1, 'asc'] ],	
	rowGroup: {
            dataSrc: [
			'Program',
			'Deliverable'
			],
            startRender: function (rows,group,level){
				var all;
            	if (level === 0) {
                    top = group;
                    all = group;
                } else if (level === 1) {
                    parent = top + group; 
                    all = parent; 
         ...