JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mytable">
  <thead>
    <tr><th>Names</th><th>222</th><th>333</th></tr>
  </thead>
  <tbody>
    <tr><td>Ball</td><td>asdfasfasdfall</td><td>zxghswfhBall</td></tr>
    <tr><td>Apple</td><td>werBtwertll</td><td>ktmBall</td></tr>
    <tr><td>Cat</td><td>jhkhjkBall</td><td>ennrBall</td></tr>
  </tbody>
</table>

CSS

table, th, td {
    border: 1px black solid;
}

JavaScript

function sortTable() {
    tbody = $('#mytable').find('tbody');
    
    tbody.find('tr').sort(function(a, b) {
        return $('td:first', b).text().localeCompare($('td:first', a).text());
    }).appendTo(tbody);
}

sortTable();