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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.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"/>
<h5><strong>Weekly Reports</strong></h5>
        <div class ="container">
            <table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
                <thead class="thead-dark">
                    <tr>
                    <th>Week...

CSS

h5{
     text-align: center;
     font-size: 40px;
}
 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;
}
 div.dt-button-collection {
     position: static;
}

JavaScript

function loadData() {
$.ajax({
                url: fullUrl,
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
                    console.log(data);
                    if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                        var table = $('#myTable').DataTable();
                        table.rows.add(data.d.results).draw();
                    }
                }
            }); 
    }
    
    $(document).ready(function() {
        var collapsedGroups = {};
        var top = '';
        var parent = '';
    
        var table = $('#myTable').DataTable({
        "pageLength" : 50,
            "columns": [{
                    "data": "WeekOf",
                    visible: false
                },
                {
                    "data": "Team",
                    visible: false
                },
                {
                    "data": "MajorTasks"
                },
                {
                    "data": "Deliverables"
                },
                {
                    "data": "Actions"
                },
                {
                    "data": "Billable"
                },
                {
                    "data": "Non-Billable"
                },
                {
                    "data": "Upcoming"
                },
                {
                    "data": "Training"
                },
                {
                    "data": "ResourceRequest"
                },
                {
                    "data": "SupportRequest"
                }

            ],
    
            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...