Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mk450Mk450 

Lightning:datatable sort on multipicklist field datatype.

Hi all,

We are using lightning:datatable and some columns with fields.
2 fields are of data type MultiPicklist.
When I make them soratble true and click on column header for sort.
Error occurs.
Anyone having workaround to sort multipicklist datatype field?
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

Please try the below code. Kindly modify the code as per your requirement. It is sorting multi picklist field correctly.

Component: 
<aura:component controller="DataTableSortingC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <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.doinit}"/>
    
    <lightning:datatable data="{!v.acctList}" 
                         columns="{!v.mycolumns}" 
                         keyField="id"
                         hideCheckboxColumn="true"
                         onsort="{!c.updateColumnSorting}"
                         sortedBy="{!v.sortedBy}"  
                         sortedDirection="{!v.sortedDirection}"/>
</aura:component>

Controller: 
({
    doinit : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Account Name', fieldName: 'Name', type: 'text', sortable: true},
            {label: 'Multi Pick', fieldName: 'Multi_Pick__c', type: 'text', sortable: true},
            {label: 'Multi Pick 1', fieldName: 'Multi_Pick_1__c', type: 'text', sortable: true},
            {label: 'Industry', fieldName: 'Industry', type: 'text'},
            {label: 'Type', fieldName: 'Type', type: 'text'}            
        ]);
        
        var action = component.get("c.fetchAccts");
        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);
    }
})

Helper: 
({
    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));
        }
    }
})

Apex: 
public class DataTableSortingC {
    
    @AuraEnabled
    public static List < Account > fetchAccts() {
        return [ SELECT Id, Name, Industry, Type, Multi_Pick__c, Multi_Pick_1__c FROM Account LIMIT 10 ];
    }
}


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