JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">

	<h2>OSI Colors Export</h2>
	<p>Created for user: jwalker on July 29, 2013 2:46:15PM</p>
	
</div>

<div id="content">
	<div id="progress">
		<p id="progressText"></p>
		<div id="progressBar">
			<div id="progressTicker"></div>
		</div>
	</div>
</div>

	
<div class="osiTableBrowse">
	<div class="osiContent">
		<table id="sortable">
			<thead>
			<tr>
				<th class="osiHeadLeft" style="width: 220px;">Color</th>
				<th class="osiHeadLeft" style="width: 160px;">Manufacturer</th>
				<th class="osiHeadLeft" style="width: 100px;">Reference</th>
				<th class="osiHeadCenter" style="width: 90px;">Match</th>
				<th class="osiHeadCenter" style="width: 90px;">Must Coat</th>
				<th class="osiHeadCenter" style="width: 80px;">LRV</th>
			</tr>
			</thead>
			
			<tbody id="replace">
			<tr class="osiAltBG">
				<td class="osiTextLeft">Acadia Blue</td>
				<td class="osiTextLeft">Sherwin-Williams</td>
				<td class="osiTextLeft">S/W 3011</td>
				<td class="osiTextCenter"><span style="color: #6a5acd;" title="Sealant must be ordered from Woolf">000</span></td>
				<td class="osiTextCenter"><span style="color: #6a5acd;" title="Sealant must be ordered from Woolf">000</span></td>
				<td class="osiTextCenter">0</td>
			</tr>

			<tr class="osiAltBG">
				<td class="osiTextLeft">Accessible Beige</td>
				<td class="osiTextLeft">Sherwin-Williams</td>
				<td class="osiTextLeft">S/W 7036</td>
				<td class="osiTextCenter"><span title="Sealant is stocked locally by CSI">425</span></td>
				<td class="osiTextCenter"><span style="color: #6a5acd;" title="Sealant must be ordered from Woolf">000</span></td>
				<td class="osiTextCenter">0</td>
			</tr>

			<tr class="osiAltBG">
				<td class="osiTextLeft">Adaptive Shade</td>
				<td class="osiTextLeft">Sherwin-Williams</td>
				<td class="osiTextLeft">S/W 7053</td>
				<td class="osiTextCenter"><span title="Sealant is stocked locally by CSI">311</span></td>
				<td class="osiTextCenter"><span style="color: #6a5acd;"...

CSS

body, a, p, span, ul, ol, li, table, th, tr, td, div, h1, h2, h3, h4, h5, h6 {
		border: 0px;
		padding: 0px;
		margin: 0px;
		font-family: "Trebuchet MS", "Helvetica", Arial, sans-serif;
		font-size: 16px;
	}
	
	body {
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
		background: #d6d1b7;
	}
	
	h2 {
		font-size: 20px;
		text-align: center;
	}
	
	tr.osiAltBG:hover {
		background: #fffacd;
	}
	
	th {
		font-weight: bold;
		text-decoration: underline;
	}
	
	th:hover {
		background: #888;
	}
	
	th.osiHeadLeft {
		text-align: left;
	}
	
	th.osiHeadCenter {
		text-align: center;
	}
	
	td.osiTextLeft {
		text-align: left;
	}
	
	td.osiTextCenter {
		text-align: center;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
		margin-left: auto;
		margin-right: auto;
	}
	
	#header {
		width: 100%;
		color: #eee;
		background: #800;
		border: 2px #333 solid;
		padding 5px;
	}
	
	#content {
		padding: 5px;
		height: 40px;
	}
	
	#footer {
		width: 100%;
		padding: 5px;
		color: #eee;
		background: #800;
		border: 2px #333 solid;
	}
	
	p {
		text-align: center;
	}
	
	div#progress {
		width: 500px;
		margin-left: auto;
		margin-right: auto;
		display: none;
	}
	
	div#progressBar {
		width: 200px;
		height: 20px;
		background: #777;
		clear: both;
		margin-left: auto;
		margin-right: auto;
	}
	
	div#progressTicker {
		width: 30px;
		height: 20px;
		background: #080;
		left: 0px;
	}
	
	p#progressText {
		text-align: center:
		display: none;
	}

JavaScript

//Change this variable to match the "id" attribute of the
//table that is going to be operated on.
var tableID = "sortable";

/**
 * Attach click events to all the <th> elements in a table to 
 * call the tableSort() function. This function assumes that cells  
 * in the first row in a table are <th> headers tags and that cells
 * in the remaining rows are <td> data tags.
 *
 * @param table The table element to work with.
 * @return void
 */
function initHeaders(table) {
	//Get the table element
	table = document.getElementById(table);
	//Get the number of cells in the header row
	var l = table.rows[0].cells.length;
	//Loop through the header cells and attach the events
	for(var i = 0; i < l; i++) {
		if(table.rows[0].cells[i].addEventListener) { //For modern browsers
			table.rows[0].cells[i].addEventListener("click", tableSort, false);
		} else if(table.rows[0].cells[i].attachEvent) { //IE specific method
			table.rows[0].cells[i].attachEvent("onclick", tableSort);
		}
	}
}


function tableSort(e) {	

	var runs = 0;
	var pix = 0;
	var ndx = 0;
	var dir = "right";
	var interval = false;
	
	//Get the element from the click event that was passed.
	if(e.currentTarget) { //For modern browsers
		e = e.currentTarget;
	} else if(window.event.srcElement) { //IE specific method
		e = window.event.srcElement;
	} else {
		console.log("Unable to determine source event. Terminating....");
		return false;
	}
	
	//Get the index of the cell, will be needed later
	ndx = e.cellIndex;
	
	//Toggle between "asc" and "desc" depending on element's id attribute
	if(e.id == "asc") {
		e.id = "desc";
	} else {
		e.id = "asc";
	}
	
	//Move up from the <th> that was clicked and find the parent table element.
	var parent = e.parentElement;
	var s = parent.tagName;
	while(s.toLowerCase() != "table") {
		parent = parent.parentElement;
		s = parent.tagName;
	}
	
	//Get the rows to operate on as an array
	var rows = document.getElementById("replace").rows;
	var a = new Array();
	for(i = 0; i <...