JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabletitle">
  <span id="tspan">Allegan Service Center Exits - Adult Employment</span>
  <table id="tt">
    <tr id="trh">
      <th class="tdh" id="tdh1" onclick="javascript:sorter(this, 't', 0, 0, false)">Last Name</th>
      <th class="tdh" id="tdh2" onclick="javascript:sorter(this, 't', 1, 0, false)">First Name</th>
      <th class="tdh" id="tdh3" onclick="javascript:sorter(this, 't', 2, 0, false)">Customer ID</th>
      <th class="tdh" id="tdh4" onclick="javascript:sorter(this, 't', 3, 0, false)">Region Code</th>
      <th class="tdh" id="tdh5" onclick="javascript:sorter(this, 't', 4, 0, true)">Exit Date</th>
      <th class="tdh" id="tdh6" onclick="javascript:sorter(this, 't', 5, 0, false)">Employed</th>
    </tr>
  </table>
</div>
<div id="table">
  <table id="t">
    <tr class="trc">
      <td class="tdc">1</td>
      <td class="tdc">DONALD</td>
      <td class="tdc">ANTDO0213</td>
      <td class="tdc">AL101</td>
      <td class="tdc">07-09-2015</td>
      <td class="tdc">Yes</td>
    </tr>
    <tr class="trc">
      <td class="tdc">2</td>
      <td class="tdc">HENRY</td>
      <td class="tdc">RABHE0824</td>
      <td class="tdc">AL101</td>
      <td class="tdc">07-09-2015</td>
      <td class="tdc">Yes</td>
    </tr>
    <tr class="trc">
      <td class="tdc">3</td>
      <td class="tdc">CAROL</td>
      <td class="tdc">BORCA0926</td>
      <td class="tdc">AL101</td>
      <td class="tdc">09-09-2015</td>
      <td class="tdc">Yes</td>
    </tr>
    <tr class="trc">
      <td class="tdc">4</td>
      <td class="tdc">AUTIE</td>
      <td class="tdc">EARAU0716</td>
      <td class="tdc">AL101</td>
      <td class="tdc">11-06-2015</td>
      <td class="tdc">Yes</td>
    </tr>
    <tr class="trc">
      <td class="tdc">5</td>
      <td class="tdc">ANDREW</td>
      <td class="tdc">SMIAN0808</td>
      <td class="tdc">AL101</td>
      <td class="tdc">12-15-2015</td>
      <td class="tdc">Yes</td>
    </tr>
    <tr class="trc">
      <td...

CSS

#tspan {
	font-size: 32px;
	font-weight: bolder;
	margin-bottom: 10px;
}

#tabletitle {
	display: block;
	margin-right: 8%;
	margin-left: 8%;
	height: 63px;
/*	background-color: green;*/
}

#table {
	display: block;
	margin-right: 8%;
	margin-left: 8%;
	height: calc(100% - 85px);
	overflow: auto;
	overflow-x: hidden;
/*	background-color: blue;*/
}

#t, #tt {
	width: 100%;
}

#tt, #t {
	border-collapse: collapse;
	border-bottom: 2px solid black;
	table-layout: fixed;
}

.tdh {
	font-size: 18px;
	font-weight: bold;
}

.trc {
	border-collapse: collapse;
	border-bottom: 1px solid black;
	font-size: 14px;
}

#trh {
	font-weight: bolder;
	background-color: #edf2f8;
}

td {
	padding: 3px 7px 3px 7px;
}

/*#t .trc:nth-child(odd) {
    background-color: #B1B9C5;
}*/

#t td:nth-child(4), #t td:nth-child(5), #t td:nth-child(6) {
	text-align: center;
}

#tt th:nth-child(1), #tt th:nth-child(2), #tt th:nth-child(3), #t td:nth-child(1), #t td:nth-child(2), #t td:nth-child(3) {
	text-align: left;
}

.tdc {
	text-align: left;
}

.tdh {
	cursor: pointer;
}

/*table thead {
  position: fixed;
}*/

.trc:hover {
    background: #c8cdd6;

}

JavaScript

var sorter = function(td, id, column, isDate) {

    var tbl = document.getElementById(id);
    var rows = Array.prototype.slice.call(tbl.rows, 0);

    var order = td.getAttribute("order") == "asc" ? "desc" : "asc";
    td.setAttribute("order", order);

    rows = rows.sort(function(a, b) {

      var valA = a.cells[column].innerText;
      var valB = b.cells[column].innerText;

      var compA = (isDate) ? new Date(valA) : valA;
      var compB = (isDate) ? new Date(valB) : valB;

      if (order == "asc") {
        if (compA < compB) return -1;
        if (compA > compB) return 1;
      }

      if (order == "desc") {
        if (compA > compB) return -1;
        if (compA < compB) return 1;
      }

      return 0;

    });

    for (i = 0; i < rows.length; i++) {
      tbl.appendChild(rows[i]);
    }

  }