JSFiddle - React, Tailwind, and code Playground

by Jimmy Genslinger

HTML

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.22/fc-3.3.1/fh-3.1.7/r-2.2.6/rg-1.1.2/sc-2.0.3/datatables.min.css" />

<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.22/fc-3.3.1/fh-3.1.7/r-2.2.6/rg-1.1.2/sc-2.0.3/datatables.min.js"></script>

<div class="table-responsive">
  <table id="tblDetail" class="table table-sm" style="background-color: antiquewhite;" width="100%">
    <thead style="font-size: x-small">
      <tr>
        <th colspan="5" class="text-center text-strong text-white bg-secondary">School Info</th>
        <th colspan="10" class="text-center text-strong text-white bg-info">Transition Readiness Indicators</th>
        <th colspan="5" class="text-center text-strong bg-warning">Work Based Learning</th>
        <th colspan="4" class="text-center text-strong text-white bg-primary">Dual Credit</th>
        <th colspan="4" class="text-center text-strong text-white bg-success">EOP/Industry Certifications Earned</th>
      </tr>
      <tr>
        <th class="bgGhostWhite">School</th>
        <th class="bgGhostWhite">School Nbr</th>
        <th class="text-center bgGhostWhite" style="vertical-align: bottom">Date</th>
        <th class="bgGhostWhite">Total Seniors</th>
        <th class="bgGhostWhite">Total Concentrators</th>
        <th># Academic</th>
        <th>% Academic</th>
        <th># Career</th>
        <th>% Career</th>
        <th># Both</th>
        <th>% Both</th>
        <th>Total Ready</th>
        <th>% Ready</th>
        <th>Not Ready</th>
        <th>% Not Ready</th>
        <th class="bgGhostWhite">UPS STW</th>
        <th class="bgGhostWhite">Registered Apprenticeships</th>
        <th class="bgGhostWhite">Co-Op/Internships</th>
        <th...

JavaScript

var archivesExpanded = [];
var dd = [{
  "__type": "DMC.CCR.WebServices.schoolDashboard",
  "schoolID": "11",
  "schoolNumber": "018",
  "schoolName": "Atherton High",
  "aolSchool": "4",
  "archiveDate": "11/6/2020 12:00:00 AM",
  "ttlSeniors": "315",
  "ttlConcentrators": "59",
  "academicReady_ttl": "195",
  "academicReady_pct": "61.9",
  "careerReady_ttl": "0",
  "careerReady_pct": "0.0",
  "bothReady_ttl": "1",
  "bothReady_pct": "0.3",
  "totalReady_ttl": "196",
  "totalReady_pct": "62.2",
  "notReady_ttl": "119",
  "notReady_pct": "37.8",
  "upsSTW": "0",
  "registeredApprenticeships": "0",
  "coop": "0",
  "experiencedBasedWork": "97",
  "workBasedLearning_ttl": "97",
  "academicDCReady": "0",
  "academicDCPrep": "9",
  "careerDCReady": "0",
  "careerDCPrep": "0",
  "icEarned_ttl": "1",
  "icEarned_pct": "0.3",
  "eopEarned_ttl": "0",
  "eopEarned_pct": "0.0",
  "seq": "1"
}, {
  "__type": "DMC.CCR.WebServices.schoolDashboard",
  "schoolID": "11",
  "schoolNumber": "018",
  "schoolName": "Atherton High",
  "aolSchool": "4",
  "archiveDate": "11/1/2020 12:00:00 AM",
  "ttlSeniors": "315",
  "ttlConcentrators": "59",
  "academicReady_ttl": "195",
  "academicReady_pct": "61.9",
  "careerReady_ttl": "0",
  "careerReady_pct": "0.0",
  "bothReady_ttl": "1",
  "bothReady_pct": "0.3",
  "totalReady_ttl": "196",
  "totalReady_pct": "62.2",
  "notReady_ttl": "119",
  "notReady_pct": "37.8",
  "upsSTW": "0",
  "registeredApprenticeships": "0",
  "coop": "0",
  "experiencedBasedWork": "98",
  "workBasedLearning_ttl": "98",
  "academicDCReady": "0",
  "academicDCPrep": "9",
  "careerDCReady": "0",
  "careerDCPrep": "0",
  "icEarned_ttl": "1",
  "icEarned_pct": "0.3",
  "eopEarned_ttl": "0",
  "eopEarned_pct": "0.0",
  "seq": "2"
}, {
  "__type": "DMC.CCR.WebServices.schoolDashboard",
  "schoolID": "80",
  "schoolNumber": "105",
  "schoolName": "Ballard High",
  "aolSchool": "4",
  "archiveDate": "11/6/2020 12:00:00 AM",
  "ttlSeniors": "442",
  "ttlConcentrators":...