JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr><td>Potato</td><td>Tomato</td><td>Apple</td></tr>
<tr><td>20gr</td><td>10gr</td><td>40gr</td></tr>
</table><button>sort</button>

CSS

table { display: table; }
td { padding: 4px; border: 3px solid green; }

JavaScript

$('button').click(function(){

    var rows = $('tr');
    
    rows.eq(0).find('td').sort(function(a, b){
        
        return $.text([a]) > $.text([b]) ? 1: -1;
        
    }).each(function(newIndex){
        
        var originalIndex = $(this).index();
        
        rows.each(function(){
            var td = $(this).find('td');
            if (originalIndex !== newIndex)
                td.eq(originalIndex).insertAfter(td.eq(newIndex));
        });
        
    });
    
});