Pages

Thursday, June 1, 2017

Generic Dynamic & Responsive Datatable Lightning Component with Sort, Search and Pagination Feature

Sometimes it is required to display set of records in Lightning component with different features like sort, search and pagination. In order to perform this operation every time with help of server side controller is not advisable approach specially for lightning experience.

I have created Lightning datatable component which can display records from any sobject. You need to specify below mention component attributes and it will display record in datatable with all features.


  • objAPIname (Like Account, Contact etc.)
  • fieldsAPINameList (comma seperated field API names like "Name,Type,Industry")
  • columnsLabelList (comma seperated column labels which you to specify like "Account Name, Type, Industry")
  • sortingOrder (specify field to sort records like "LastModifiedDate DESC")
  • columnForHyperLink (specify Field API name which will appear as hyper link for record detail page)
  • filterCriteria (criteria to filter records like "Industry !=null")
  • recordsLimit (number of records returned from sobject like 200, 100 etc)

Now we are going to display contact records in datatable by using below syntax in any app or withing any component:


<c:LightningJSONDataTable objAPIname="Contact"     
fieldsAPINameList="Name, Account.Name, Email"
columnsLabelList="Contact name, Account Name, Email"
sortingOrder="LastModifiedDate DESC" 
columnForHyperLink="Name"
filterCriteria="Email != null" 
recordsLimit="100"/>

below is image snapshot:


You can download the complete code from below URL:

Or you can install unmanaged package from below URL in your org:

https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000BGlf


Hope this will help!!!

More Blogs>>: 
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    

4 comments:

  1. this datatable is not responsive.i copied ur code

    ReplyDelete
  2. Wow, cool post. I’d like to write like this too – taking time and real effort to make a good article… but I procrastinate too much and never seem to get started. Thanks though. new york website design company

    ReplyDelete
  3. You got a very wonderful website, Sword lily I observed it through yahoo. branding agency san francisco

    ReplyDelete
  4. Great write-up. I am a normal visitor of your web site and appreciate you taking the time to maintain the excellent site. I will be a frequent visitor for a long time. branding san francisco

    ReplyDelete