You need to sign in to do that
Don't have an account?
Sisodia Saurabh
lightning datatable onsort event not firing
Hello Everyone,
I am trying to impelement column sorting. When component loads it sorts the default coulmns value but Lightning: datatable "Onsort" event is not firing, I am getting column names as text only , nothing else(like arrow or something) to click for sorting event firing.
below is my code:
TestAccountComponent
<aura:attribute name="sortedBy" type="String" default="LastName"/>
<aura:attribute name="sortedDirection" type="String" default="asc"/>
<aura:attribute name="defaultSortDirection" type="String"/>
<lightning:datatable minColumnWidth="400px"
data="{! v.Contact }"
columns="{! v.Columns }"
keyField="Id"
hideCheckboxColumn="true"
onsort="{!c.updateColumnSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"
defaultSortDirection="{! v.defaultSortDirection }"/>
Controller:
getContact : function(component, event, helper) {
debugger;
helper.getStatus(component);
helper.getLeadSourceOpt(component);
component.set("v.Columns", [
{label:"FirstName", fieldName:"FirstName", type:"text"},
{label:"LastName", fieldName:"LastName", type:"text"},
{label:"Phone", fieldName:"Phone", type:"text"},
{label:"Email", fieldName:"Email", type:"text"},
{label:"Contact_Status__c", fieldName:"Contact_Status__c", type:"text"},
{label:"LeadSource", fieldName:"LeadSource", type:"text"}
]);
var rcdID = component.get("v.recordId");
var action = component.get("c.fetchContactList");
action.setParams({
recordId : rcdID
});
action.setCallback(this, function(data) {
var state = data.getState();
if (state === "SUCCESS") {
component.set("v.Contact", data.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');
var sortDirection = component.get("v.sortDirection") == 'asc' ? 'desc' : 'asc';
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
}
Helper::
sortData : function (cmp, fieldname, sortDirection) {
debugger;
var data = cmp.get("v.Contact");
var reverse = sortDirection !== 'asc';
data.sort(this.sortBy(fieldname, reverse))
cmp.set("v.Contact", 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));
}
}
Apex class::
@AuraEnabled
public static List<contact> fetchContactList(Id recordId)
{
system.debug('fetchContactList');
return [Select id, FirstName, LastName, Phone, Email, Contact_Status__c, LeadSource from Contact where AccountId=:recordId];
}
Thanks.
Saurabh Sisodia
I am trying to impelement column sorting. When component loads it sorts the default coulmns value but Lightning: datatable "Onsort" event is not firing, I am getting column names as text only , nothing else(like arrow or something) to click for sorting event firing.
below is my code:
TestAccountComponent
<aura:attribute name="sortedBy" type="String" default="LastName"/>
<aura:attribute name="sortedDirection" type="String" default="asc"/>
<aura:attribute name="defaultSortDirection" type="String"/>
<lightning:datatable minColumnWidth="400px"
data="{! v.Contact }"
columns="{! v.Columns }"
keyField="Id"
hideCheckboxColumn="true"
onsort="{!c.updateColumnSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"
defaultSortDirection="{! v.defaultSortDirection }"/>
Controller:
getContact : function(component, event, helper) {
debugger;
helper.getStatus(component);
helper.getLeadSourceOpt(component);
component.set("v.Columns", [
{label:"FirstName", fieldName:"FirstName", type:"text"},
{label:"LastName", fieldName:"LastName", type:"text"},
{label:"Phone", fieldName:"Phone", type:"text"},
{label:"Email", fieldName:"Email", type:"text"},
{label:"Contact_Status__c", fieldName:"Contact_Status__c", type:"text"},
{label:"LeadSource", fieldName:"LeadSource", type:"text"}
]);
var rcdID = component.get("v.recordId");
var action = component.get("c.fetchContactList");
action.setParams({
recordId : rcdID
});
action.setCallback(this, function(data) {
var state = data.getState();
if (state === "SUCCESS") {
component.set("v.Contact", data.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');
var sortDirection = component.get("v.sortDirection") == 'asc' ? 'desc' : 'asc';
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
}
Helper::
sortData : function (cmp, fieldname, sortDirection) {
debugger;
var data = cmp.get("v.Contact");
var reverse = sortDirection !== 'asc';
data.sort(this.sortBy(fieldname, reverse))
cmp.set("v.Contact", 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));
}
}
Apex class::
@AuraEnabled
public static List<contact> fetchContactList(Id recordId)
{
system.debug('fetchContactList');
return [Select id, FirstName, LastName, Phone, Email, Contact_Status__c, LeadSource from Contact where AccountId=:recordId];
}
Thanks.
Saurabh Sisodia
Refer this link .. you have an detail example
https://rajvakati.com/2018/02/18/usage-of-lightningdatatable/
Thanks for replying. I figured out why it was not working, I missed sortable: true while creating columns in controller.