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"><a href="#" onclick='javascript:sorter("t", 0, 0, true)'>Last Name</a></th>
      <th class="tdh" id="tdh2"><a href="#" onclick='javascript:sorter("t", 0, 0, false)'>First Name</a></th>
      <th class="tdh" id="tdh3">Customer ID</th>
      <th class="tdh" id="tdh4">Region Code</th>
      <th class="tdh" id="tdh5">Exit Date</th>
      <th class="tdh" id="tdh6">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 class="tdc">6</td>
      <td class="tdc">ANITA</td>
      <td class="tdc">PEAAN0706</td>
      <td class="tdc">AL101</td>
      <td class="tdc">09-25-2015</td>
      <td class="tdc">Yes</td>
    </tr>
...

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(id, column, isDate) {
			  var tbl = document.getElementById(id);
			  var rows = Array.prototype.slice.call(tbl.rows, 0);

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

			    var dtA = (isDate) ? new Date(a.cells[column].innerHTML) : a.cells[column].innerHTML;
			    var dtB = (isDate) ? new Date(b.cells[column].innerHTML) : b.cells[column].innerHTML;

			    return dtA > dtB

			  });

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

			}