JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <th class="sortup">A</th>
        <th>B</th>
        <th>C</th>
    </thead>
    <tr>
        <td></td>
        <td></td>
        <td></td>        
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>        
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>        
    </tr>    
</table>

CSS

th { cursor: pointer; border: 1px dotted gray;}
td { border: 1px solid lightgray; height: 30px; width: 100px; }
th.sortup { 
    color: red; 
    border: 1px dotted red; 
    /* Can I draw an arrow on righthand side of cell? */
    
}

JavaScript

$('th').click(function() {
    $('.sortup').removeClass('sortup');
    $(this).addClass('sortup');
});