JSFiddle - React, Tailwind, and code Playground

by Jimmy Genslinger

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/fixedheader/3.1.4/css/fixedHeader.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/scroller/1.5.0/css/scroller.bootstrap4.min.css" rel="stylesheet" type="text/css" />

<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.5/js/dataTables.fixedColumns.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.datatables.net/scroller/1.5.0/js/dataTables.scroller.min.js"></script>

<div class="container-fluid">
  <table id="tblArtifact" class="table table-striped mt-4" style="font-size: x-small">
    <thead class="alert-info">
      <tr class="text-center">
        <th rowspan="2">Achievement Area</th>
        <th rowspan="2">Location</th>
        <th rowspan="2" class="sum">Current Enrollment</th>
        <th colspan="3" class="alert-primary heavyBorderLeft">Students W/1+ Artifacts</th>
        <th colspan="2" class="heavyBorderLeft">Effective Communicator</th>
       ...

CSS

.heavyBorderLeft {
  border-left: 2px solid black;
}

JavaScript

$(document).ready(function() {
  var dt = $('#tblArtifact').DataTable({
    paging: false,
    scrollY: '46vh',
    scrollX: true,
    scrollCollapse: true,
    dom: 'firt',
    fixedColumns: {
      leftColumns: 3
    },
    initComplete: function() {
      this.api().columns([0]).every(function() {
        var column = this;
        var select = $('<select><option value="">Show All</option></select>')
          .appendTo($(column.header()))
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>')
        });
      });
    },
    footerCallback: function(row, data, start, end, display) {
      var api = this.api(),
        data;

      // Remove the formatting to get integer data for summation
      var intVal = function(i) {
        return typeof i === 'string' ?
          i.replace(/[\$,]/g, '') * 1 :
          typeof i === 'number' ?
          i : 0;
      };

      api.columns('.sum', {
        page: 'current'
      }).every(function() {
        var sum = this
          .data()
          .reduce(function(a, b) {
            return intVal(a) + intVal(b);
          }, 0);

        this.footer().innerHTML = sum;

        //Cheesy hack to get the % of students with at least one artifact
        if (this.header().innerHTML == "Current Enrollment") {
          ttlEnr = sum;
        }

        if ((this.header().innerHTML == "# Students") && (ttlStuds == 0)) {
          ttlStuds = sum;
        }
      });

      api.columns('.pctTtl', {
        page: 'current'
      }).every(function() {
        var pct = ttlStuds / ttlEnr * 100;

        this.footer().innerHTML = pct + "%";
      });
    }
  });

  $.fn.dataTable.tables({
    visible:...