0

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 :

enter image description here

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.

Improve this question
1
  • 1
    The onclick handler is on the anchor (a) rather than the lightning-icon so clicking the actual icon has no event associated with it. I think you might need to have an onclick event handler on the lightning-icon's themselves. Perhaps if you add the handler to the parent div it will fire for all children, i'm not 100% sure without trying though
    – Phil Hawthorn
    Mar 11, 2022 at 13:05

1 Answer 1

Reset to default
1

Since the handler is on the a element, you can check which icon is currently presented and then use the opposite.

  sortRecs(event) {
    event.preventDefault();
    const icon = event.currentTarget.querySelector('lightning-icon');
    if(!icon) {
      this.statusUp = true;
    } else {
      this.statusUp = icon.title === 'down'
      this.statusDown = icon.title === 'up';
    }
  }

Demo.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .