Custom Sorting On Data Tables In Salesforce Lightning Component

In this post we are seeing that how to Add Custom Sorting on Data Table  Header in salesforce lightning components.

Sorting on table
After create component looks like…..
Prerequisites : basic understanding of Lightning Component. And apex Programming.
Step  1 : Create Server Side Apex Controller.

  •  First we create apex controller for our lightning component.
  • In this apex class we have a @AuraEnabled method which takes 2 parameters. (sort field name and boolean isAsc value).
  • Next we create SOQL Query, based on sort field Name and boolean value parameters. which is set from lightning component js controller.
  • After create query as a string format, add it to Database.query() method to run query.
    and in the end return the contact list to component. [see code comments].
Step 2 : Create Custom Sorting Lightning Component.

  • Here i use HTML entity code for display arrow sign on table header .

you can use lightning svg icons instead of it.

  • See code comments.

  • See code comments.

  • See code comments.

  • After the winter 17 release you can  use the Lightning Design System style in Lightning Apps by extends=”fore:slds”.  The Salesforce Lightning Design System provides a look & feel that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom applications a UI that is consistent with Salesforce.  
Sorting on table

Some Useful Resources :

How to use multiple conditions in aura:if !

Use the Lightning Design System in Lightning Apps

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference. 🙂

(Visited 19,993 times, 1 visits today)

16 thoughts on “Custom Sorting On Data Tables In Salesforce Lightning Component”

    • No i don’t think so, i have tested above code with limit 1000 and it’s working good. all records will be came within few seconds.

  1. Is it somehow possible to do the sorting only with Javascript?

    Or to ask more specifically: I know the answer to the question above is yes, but how can I force the Table to rerender afterwards?


Leave a Comment