I have used html table to show list of records with custom pagination and sorting in lwc component. For sorting, I need to have up and down button along with text on headers.(Clicking on header text as well as icon should do sorting). Once I click on text or icon, along with sorting, the icon direction should get changed. Everything is working fine, but the lightning icon I have used , on click of that, it is not behaving correctly and not changing the icon to up or down. (While clicking on text or any other part it works perfectly).
Below is how one of header looks like :
Below is my html part. Onclick function 'sortRecs' just performs sorting on data and toggle the flag 'statusUp' and 'statusdown'.
<th scope="col" width="151px">
<div class="slds-cell-fixed" >
<a class="slds-th__action slds-text-link_reset " href="javascript:void(0);" tabindex="0" onclick={sortRecs} name="status">
Status
<lightning-icon class="iconcolor" icon-name="utility:up" alternative-text="up!" title="up" size="xx-small" if:true={statusUp} ></lightning-icon>
<lightning-icon class="iconcolor" icon-name="utility:down" alternative-text="down!" title="down" size="xx-small" if:true={statusDown}></lightning-icon>
</a>
</div>
</th>
Please let me know if anyone knows where I am going wrong.