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>')
        });
      });
    },
  });

  $.fn.dataTable.tables({
    visible: true,
    api: true
  }).columns.adjust();
});