sortDirection is Not Updating in Sorting Event?

Question

I have built an LWC datatable and am trying to finalize the sorting direction for each column. The data in the table sorting correctly, but the sorting 'arrow' is not toggling when I click on a column. Below is my 'onHandleSort' function. I have confirmed with debug statements that this.sortDirection is toggling from 'asc' to 'desc' when I click on. column, however the event.detail is not updating. How can I make it so the event.detail is also updating with the new value?

    @track sortDirection;
    defaultSortDirection = 'asc';

    onHandleSort(event) {
        const { fieldName: newSortedBy, sortDirection: newSortDirection } = event.detail;
    
        console.log('Sorting event:', event.detail);
    
        // If a different column is clicked, use the default sort direction
        if (this.sortedBy !== newSortedBy) {
            console.log('Different column clicked. Resetting to default sort direction:', this.defaultSortDirection);
            this.sortDirection = this.defaultSortDirection;
            this.sortedBy = newSortedBy;
        } 
        if (this.sortedBy == newSortedBy) {
            // If the same column is clicked, toggle the sort direction
            console.log('Same column clicked. Toggling sort direction.');
            this.sortDirection = (this.sortDirection === 'asc') ? 'desc' : 'asc';
        }
    
        console.log('Sorted By:', this.sortedBy);
        console.log('Sort Direction:', this.sortDirection);
    
        this.tasks = this.sortData(this.sortedBy, this.sortDirection);
    }

Answer 1

Your second if statement is always true, because either the first if statement will set the sort direction to the new sort direction, or it will already be the new sort direction. However, you must not do this if you're using lightning-datatable. The event tells you what the new field and direction should be, not what they are now. Simply sort the data based on the incoming parameters, and don't forget to set those parameters on the lightning-datatable.

const { fieldName: sortedBy, sortDirection: sortedDirection } = event.detail;
this.sortedDirection = sortDirection;
this.sortedBy = sortedBy;
this.tasks = this.sortData(sortedBy, sortDirection);

This is even explicitly laid out in the documentation:

        // The method onsort event handler
        updateColumnSorting(event) {
            var fieldName = event.detail.fieldName;
            var sortDirection = event.detail.sortDirection;
            // assign the latest attribute with the sorted column fieldName and sorted direction
            this.sortedBy = fieldName;
            this.sortedDirection = sortDirection;
            this.data = this.sortData(fieldName, sortDirection);
       }

Make sure you bind both of these variables:

<lightning-datatable
  data={tasks}
  sorted-by={sortedBy}
  sorted-direction={sortedDirection}
  columns={taskColumns}
  onsort={onHandleSort}>
</lightning-datatable>