I'm trying to implement the sorting functionality on a lightning:datatable. Sorting works one way (descending, clicking the column header again and nothing happens). I have followed the documentation and here's my code below:

<aura:attribute name="selectedAccountId" type="Id" access="public" />
<aura:attribute name="accounts" type="Object"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>

<aura:registerEvent name="AccountFilterChange" type="c:AccountFilterChange" />

<lightning:datatable aura:id="lightningTable"
                     data="{! v.accounts }"
                     columns="{! v.mycolumns }"
                     onrowaction="{! c.handleRowAction }"


doInit: function(component, event, helper) {
   helper.callServer(component, "c.getAccounts", function(response) {
       component.set("v.accounts", response);
    component.set('v.mycolumns', [
        {type: "button", typeAttributes: {
            label: '',
            iconName: 'utility:add',
            name: 'selectRecord',
            title: 'selectRecord',
            disabled: false,
            value: 'edit',
            variant: {fieldName: 'variantValue'},
        {label: 'Name', fieldName: 'Name', type: 'text', sortable: true},

handleRowAction: function(component, event, helper) {
    var account = event.getParam("row")
    var action = event.getParam("action");
    if (action.name == "selectRecord") {
        var event = component.getEvent("AccountFilterChange");
            accountId: account.Id,
 helper.addRow(component, account);

updateColumnSorting: function(component, event, helper) {
    var fieldName = event.getParam('fieldName');
    var sortDirection = event.getParam('sortDirection');
    // assign the latest attribute with the sorted column fieldName and sorted direction
    component.set("v.sortedBy", fieldName);
    component.set("v.sortedDirection", sortDirection);
    helper.sortData(component, fieldName, sortDirection);


sortData: function (component, fieldName, sortDirection) {
     var data = component.get("v.accounts");
     var reverse = sortDirection !== 'asc';
     //sorts the rows based on the column header that's clicked
     data.sort(this.sortBy(fieldName, reverse))
     component.set("v.accounts", data);
 sortBy: function (field, reverse, primer) {
     var key = primer ? function(x) {return primer(x[field])} : function(x) {return x[field]};
     //checks if the two rows should switch places
     reverse = !reverse ? 1 : -1;
     return function (a, b) {
         return a = key(a), b = key(b), reverse * ((a > b) - (b > a));

How would I make this work so both desc/asc will work when clicking the column header?

1 Answer 1


One bit the documentation omits is that in order to get sorting to work, you have to bind a couple of extra attributes to the lightning:datatable. I've discovered this before quite by accident.


<aura:attribute name="sortedBy"
                type="String" />
<aura:attribute name="sortedDirection"
                default="true" />


<lightning:datatable ...                          
                     sortedDirection="{!v.sortedDirection}" />

Then, in your sortData function:

    component.set("v.sortedBy", event.getParam("fieldName"));
    component.set("v.sortedDirection", event.getParam("sortDirection"));

Once you do this, the rest of the code from the documentation should work as expected.

  • yes, I finally found the documentation for the properties on the Specification tab once you said this - but it certainly isn't expanded upon in the actual Documentation tab, like most of the other features are explained
    – bkwdesign
    Jul 17, 2022 at 19:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .