JSFiddle - React, Tailwind, and code Playground
HTML
<table id='table'>
<thead>
<tr>
<th class='sorter-inputs'>Col 1</th>
<th class='sorter-inputs'>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="control"><input type="text" class='money' value='25' form='f-1'></div>
</td>
<td>
<div class="control"><input type="text" value='test2' form='f-1'></div>
</td>
</tr>
<tr>
<td>
<div class="control"><input type="text" class='money' value='12' form='f-2'></div>
</td>
<td>
<div class="control"><input type="text" value='another 2' form='f-2'></div>
</td>
</tr>
<tr>
<td>
<div class="control"><input type="text" class='money' value='89' form='f-3'></div>
</td>
<td>
<div class="control"><input type="text" value='val-2' form='f-3'></div>
</td>
</tr>
</tbody>
<!-- These are part of the ajax functionality -->
<form action="" id="f-1"></form>
<form action="" id="f-2"></form>
<form action="" id="f-3"></form>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tablesorter@2.31.3/dist/js/jquery.tablesorter.min.js" integrity="sha256-dtGH1XcAyKopMui5x20KnPxuGuSx9Rs6piJB/4Oqu6I=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tablesorter@2.31.3/dist/js/parsers/parser-input-select.min.js" integrity="sha256-ugEATjydQqCNpuca1CGyiLVdN9N6uuouP2CkIL7Dr1k=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/jquery.inputmask@5.0.6/dist/jquery.inputmask.js" integrity="sha256-E9pFDiHlfB3afd46AyTqvmjcSv7VREgs5Y5e8TBECU0=" crossorigin="anonymous"></script>
JavaScript
$('#table').tablesorter()
$('.money').inputmask('currency', {
autoUnmask: true,
groupSeparator: ',',
allowMinus: true,
digits: 2,
placeholder: '_',
inputMode: 'decimal'
})
$('input[type=text]').on('change', function() {
$('#table').trigger('updateRows')
})