JSFiddle - React, Tailwind, and code Playground
HTML
<table class="ResultsTable">
<thead class="header">
<tr>
<td class="rankColumn">Rank</td>
<td class="nameColumn">Name</td>
<td class="ageColumn">Age</td>
</tr>
</thead>
<tbody id="resultsTableBody"></tbody>
</table>
JavaScript
function insert({Status, Rank, Name, Age}) {
const html = `<tr data-rank="${Rank}">
<td class="rankColumn">${Rank}</td>
<td class="nameColumn">${Name}</td>
<td class="ageColumn">${Age}</td>
</tr>`;
$(`#resultsTableBody`).append(html);
$(`#resultsTableBody > tr`)
.sort((a, b) => $(a).attr('data-rank') - $(b).attr('data-rank')).appendTo('#resultsTableBody');
}
insert({Rank: 3, Name: 'John Doe', Age: 30});
insert({Rank: 2, Name: 'John Doe', Age: 30});
insert({Rank: 1, Name: 'John Doe', Age: 30});
insert({Rank: 2, Name: 'John Doe', Age: 30});
insert({Rank: 3, Name: 'John Doe', Age: 30});