JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/af-2.3.7/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/b-print-1.7.1/date-1.1.0/fc-3.3.3/fh-3.1.9/r-2.2.9/sc-2.0.4/sb-1.1.0/sp-1.3.0/sl-1.3.3/datatables.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/af-2.3.7/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/b-print-1.7.1/date-1.1.0/fc-3.3.3/fh-3.1.9/r-2.2.9/sc-2.0.4/sb-1.1.0/sp-1.3.0/sl-1.3.3/datatables.min.css" />

    <div id="mainDiv" class="row">
        <div class="table-responsive ml-5">
            <table id="tblCCR" class="table table-sm mx-auto">
                <thead>
                    <tr class="text-center">
                        <th rowspan="2" colspan="3" class="lightGreyFillBlackFont" style="border-bottom: 1px solid black"></th>
                        <th rowspan="2" colspan="2" class="tanFillBlackFont" style="border-bottom: 1px solid black">English Learners</th>
                        <th colspan="17" class="lightGreyFillBlackFont" style="border-bottom: 1px solid black">
                            <h3>ACADEMIC Ready (Need 1 from both...

CSS

body {
  font-family: Calibri;
}

th.noFill {
  background-color: white;
  padding: 2px;
}

th.grayFillWhiteFont {
  color: white;
  font-size: 12px;
  background-color: #aeaaaa;
  padding: 2px;
  border: 1px solid black;
}

th.grayFillYellowFont {
  color: yellow;
  font-size: 20px;
  font-weight: bold;
  background-color: #aeaaaa;
  padding: 2px;
  border: 1px solid black;
}

th.grayFillRedFont {
  color: red;
  font-size: 20px;
  font-weight: bold;
  background-color: #aeaaaa;
  padding: 2px;
  border: 1px solid black;
}

th.blueFillWhiteFont {
  color: white;
  font-size: 12px;
  background-color: #2f75b5;
  padding: 2px;
  border: 1px solid black;
}

th.lightYellowFillBlackFont {
  color: black;
  background-color: lightyellow;
  font-size: 12px;
  padding: 2px;
  border: 1px solid black;
}

th.lightBlueFillBlackFont {
  color: royalblue;
  background-color: lightblue;
  font-size: 12px;
  padding: 2px;
  border: 1px solid black;
}

th.lightSalmonFillBlackFont {
  color: whitesmoke;
  background-color: darksalmon;
  font-size: 12px;
  padding: 2px;
  border: 1px solid black;
}

th.lightGreyFillBlackFont {
  color: black;
  background-color: lightgrey;
  font-size: 12px;
  padding: 2px;
  border: 1px solid black;
  border-bottom: 1px solid black;
}

th.tanFillBlackFont {
  color: black;
  background-color: navajowhite;
  font-size: 12px;
  padding: 2px;
  border: 1px solid black;
}

th.GreenFillWhiteFont {
  color: whitesmoke;
  background-color: green;
  font-size: 12px;
  padding: 2px;
  border: 1px solid black;
}

th.GoldFillBlackFont {
  color: black;
  background-color: gold;
  font-size: 12px;
  padding: 2px;
  border: 1px solid black;
  font-style: italic;
}

th.darkBlueFillWhiteFont {
  color: whitesmoke;
  background-color: cornflowerblue;
  font-size: 12px;
  padding: 2px;
  border: 1px solid black;
}

th.darkKhakiFillBlackFont {
  background-color: darkkhaki;
  font-size: 12px;
  padding: 2px;
  border: 1px solid black;
}

td.detailNormal {
 ...

JavaScript

var locData = [];

locData.push({
  "schoolYear": "2021",
  "schoolID": "11",
  "school": "Atherton High",
  "schoolNbr": "018",
  "principal": null,
  "ccrTeam": null,
  "graduates": "310",
  "elServices": "1",
  "elProficient": "0",
  "actMathReady": "200",
  "kyoteAlgebraReady": "0",
  "kyoteCollegeMathReady": "0",
  "mathScienceDCPrep": "3",
  "mathScienceDCReady": "22",
  "mathScienceAICPrep": "37",
  "mathScienceAICReady": "0",
  "mathSciencePrep": "205",
  "mathScienceReady": "202",
  "actEnglishReady": "224",
  "actReadingReady": "221",
  "kyoteEnglishReady": "0",
  "kyoteReadingReady": "0",
  "humanitiesDCPrep": "1",
  "humanitiesDCReady": "8",
  "humanitiesAICPrep": "29",
  "humanitiesAICReady": "143",
  "humanitiesPrep": "243",
  "humanitiesReady": "241",
  "collegePrep": "200",
  "collegeReadyOnly": "198",
  "collegeReadyOnlyPct": null,
  "apprenticeship": "0",
  "careerDCPrep": "0",
  "careerDCReady": "0",
  "certKossaReady": null,
  "certKossaReadyPct": null,
  "kossaReady": "18",
  "kossaReadyPct": null,
  "certReady": "17",
  "certReadyBonus": "3.50",
  "certReadyPct": null,
  "ttlCertBonusStuds": "14",
  "careerPrep": "37",
  "careerReadyOnly": "35",
  "careerReadyOnlyPct": null,
  "tarMathReady": "1",
  "tarReadingReady": "0",
  "tarScienceReady": "0",
  "tarReady": "0",
  "cwecReady": "0",
  "esarReady": "0",
  "aaCareerReady": "0",
  "aaReady": "0",
  "bonusReadyOnly": null,
  "bonusReadyOnlyPct": null,
  "totalCCR": "207",
  "pctCCR": "66.6%",
  "pctCCRBonus": "67.7%",
  "interventionStudents": null,
  "interventionStudentsPct": null,
  "interventionStudentsPrep": null
}, {
  "schoolYear": "2021",
  "schoolID": "80",
  "school": "Ballard High",
  "schoolNbr": "105",
  "principal": null,
  "ccrTeam": null,
  "graduates": "431",
  "elServices": "4",
  "elProficient": "0",
  "actMathReady": "243",
  "kyoteAlgebraReady": "15",
  "kyoteCollegeMathReady": "5",
  "mathScienceDCPrep": "36",
  "mathScienceDCReady": "97",
  "mathScienceAICPrep": "92",
...