• Tyler Dahle 12
  • 5 Points
  • Member since 2020

  • Chatter
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
  • 1
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?
    <lightning-datatable data={tblData}
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));