AccountList.cmp
<aura:component controller="AccountListController"
implements="flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable" >
<aura:attribute type="Account[]" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:attribute name="sortedBy" type="String" default="Name"/>
<aura:attribute name="sortedDirection" type="String" default="asc"/>
<aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
<lightning:datatable data="{!v.acctList}"
columns="{!v.mycolumns}"
keyField="id"
hideCheckboxColumn="true"
onsort="{!c.updateColumnSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"/>
</aura:component>
AccountListController.js
({
fetchAccounts : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name', type: 'text', sortable: true},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Type', fieldName: 'Type', type: 'Text'}
]);
var action = component.get("c.fetchAccts");
action.setParams({
});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.acctList", response.getReturnValue());
helper.sortData(component, component.get("v.sortedBy"), component.get("v.sortedDirection"));
}
});
$A.enqueueAction(action);
},
updateColumnSorting: function (cmp, event, helper) {
var fieldName = event.getParam('fieldName');
var sortDirection = event.getParam('sortDirection');
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
}
})
AccountListHelper.js:
({
sortData: function (cmp, fieldName, sortDirection) {
var data = cmp.get("v.acctList");
var reverse = sortDirection !== 'asc';
data.sort(this.sortBy(fieldName, reverse));
cmp.set("v.acctList", data);
},
sortBy: function (field, reverse, primer) {
var key = primer ?
function(x) {return primer(x[field])} :
function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
})
AccountListController apex class:
public class AccountListController {
@AuraEnabled
public static List < Account > fetchAccts() {
return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 10 ];
}
}
Output:
<aura:component controller="AccountListController"
implements="flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable" >
<aura:attribute type="Account[]" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:attribute name="sortedBy" type="String" default="Name"/>
<aura:attribute name="sortedDirection" type="String" default="asc"/>
<aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
<lightning:datatable data="{!v.acctList}"
columns="{!v.mycolumns}"
keyField="id"
hideCheckboxColumn="true"
onsort="{!c.updateColumnSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"/>
</aura:component>
AccountListController.js
({
fetchAccounts : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name', type: 'text', sortable: true},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Type', fieldName: 'Type', type: 'Text'}
]);
var action = component.get("c.fetchAccts");
action.setParams({
});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.acctList", response.getReturnValue());
helper.sortData(component, component.get("v.sortedBy"), component.get("v.sortedDirection"));
}
});
$A.enqueueAction(action);
},
updateColumnSorting: function (cmp, event, helper) {
var fieldName = event.getParam('fieldName');
var sortDirection = event.getParam('sortDirection');
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
}
})
AccountListHelper.js:
({
sortData: function (cmp, fieldName, sortDirection) {
var data = cmp.get("v.acctList");
var reverse = sortDirection !== 'asc';
data.sort(this.sortBy(fieldName, reverse));
cmp.set("v.acctList", data);
},
sortBy: function (field, reverse, primer) {
var key = primer ?
function(x) {return primer(x[field])} :
function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
})
AccountListController apex class:
public class AccountListController {
@AuraEnabled
public static List < Account > fetchAccts() {
return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 10 ];
}
}
Output:
Hi,
ReplyDeleteI am implementing the Sorting functionality. I used same code like yours. So when component loads I get the default column sorted. but Onsort event is not firing in my component. I cant see direction arrow(-->) like you showed in the your screen shot after Account name.
Let me know if you think I have to add something more to create Onsort event.
Thanks,
Saurabh
Make sure sortable: true is set in the controller.
DeleteHi Magulan,
ReplyDeleteI have created Lighting Data Table using above code, values are not coming in ascending order by default.
Thanks,
Anil Kumar
Check whether this is the issue for you - https://success.salesforce.com/ideaView?id=0873A000000E8qiQAC
Deletehi,
ReplyDelete[Cannot read property 'sort' of null]
i got this error when i run
Check whether semi-colon is added in the javascript controller in all the ending lines.
Deleteput console.log or alert statements to find where the code is breaking.
DeleteCan somenone explain sorting code?
ReplyDeleteFollow the below to understand
Deleteonsort="{!c.updateColumnSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"
Code worked fine...Thanks!!
ReplyDeletehow to do the same with checkbox in a row and getting selected value.
ReplyDeleteCheck this - https://www.infallibletechie.com/2018/08/how-to-handle-selectedrows-in.html
Delete