JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>Morning Report</strong></h5>
        <div class ="container">
            <table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
              ...

CSS

#dNotes
{
    height:100px;
	text-align: float;
}

#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;
            }
            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;
      ...

JavaScript

var dataSet =[
["IT", "Name 1","Locations Here","03/14/2021","03/15/2021","P", "03/16/2021","P","03/17/2021","P","03/18/2021", "P", "03/19/2021", "P"],
["IT", "Name 2","Locations Here","03/14/2021","03/15/2021","P", "03/16/2021","P","03/17/2021","P","03/18/2021", "P", "03/19/2021", "P"],
["HR", "Name 7","Locations Here","03/14/2021","03/15/2021","P", "03/16/2021","P","03/17/2021","P","03/18/2021", "P", "03/19/2021", "P"],
["HR", "Name 4","Locations Here","03/14/2021","03/15/2021","P", "03/16/2021","P","03/17/2021","P","03/18/2021", "P", "03/19/2021", "P"]];
    
    $(document).ready(function() {
        var collapsedGroups = {};
        var top = '';
        var parent = '';
    
        var table = $('#myTable').DataTable({
        data : dataSet,
        "pageLength" : 10,
            "columns": [
                {title : "Department",
              visible: false},
                {title : "User.Title",
                visible: false },
                {title : "Locations"},
                {title: "Sunday", 
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
                },
                { title: "Monday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {title: "MondayStatus",
                visible: false},
                { title: "Tuesday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {title: "TuesdayStatus",
                visible: false},
           ...