You need to sign in to do that
Don't have an account?
Matt Brown 71
Lightning dataTable sortedDirection not working
I'm using lightning dataTable component. But the sortedDirection only ever sorts one direction. The sortDirection param never updates properly. Here is some code:
<aura:component implements="flexipage:availableForAllPageTypes" controller="CrossSellActivityController" access="global"> <!-- Attributes --> <aura:attribute name="activities" type="Array" /> <aura:attribute type="String" name="sortedDirection" default="asc" /> <aura:attribute name="columns" type="List" /> <!-- Component DOM --> <div> <lightning:datatable keyField="id" data="{!v.activities}" columns="{!v.columns}" sortedDirection="{!v.sortedDirection}" onsort="{!c.updateColumnSorting}" hideCheckboxColumn="true" /> </div> </aura:component>Here is the column definition:
var columns = [ { label: 'Program Key', fieldName: 'Program_Key__c', type: 'text', sortable: true }, { label: 'Status', fieldName: 'Disposition__c', type: 'text', sortable: true }, { label: 'User', fieldName: 'Username', type: 'text', sortable: true }, { label: 'Asset', fieldName: 'Asset', type: 'text', sortable: true }, { label: 'Timestamp', fieldName: 'CreatedDate', type: 'date', typeAttributes: { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true }, sortable: true } ]; component.set("v.columns", columns);And where I console.log out the sortedDirection variable:
updateColumnSorting : function(component, event, helper) { var sortDirection = event.getParam('sortDirection'); component.set("v.sortedDirection", sortDirection); console.log('sortDirection: ', sortDirection); },The console.log always outputs 'asc' never flips to 'desc'. I've even tried changing the definition to Boolean with no luck.
<aura:attribute type="Boolean" name="sortedDirection" default="false" />I've also tried flipping it myself with a truthy check and setting it back on the sortedDirection attribute, but that doesn't work either. Am I doing something wrong?
Greetings to you!
I don't have your complete code so I can't tell where exactly is the problem. However, you can refer to the below code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
Component:
Controller:
Helper:
Apex:
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.
Thanks and Regards,
Khan Anas
All Answers
Greetings to you!
I don't have your complete code so I can't tell where exactly is the problem. However, you can refer to the below code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
Component:
Controller:
Helper:
Apex:
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.
Thanks and Regards,
Khan Anas
Are you on Winter '18 by chance? I see the only difference between your known working code and mine is that you are doing client side sorting, and so you're also setting the sortedBy where I am not, I'm almost curious if the dataTable doesn't update the sortedDirection unless your also using the client side sorting and passing in sortedBy="{!v.sortedBy}" bit as well. Though I've tried this already now that I think about it.
I am on Winter 19. According to Salesforce doc (https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation):
To enable sorting of row data by a column label, set sortable to true for the column on which you want to enable sorting. Set sortedBy to match the fieldName property on the column. Clicking a column header sorts rows by ascending order unless the defaultSortDirection is changed, and clicking it subsequently reverses the order. Handle the onsort event handler to update the table with the new column index and sort direction.
There is no change for sorting columns in lightning:datatable in Winter 19 release.
I hope it helps you.
Kindly mark this as solved if the information was helpful.
Thanks and Regards,
Khan Anas
I was able to figure out a work around. The fact that the onsort="{!c.updateColumnSorting}" was being called correctly was enough for me to maintain my own sortDirection attribute. I'm doing serverside sorting so this still works for my use case. So I'm no longer relying on the event.getParam('sortedDirection'); which was never updating, I'm simply looking directly at the component attribute now.
I'm going to mark your answer as accepted since what you sent was a good solution and a working example. I appreciate your time.
https://rajvakati.com/2018/02/18/usage-of-lightningdatatable/
I am trying to impelement the same - column sorting by referring this forum.
I am getting issue that Lightning: datatable "Onsort" event is not firing, I am getting column names as text only , nothing else(like arrow or something) to click 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
To get the sort arrows next to field name & fire the onsort action, add the sortable property to the field that you wish to sort.
For example :
{label:"FirstName", fieldName:"FirstName", type:"text",sortable:true},
Regards,
Kiran.B
tried with same approach ,sort icon is visible ,value with which column to sort are visible in alerts(debufs),but data is not sorted.
Any idea what might be the issue?
I know this question is quite old but I had this same problem and after playing with this for the last few days, I think I now understand what the problem was in the original post. It gets a bit confsuing, so here goes:
The short answer is that the original poster was not setting the sortedBy attribute on the table component.
The lightning:datatable has 4 relevant attributes:
- sortedBy="{!v.sortedBy}"
- defaultSortDirection="{!v.defaultSortDirection}"
- sortedDirection="{!v.sortedDirection}"
- onsort="{!c.handleSort}"
The table component behaves in diferent ways depending on a combination of these attributes:I understand that this is long winded, but honestly, I wish I knew all this two days ago. It's not very well explained in the documentation.
Finally, just to fully answer the original question, here's how you could have fixed your code:
Component File
Columns Definition
Sorting Function Helper Function
Thanks for reading and I really hope it helps someone out,
Duncan