You need to sign in to do that
Don't have an account?
Sortable LWC
Hi Friends,
Far from a LWC expert here. and trying to get a Lightning Data Table that is sortable. I feel like I have followed everything in the documentation but when I click the arrow in the table header nothing happens.
Here is my JS
Far from a LWC expert here. and trying to get a Lightning Data Table that is sortable. I feel like I have followed everything in the documentation but when I click the arrow in the table header nothing happens.
Here is my JS
import { LightningElement, track, wire, api } from 'lwc'; import getRecords from '@salesforce/apex/NewToLiftController.getRecords'; import { getRecord } from 'lightning/uiRecordApi'; import { NavigationMixin } from 'lightning/navigation'; const columns = [ { label: 'First Name', fieldName: 'FirstName', type: "Text", sortable: true}, { label: 'Last Name', fieldName: 'LastName', type: "Text", sortable: true }, { label: 'Email', fieldName: 'Email', type: 'Email', sortable: true }, { label: 'Role', fieldName: 'Role__c', type: 'Text', sortable: true }, { label: 'Startup Leadership', fieldName: 'Startup_Leadership__c', type: 'boolean', sortable: true }, { label: 'Company', fieldName: 'CompanyOrAccount', type: 'Text', sortable: true }, ]; export default class DatatableBasic extends LightningElement { @api recordId; @track data = []; @track columns = columns; @track tableLoadingState = true; @track rowOffset = 0; @ wire(getRecords, {recordId: '$recordId'}) wiredRecordsMethod({error, data}) { if (data) {this.data = data; this.error = undefined; } else if (error) { this.error = error; this.data = undefined; } this.tableLoadingState = false; } increaseRowOffset(){this.rowOffset += 1; } // 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); } }And here is the HTML
<template> <lightning-card title='First Time Campaign Memebers' icon-name="standard:contact"> <lightning-datatable key-field="id" data={data} show-row-number-column row-number-offset={rowOffset} hide-checkbox-column columns={columns} sorted-by={sortedBy} sorted-direction={sortedDirection} onsort={updateColumnSorting} is-loading={tableLoadingState}> </lightning-datatable> </lightning-card> </template>
Many differences in your code: Javascript is CASE SENSITIVE.
You have used: this.data = data_clone.sort(this.sortBy(fieldName), reverse);
sortby(field, reverse, primer) {
My correct solution was: this.data = data_clone.sort(this.sortBy(fieldName, reverse));
sortBy(field, reverse, primer){
The detailed verification of the upper case, lower case should be done ALWAYS very carefully to avoid many problems in Javascript.
The error messages in javascript are awful and not very precise most of the time when don't take care of this rule about the case sensitivity.
All Answers
The documentation is really incomplete and needs at least one workaround.
I struggled a lot but that seems to work.
The workaround is this one:
let data_clone = JSON.parse(JSON.stringify(this.contacts)); // it is a clone of the data that will be sorted.
this.contacts = data_clone.sort(this.sortBy(fieldName, reverse));
You must provide the algorithm of sort (incomplete documentation) for LWC but complete for Aura Lightning (I know it much better).
Here is the updated JS
And here is the HTML
Did you use the devtools of Chrome ( Ctrl+Shift+I ).
https://developers.google.com/web/tools/chrome-devtools/
Why is there import "getRecord" ?
import {getRecord} from 'lightning/uiRecordApi';Where is the wired part for: @wire(getRecord ... ?
Where is the Apex class? It is a campaign member. I must also verify your SOQL query.
Problem of the "undefined" values:
So I am very interesting by your code. There is a useless part in your code but I would like to see another error likely in your Apex class.
import {getRecord} from 'lightning/uiRecordApi';https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.apex
That is one the check and corrections that must be done in your defective code (that is not my code clearly that you have used).
Below is the Apex class. It is aura enabled and cacheable=true. Everything is fine until I sort then it throws an error on the page.
Many differences in your code: Javascript is CASE SENSITIVE.
You have used: this.data = data_clone.sort(this.sortBy(fieldName), reverse);
sortby(field, reverse, primer) {
My correct solution was: this.data = data_clone.sort(this.sortBy(fieldName, reverse));
sortBy(field, reverse, primer){
The detailed verification of the upper case, lower case should be done ALWAYS very carefully to avoid many problems in Javascript.
The error messages in javascript are awful and not very precise most of the time when don't take care of this rule about the case sensitivity.
The sorting algorithms are anything but trivial even more in javascript. It is a puzzle in order to find the shortest code or the fastest one.
The proof of these sorting codes is a complex problem but we know that these solutons work (common used solutions).
Given that we sort small data table, the fastest sorting algorithm is not important (the response is still immediate here).
For sorting a field with numbers, a new improved version of the algorithm could be better probably.
Sorting an array of JavaScript objects by property (you will find the solutions above and Salesforce also use them in their documentation)
https://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects-by-property
... it is an endless thread on developer forums (best way of sorting an array of JS objects by a field, many solutions).
data_clone.sort () : it is the default sort of javascript already optimized.
There are sophitiscated examples for the lightning-datatable but no one is sortable.
So we looked at the documentation tab, not bad at all but a partial example for a sortable datatable (?) so the struggle began.
https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example
They also used their own data-faker (work in the playground) but not sure we can see the source code (not ideal for basic examples).
return fetch('https://data-faker.herokuapp.com/collection', {
If you improve the sortBy (field, reverse, primer) (for numbers for instance), do not hesitate to post a new solution.
Best regards
Alain