JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding: 20px; display: table; margin: auto">
<input type="text" id="search" placeholder="Type to search"></div>
<table class="sortable" id="anyid" cellpadding="0" cellspacing="0" align="center">
<thead>
<tr>
	<th id="headveg">Name</th>
	<th id="headveg" class="unsortable">Image</th>
	<th id="headveg">Carbs</th>
	<th id="headveg">Fiber</th>
	<th id="headveg">Net Carbs</th>
</tr>
</thead>
<tbody>
<tr id='rowveg'><td id='nameveg'>Alfalfa seeds, sprouted</td><td id='imgveg'><img src="http://www.tasteaholics.com/wp-content/uploads/2016/01/alfalfa-sprouts.jpg" /></td><td id='totcarbveg'>2.1</td><td id='fiberveg'>1.9</td><td id='netcarbveg'>0.2</td></tr>
<tr id='rowveg'><td id='nameveg'>Amaranth leaves</td><td id='imgveg'><img src="http://www.tasteaholics.com/wp-content/uploads/2016/01/amaranth-leaves.jpg" /></td><td id='totcarbveg'>4.02</td><td id='fiberveg'>0</td><td id='netcarbveg'>4.02</td></tr>
<tr id='rowveg'><td id='nameveg'>Arrowhead</td><td id='imgveg'><img src="http://www.tasteaholics.com/wp-content/uploads/2016/01/arrowhead-vegetable.jpg" /></td><td id='totcarbveg'>20.23</td><td id='fiberveg'>0</td><td id='netcarbveg'>20.23</td></tr>
<tr id='rowveg'><td id='nameveg'>Arrowroot</td><td id='imgveg'><img src="http://www.tasteaholics.com/wp-content/uploads/2016/01/arrowroot1.jpg" /></td><td id='totcarbveg'>13.39</td><td id='fiberveg'>1.3</td><td id='netcarbveg'>12.09</td></tr>
</tbody>
</table>

CSS

#headveg, #rowveg {
	padding: 15px;
}

#headveg {
	background-color: #8a8a8a;
	color: #fff;
}

#headveg a {
	text-decoration: none;
	color: #fff;
}

#nameveg, #totcarbveg, #fiberveg, #netcarbveg {
	text-align:center;
        vertical-align: middle;

}

a img {
	border: 0;
}
table.sortable {
	border-spacing: 0;
	border: 0px solid #000;
	border-collapse: collapse;
}
table.sortable th, table.sortable td {
	text-align: left;
	padding: 2px 4px 2px 4px;
	width: 100px;
	border-style: solid;
	border-color: #444;
}
table.sortable th {
	border-width: 0px 0px 1px 0px;
	background-color: #ccc;
}
table.sortable td {
	border-width: 0px 0px 1px 0px;
	border-color: #f1f1f1;
}
table.sortable tr.odd td {
	background-color: #fff;
}
table.sortable tr.even td {
	background-color: #fff;
}
table.sortable tr.sortbottom td {
	border-top: 1px solid #444;
	background-color: #ccc;
	font-weight: bold;
}

JavaScript

jQuery(document).ready(function(){

	// Search function

	var $rows = jQuery('#anyid tbody tr');
	jQuery('#search').keyup(function() {
		
		var val = '^(?=.*\\b' + jQuery.trim(jQuery(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
			reg = RegExp(val, 'i'),
			text;
		
		$rows.show().filter(function() {
			text = jQuery(this).text().replace(/\s+/g, ' ');
			return !reg.test(text);
		}).hide();
	});
});
	/* Change these values */
	var image_path = "http://www.tasteaholics.com/wp-content/uploads/2016/01/";
	var image_up = "arrow-up.gif";
	var image_down = "arrow-down.gif";
	var image_none = "arrow-none.gif";

	/* Don't change anything below this unless you know what you're doing */
	addEvent(window, "load", sortables_init);

	var SORT_COLUMN_INDEX;

	function sortables_init() {
		// Find all tables with class sortable and make them sortable
		if (!document.getElementsByTagName) return;
		tbls = document.getElementsByTagName("table");
		for (ti=0;ti<tbls.length;ti++) {
			thisTbl = tbls[ti];
			if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
				//initTable(thisTbl.id);
				ts_makeSortable(thisTbl);
				//sum_up(thisTbl);
			}
		}
	}

	function ts_makeSortable(table) {
		if (table.rows && table.rows.length > 0) {
			var firstRow = table.rows[0];
		}
		if (!firstRow) return;
		
		// We have a first row: assume it's the header, and make its contents clickable links
		for (var i=0;i<firstRow.cells.length;i++) {
			var cell = firstRow.cells[i];
			var txt = ts_getInnerText(cell);
			if (cell.className != "unsortable" && cell.className.indexOf("unsortable") == -1) {
				cell.innerHTML = '<a href="#" class="sortheader" onclick="ts_resortTable(this);return false;">'+txt+'<span class="sortarrow">&nbsp;&nbsp;<img src="'+ image_path + image_none + '" alt="&darr;"/></span></a>';
			}
		}
		alternate(table);
	}

	function ts_getInnerText(el) {
		if (typeof el == "string") return el;
		if (typeof el == "undefined") { return el };
		if...