datatable with pagination and checkbox cover

Custom Data Table With Pagination And Checkbox Functionality In Salesforce Lightning

Lightning Component

Hello guys, today in this post we are going to learn how we can create custom lightning data table with client side JavaScript pagination buttons and row level checkbox functionality using salesforce lightning component. In this component we’ll also persist checkbox checked state on pagination.

Component Features Highlights : 
  • Client Side JavaScript Pagination.
  • Inline Checkbox Functionality.
  • Get Selected Rows in Controller.
  • Total Records Count
  • Selected Records Count
  • Select/Deselect All Checkbox
datatable with pagination and checkbox demo
Lightning Component Output

 

Apex Controller : dataTableCtrl

  • Check code comments.

Lightning Component : tableWithPC.cmp

  • Check code comments.

JavaScript Controller : tableWithPCController.js

  • check code comments

JavaScript Helper : tableWithPCHelper.js

  • Check code comments.
Test App :

Output :

data table with pagination and checkbox demo
Lightning Component Output

 

Other popular Post :

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

if you have any suggestions or issue with it, you can post in comment box.

Happy Learning 🙂

(Visited 22,792 times, 1 visits today)

24 comments

  • Hi,

    Thanks for the code…. Works… i just have one doubt… i’m using this for a custom object where there are approx 20k records, but the table only displays 882.

    Can you let me know how i can display all the records?

     

    Thanks in advance

  • Can we add inline ediying for picklist fields in addition to wrapper n pagination. Can we do using lighting datatable fpr picklist values? Though its a limitation.Pla suggest

  • hey Piyush…This is great..can we add inline editing of picklist fields to this component?Should we go the parent/child component route or can it be achived with the same component you described here.

     

    Appreciate your help.

  • Hi Piyush,

    Can we edit the existing records(show as an input box) which displayed in table and when checkbox is checked, we create a new records with updated values which is changed by user for checked record? This functionality can be achieved using above code with some changes ?

  • I Wonder what’s the meaning of this piece of code
                   if (component.find(“selectAllId”).get(“v.value”)) {
                        Paginationlist.push(sObjectList[i]);
                    }else{
                        Paginationlist.push(sObjectList[i]);
                    }

  • Hi piyush,

    From server Side List List is filled but in while passsing frim Client Side to server side list is going null .means Object are there in List but all they are null.

  • how can load the data faster in jquery datatable, I am using more than 10 accordion section in my component, Each section I am showing more than 500 records, but it takes time to load more than 3 min.

    Anyone can help me on this ??

    • there is no need to display these much records on screen. end user always wants easy access to their desired records. so you can provide some appropriate filters on screen to search records

      • HI Piyush,
        You are right there is no need to but sometime client wants to see all data.
        I have a requirement where i have to display all the opportunity for user either the owner or its been shared with the user .
        In this type of scenrio i have to build a custom UI with sorting and searching feature as well.

        Is it possible to assign 50-k record to java script controller.

      • HI Piyush,
        I agree but sometime client are so rigid and they want all data to iterate over.
        Do you think your code is optimized enough to work with 50k data.

  • Hi Piyush,

    I agree but sometime client are rigid and they want to iterate over that amount data.

    Is your code enough optimized to work on 50k records?

  • Hi,

    I am looking for on hover a column in lightning datatable. Like: On hover of ‘Name’ coulmn should show me the value present in ‘description’ field of that record.  I want this using lightning:datatable only as I have to use some of its features like column sorting etc…

    Any help is much appreciated.

    Thanks

     

     

     

Leave a Reply