Sorting

Custom Sorting On Data Tables In Salesforce Lightning Component

Lightning Component

Sharing is caring!

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.
CustomSortingController.apxc

  •  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.
customSortComponent.cmp

  • Here i use HTML entity code for display arrow sign on table header .
  1. for BLACK UP-POINTING TRIANGLE =  ▲
  2. for BLACK DOWN-POINTING TRIANGLE = ▼

you can use lightning svg icons instead of it.

  • See code comments.
customSortComponentController.js

  • See code comments.
customSortComponentHelper.js

  • See code comments.
TestApp.app

  • 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
Output…

Some Useful Resources : 

https://www.lightningdesignsystem.com/components/data-tables/#overview

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. 🙂

Sharing is caring!

(Visited 6,945 times, 25 visits today)

13 comments

Leave a Reply