JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>
<h3>List of Users</h3>
<table id="users" border="1">
	<thead>
	<tr class="ui-widget-header ">
		<th id="company_header"><span title="sort this column">Company</span></th>
		<th id="user_header"><span title="sort this column">User</span></th>
		<th id="email_header"><span title="sort this column">Email</span></th>
		<th id="type_header"><span title="sort this column">Type</span></th>
		<th>&nbsp;</th>
	</tr>
	</thead>
	
	<tbody id="users-list"><tr class="even"><td>ABC Technologies</td><td>bob</td><td>[email protected]</td><td>customer</td><td nowrap=""> <a href="m/user.php" data-identity="24" class="uLink">edit</a> | <a href="m/user.php" data-identity="24" class="dLink">delete</a> </td></tr><tr class="odd"><td>Elrinnger Inc</td><td>sue</td><td>[email protected]</td><td>customer</td><td nowrap=""> <a href="m/user.php" data-identity="27" class="uLink">edit</a> | <a href="m/user.php" data-identity="27" class="dLink">delete</a> </td></tr><tr class="even"><td>Lindel Drop Forge</td><td>barb</td><td>[email protected]</td><td>customer</td><td nowrap=""> <a href="m/user.php" data-identity="28" class="uLink">edit</a> | <a href="m/user.php" data-identity="28" class="dLink">delete</a> </td></tr><tr class="odd"><td>Nissan</td><td>A. Numberone</td><td></td><td>worker</td><td nowrap=""> <a href="m/user.php" data-identity="39" class="uLink">edit</a> | <a href="m/user.php" data-identity="39" class="dLink">delete</a> </td></tr><tr class="even"><td>Nissan</td><td>allen</td><td>[email protected]</td><td>customer</td><td nowrap=""> <a href="m/user.php" data-identity="26" class="uLink">edit</a> | <a href="m/user.php" data-identity="26" class="dLink">delete</a> </td></tr><tr class="odd"><td>Nissan</td><td>J. Cabrara</td><td></td><td>worker</td><td nowrap=""> <a href="m/user.php" data-identity="37" class="uLink">edit</a> | <a href="m/user.php" data-identity="37" class="dLink">delete</a> </td></tr><tr...

JavaScript

var user_table = $( '#users' );
	$('#company_header, #user_header, #email_header, #type_header')
		.wrapInner('<span title="sort this column"/>')
		.each(function(){
			
			var th = $(this),
				thIndex = th.index(),
				inverse = false;
			
			th.click(function(){
				
				user_table.find('td').filter(function(){
					
					return $(this).index() === thIndex;
					
				}).sortElements(function(a, b){
					
					return $.text([a]) > $.text([b]) ?
						inverse ? -1 : 1
						: inverse ? 1 : -1;
					
				}, function(){
					
					// parentNode is the element we want to move
					return this.parentNode; 
					
				});
				
				inverse = !inverse;
					
			});
				
		});