JSFiddle - React, Tailwind, and code Playground
HTML
<table border=1>
<tr style="font-weight:bold;">
<td>Begin Text</td>
<td>Begin Number</td>
<td>Sorted Text</td>
<td>Sorted Number</td>
</tr>
<tr>
<td id="r1c1"></td>
<td id="r1c2"></td>
<td id="r1c3"></td>
<td id="r1c4"></td>
</tr>
<tr>
<td id="r2c1"></td>
<td id="r2c2"></td>
<td id="r2c3"></td>
<td id="r2c4"></td>
</tr>
<tr>
<td id="r3c1"></td>
<td id="r3c2"></td>
<td id="r3c3"></td>
<td id="r3c4"></td>
</tr>
<tr>
<td id="r4c1"></td>
<td id="r4c2"></td>
<td id="r4c3"></td>
<td id="r4c4"></td>
</tr>
<tr>
<td id="r5c1"></td>
<td id="r5c2"></td>
<td id="r5c3"></td>
<td id="r5c4"></td>
</tr>
<tr>
<td id="r6c1"></td>
<td id="r6c2"></td>
<td id="r6c3"></td>
<td id="r6c4"></td>
</tr>
<tr>
<td id="r7c1"></td>
<td id="r7c2"></td>
<td id="r7c3"></td>
<td id="r7c4"></td>
</tr>
<tr>
<td id="r8c1"></td>
<td id="r8c2"></td>
<td id="r8c3"></td>
<td id="r8c4"></td>
</tr>
<tr>
<td><input type="button" onclick="testSort(1);" value="Sort"></td>
<td><input type="button" onclick="testSort(2);" value="Sort"></td>
</tr>
</table>
<script>
function testSort(orderCol) {
orderList = [orderCol];
dataArr = do2DArraySort(dataArr, orderList, 'desc');
for (x=1; x<=numRows; x++) {
document.getElementById('r' + x + 'c3').innerHTML = dataArr[x-1][1];
document.getElementById('r' + x + 'c4').innerHTML = dataArr[x-1][2];
}
}
function TwoDimensionalArray(iRows, iCols) {
var i;
var j;
var a = new Array(iRows);
for (i=0; i < iRows; i++) {
a[i] = new Array(iCols);
for (j=0; j < iCols; j++) {
...