function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
ministe2003ministe2003 

lightning-datatable updating onsort but not rerendering

I have a lightning-datatable web component which is happily displaying data.  I have written an onsort function which is performing the sort correctly in the controller but is not rerendering the display of the table so nothing appears to change.

I know the rows are being sorted because the rows have view and edit actions and clicking these performs the action against the correctly sorted row, even if it doesn't match what's being displayed.  It's as if I need to manually trigger some kind of refresh to cause the data on the screen to be updated to match the data in the controller, but the data is @api decorated so it should be doing it automatically, as I understand it.

There's not much out there about lightning web components, wondered if someone on here could offer a suggestion?
 
<template>
    <lightning-datatable data={tblData}
                         columns={columns}
                         hide-checkbox-column={hideCheckboxColumn}
                         sorted-by={sortedBy}
                         sorted-direction={sortedDirection}
                         key-field={keyField}
                         onsort={updateColumnSorting}
                         onrowaction={handleRowAction}
    >
    </lightning-datatable>
</template>
import { LightningElement, api, track} from 'lwc';
import { CurrentPageReference, NavigationMixin } from 'lightning/navigation';

export default class DatatableSortableWeb extends NavigationMixin(LightningElement) {
    @api tblData = [];
    @api columns;
    @api hideCheckboxColumn;
    @api sortedBy;
    @api sortedDirection;
    @api keyField;

    /*
    If user clicks a column header, sort using event params
    */
    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.tblData = this.sortData(fieldName, sortDirection);
    }

    /*
    Sort table, ignoring case and treating empty cells as "zzz" so they come last when sorting ASC
    */
    sortData(fieldName, sortDirection) {
        var dataToSort = this.tblData;
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        dataToSort.sort(this.sortBy(fieldName, reverse));
        return dataToSort;
    }

    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x.hasOwnProperty(field) ? (typeof x[field] === 'string' ? x[field].toLowerCase() : x[field]) : 'zzz')} :
            function(x) {return x.hasOwnProperty(field) ? (typeof x[field] === 'string' ? x[field].toLowerCase() : x[field]) : 'zzz'};

        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    }


 
Max Prown 12Max Prown 12
@ministe2003 Did you ever find a solution to this issue?
ministe2003ministe2003
No I'm afraid not, I ended up just using aura components.  If you ever find a fix please share it on here!
chrisx01chrisx01
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);

this.data=JSON.parse(JSON.stringify(this.data));
//update date ui
}
SFDC newSFDC new
Even i came accross same problem but with few others problems too.
The worst one is -> error:Uncaught TypeError: 'set' on proxy: trap returned falsish for property '0'
I have searched for many sources but no solution.Finally i debugged at every point and got the result.
:)
Below link may help for Lightning data table in Lightning web component:
LWC LightningDataTable (https://github.com/Ansh1414/LWCLightning-data-table.git)
Dhanya NDhanya N
@ministe2003,
At line no. 29, replace line with this
var dataToSort = JSON.parse(JSON.stringify(this.tblData));

Thanks,
Dhanya
Tyler Dahle 12Tyler Dahle 12

@ministe2003

You cannot change variables specified with @api tag. You need to make a new collection with a @track tag, in connected callback, copy data from tblData to the new track array

this.clonedData = [...this.tblData]

You then need to reassign your sorted data to this.clonedData in sort. The track tag is what LWCs use to determine if a variable will trigger a rerender. api tags only rerender when a parent passes in new data to the child component with the api tag.