JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<table id="tbl">
    <thead>
        <tr>
            <th>Rank</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input class="rank" name="rank" type="text" maxlen="1" size="1" value="1" /></td>
            <td>One</td>
        </tr>
        <tr>
            <td><input class="rank" name="rank" type="text" maxlen="1" size="1" value="2" /></td>
            <td>Two</td>
        </tr>
        <tr>
            <td><input class="rank" name="rank" type="text" maxlen="1" size="1" /></td>
            <td>Three</td>
        </tr>
        <tr>
            <td><input class="rank" name="rank" type="text" maxlen="1" size="1" /></td>
            <td>Four</td>
        </tr>
    </tbody>
</table>

CSS

#tbl td { border: thin solid black; }

JavaScript

jQuery.fn.dataTableExt.oSort['data-rank-asc'] = function(a, b){
		x = parseInt($(a).val());
		y = parseInt($(b).val() );
		return ((x < y) ? -1 : ((x > y) ? 1 : 0));
	};
	
	jQuery.fn.dataTableExt.oSort['data-rank-desc'] = function(a, b){
		x = parseInt($(a).val());
		y = parseInt($(b).val());
		return ((x < y) ? 1 : ((x > y) ? -1 : 0));
	};

	/* Create an array with the values of all the input boxes in a column */
	$.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn ) {
		return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
			return $('td:eq('+iColumn+') input', tr).val();
		} );
	}

	dTable = $("table#tbl").dataTable( {
		 "sDom": '<t>'
		, "aoColumns": [
			//{ "sSortDataType": "dom-text" },
			{"sType": "data-rank"}, 
			null
		]
	});