JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<table class="grid" id="userList">
			<thead>
				<tr class="grid-header">
                    <th id="firstNameHeader">First Name<div></div></th>
                    <th id="lastNameHeader">Last Name<div></div></th>
                    <th id="companyHeader">Company<div></div></th>
				</tr>
			</thead>
			<tbody>
					<tr>
						<td>Joe</td>
						<td>Blow</td>
						<td></td>
					</tr>
					<tr>
						<td>Shammy</td>
						<td>Sosa</td>
						<td>Cubs</td>
					</tr>
					<tr>
						<td>Brad</td>
						<td>Tate</td>
						<td>ICA</td>
					</tr>
					<tr>
						<td>Lebron</td>
						<td>James</td>
						<td>Heat</td>
					</tr>
					<tr>
						<td>Robert</td>
						<td>Griffin III</td>
						<td>Redskins</td>
					</tr>
			</tbody>
		</table>

CSS

td, th { border: 1px solid #111; padding: 6px; }
th { font-weight: 700; }
#userList th:hover {
	 cursor: pointer
}
#userList th div {
/* 	 float: right; 
	 clear: none; 
	 width: 16px; */
}
#userList {
    width: 600px;
}
}

JavaScript

var table = $('#userList');

	$('#firstNameHeader, #lastNameHeader, #companyHeader')
        .each(function () {

        	var th = $(this),
                thIndex = th.index(),
                inverse = false;

        	th.click(function () {
                setIcon(this);
                
        		table.find('td').filter(function () {

        			return $(this).index() === thIndex;

        		}).sortElements(function (a, b) {
                    
        			return $.text([a]).toLowerCase() > $.text([b]).toLowerCase() ?
                        inverse ? -1 : 1
                        : inverse ? 1 : -1;

        		}, function () {

        			// parentNode is the element we want to move
        			return this.parentNode;

        		});

        		inverse = !inverse;
        	});

        });

function setIcon(element, inverse) {
		var iconSpan = $(element).find('div');
        
		if (inverse == false) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon icon-arrow-up');
		} else {
			$(iconSpan).removeClass();
			$(iconSpan).addClass('icon icon-arrow-down');
		}
        $(element).siblings().find('div').removeClass();
	}