[SalesForce] Lightning Web Component – Sort table columns

I'm trying to implement the sorting functionality on a lightning datatable in a lwc. The table display a list of Opportunity. But my problem is when I click on a column for sorting data, I am getting the following error

Here is the opportunityList.html:

<template>
      <lightning-datatable key-field="Id" 
                           data={opportunities} 
                           columns={columns}  
                           onsort={updateColumnSorting} 
                           sorted-by={sortedBy} 
                           sorted-direction={sortedDirection}>
      </lightning-datatable>

here is the opportunityList.js:

import { LightningElement ,wire,track} from 'lwc';
import getAllOpps from '@salesforce/apex/GetAllOpportunities.getAllOpps';

export default class OpportunityList extends LightningElement {

 @track columns = [
        {
            label: 'Opportunity name',
            fieldName: 'Name',
            type: 'text',
            sortable: true
        },
        {
            label: 'Stage Name',
            fieldName: 'StageName',
            type: 'text',
            sortable: true
        },
        {
            label: 'Close date',
            fieldName: 'CloseDate',
            type: 'date',
            sortable: true
        }

    ];

    @track error;
    @track opportunities = [];
    @track sortedBy;
    @track sortedDirection = 'asc';

    @wire(getAllOpps)
    wiredOpps({error,data}) {
        if (data) {
            this.opportunities = data;
        } else if (error) {
            this.error = error;
        }
    }

    sortData(fieldName, sortDirection){
        var data = this.opportunities;
        //function to return the value stored in the field
        var key =(a) => a[fieldName]; 
        var reverse = sortDirection === 'asc' ? 1: -1;
        data.sort((a,b) => {
            let valueA = key(a) ? key(a).toLowerCase() : '';
            let valueB = key(b) ? key(b).toLowerCase() : '';
            return reverse * ((valueA > valueB) - (valueB > valueA));
        });

        //set sorted data to opportunities attribute
        this.opportunities = data;
    }

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

}

Please, can someone tell me what's wrong in the sortData method?

PS: When I comment this following part of the sortData method

/*data.sort((a,b) => {
    let valueA = key(a) ? key(a).toLowerCase() : '';
    let valueB = key(b) ? key(b).toLowerCase() : '';
    return reverse * ((valueA > valueB) - (valueB > valueA));
});*/

I don't get an error when I'm clicking on a column.

Thanks in advance.

Best Answer

There is problem at below line in sortData function.

 var data = this.opportunities;

If you write log for this.opportunities.You will get empty array.

Change above mentioned line with below one will resolve the issue.

var data = JSON.parse(JSON.stringify(this.opportunities));

So sortData function will be

sortData(fieldName, sortDirection){
        var data = JSON.parse(JSON.stringify(this.opportunities));
        //function to return the value stored in the field
        var key =(a) => a[fieldName]; 
        var reverse = sortDirection === 'asc' ? 1: -1;
        data.sort((a,b) => {
            let valueA = key(a) ? key(a).toLowerCase() : '';
            let valueB = key(b) ? key(b).toLowerCase() : '';
            return reverse * ((valueA > valueB) - (valueB > valueA));
        });

        //set sorted data to opportunities attribute
        this.opportunities = data;
    }

Related Solutions

[SalesForce] Lightning Web Component for table rows and cells

Building on the answer provided already by @sfdcfox, this following seems to be working for me and allows me to componentize the entire row (much easier to emit events this way).

parent.html

<table class="slds-table slds-table_bordered slds-border_left slds-border_right">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">
        <div class="slds-truncate" title="Name">Name</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Some Custom Column">Some Custom Column</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <template for:each={iterableDataSet} for:item="row">
      <c-child-row row={row}>
      </c-child-row>
    </template>
  </tbody>
</table>

childRow.html

<template>
  <!-- taken straight from SLDS -->
  <th data-label="Name" scope="row">
    <div class="slds-truncate" title={row.Name}>{row.Name}</div>
  </th>
  <td data-label="Some Custom Column">
    <div class="slds-truncate">
      <lightning-input
        data-id={row.Id}
        type="number"
        variant="label-hidden"
        name="inputForDataField"
        onchange={handleOnChange}
        value={row.Data_Field__c}>
      </lightning-input>
    </div>
  </td>
  <!-- more tds .... -->
</template>

And the critical piece on childRow.css

:host {
  display: table-row;
}

[SalesForce] LWC (Lightning Web Component) Data-Table Header Level Actions

handleHeaderAction(event) method should have the following code. Note the code change inside the IF block.

handleHeaderAction(event) {
    const actionName = event.detail.action.name;
    const colName = event.detail.columnDefinition.fieldName;
    const columns = this.columns;
    const activeFilter = this.activeFilter;    
    if(actionName !== activeFilter){
        columns.map((col) => {
            if(col.fieldName === colName){
                var actions = col.actions;
                actions.forEach((action) => {
                    action.checked = action.name === actionName;
                });
            }
        });    
        this.activeFilter = actionName;
        this.updateActivity(colName);
        this.columns = columns;
    }
}

updateActivity method should be like this. Note the input parameter and the code change inside the IF block. Also, you will need to improve upon this code to handle scenarios when the user clicks on the header and filters to different values. This code will handle the filter scenario only once (i.e., If user selects the filter Call or Email, the datatable will be filtered. However, if the user switches back to All filter or any other filter without page refresh, no rows will be displayed)

updateActivity(columnName){
    const rows = this.activityList;
    const filter = this.activeFilter;
    let filteredRows = rows;
    if(filter !== 'all'){
        filteredRows = rows.filter((row) => {
            if(row[columnName] !== '' && row[columnName] !== undefined){
                return row[columnName].toUpperCase() === filter.toUpperCase();
            }                
        });            
    }
    this.activityList= filteredRows;  
}

Observations: Looking at the code and the JS console log, I see few things done incorrectly in your JS code.

In the handleHeaderAction(event) method, the following line of code is not fetching the column index value. In the console log, the value shows up as -1 (implies that the column on which user took action is not found).

var idx = columns.indexOf(col);

The indexOf method works for single dimensional arrays, but in this code we are working on a multi-dimensional array. All of the code after this line would either fail or not produce the required response.
In the updateActivity method, the following piece of code logic doesn't make sense to me. Not sure if you just wrote this as a sample.

if(activeFilter.includes('email')){ return activeFilter === 'Email' } else return activeFilter === 'Calls'

The variable activeFilter is not declared in this method and instead it should have been the variable filter. I suppose this code was written with reference from the LWC component reference. Not all the code from this reference would work as-is and is given only as a sample.

Keep a check on the following while writing LWC code. While these points seem trivial, bear in mind that the lightning platform minifies and converts your code into a slightly different structure before rendering to the browser. A missing semi-colon or a paranthesis, you change the code logic causing errors.

If you use functional javascript like map, forEach etc., do not omit ';' at the end. For example,

SomeArray.forEach((element) => { code block });
If you have IF-ELSE statement with only one like under IF or ELSE block, ensure that you use curly braces for that like and also, do not omit ';'' on that line. For example,

if(condition){ return true } else return false

should be written as

if(condition){ return true; } else{ return false; }

Best Answer

Related Solutions

[SalesForce] Lightning Web Component for table rows and cells

[SalesForce] LWC (Lightning Web Component) Data-Table Header Level Actions

Related Topic