Keep selected rows persistent in lightning datatable pagination

Keep selected rows persistent in lightning datatable pagination

I have got this request many times from my blog visitor to create a datatable which can have persistent selected rows.

Use Case
  • When a user selects some rows on a page and navigates to previous/next page, currently selected rows should be stored.
  • When the user selects new rows in the next page, it should these newly selected rows with previous ones which were selected on the last page.
  • When the user navigates back to the last page, the user should see the selected rows he selected last time.
  • If the user deselects any row, it should delete that row from the stored rows as well.

This blog will cover these requirements and will help you to make your selected rows persistent.

Check out the code below:

Component – LightningPaginationWithPersistentSelectedRows.cmp

Controller – LightningPaginationWithPersistentSelectedRowsController.js

Helper – LightningPaginationWithPersistentSelectedRowsHelper.js

Apex – AccountController.apxc

Code Highlights
  • The above code uses Lightning Pagination – Using Server Side Controller And Client Side Cache post’s code as the base and we are modifying a few things in this code.
  • We are modifying the row Id and appending with the page number. This helps to identify the rows which belong to a particular page. So in case you want to update these rows or doing any DML operation, you need to make sure you extract the real Ids from the row again, meaning remove the page number.
  • Attribute “Selection” is storing all the rows selected from all the pages.
  • Attribute “hasPageChanged” is helping us to identify if the next page or previous page is clicked.
  • Method “onRowSelection” is the one where all the magic happening.

I am using and modifying the code from previous posts that I have written on the data table. Check out these posts for further solutions on the data table:

Check out below video from “Lightning Component Development Series” as well for lightning data table explanation:

The above code example is only a workaround and not a permanent solution to keep selected rows persistent in the lightning data table as this feature doesn’t come out of the box yet. Refer the code and modify as per your use case.

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 17 Comments

  1. It is really helpful for so many people. Thank You! :).

    One Suggestion. If you use client side, instead of server side actions it will help more. Is there any possibility. I am also not sure, have to check it.

      1. Thank you!!

  2. Using how to display Parent Record name instead of its Id

    1. Hi Abhi,

      From backend SOQL, get the name and same can be displayed in data table component.

  3. It is really helpful for me. Thank You! :).
    I have a little question.
    I write so many console.log() in controller’s onRowSelection() function,then I find out that if i go straight to the second page and click one checkbox,The Id of that line wouldn’t be save into v.selection.But if i click twice again,that Id will be save into v.selection.
    After I check a little while,the problem is program go to
    component.set(“v.hasPageChanged”, false);
    It cause the problem happened.
    I write a button and it’s disabled attribute is related with v.selection value,if value is empty,disabled=true,I can’t click that button.
    because it seems to click the checkbox ,actually it’s not in v.selection
    So how to deal with this problem?

    1. Hi Jafe,

      Thanks for pointing it out. I have updated the code, please use the latest code from this article, you should not face this issue anymore.

      1. Thank you so much! Your Blog is really helpful!!

      2. Thank you so much.Your blog is really helpful.I’m a big fan of you O(∩_∩)O

  4. Thank you so much.Your blog is really helpful.I’m a big fan of you O(∩_∩)O

  5. Hi,

    Thank you for this explanation, but the uncheck didn’t work for me
    Please advise?

    Find below my onRowSelection code:

    var allSelectedRows = component.get(“v.selectedRows”);
    var current = component.get(“v.currentPage”);
    var dTable = component.find(“accountTable”);
    var selectedRows = dTable.getSelectedRows();
    var selectedIds = [];
    var allSelectedIds = [];
    component.get(“v.selectedRecords”)[pgName] = selectedRows;
    for(var x in component.get(“v.selectedRecords”)){
    for(var y in component.get(“v.selectedRecords”)[x]){
    for(var j=0; j<allSelectedRows.length; j++){
    for(var i=0; i<selectedIds.length; i++){
    if(allSelectedRows[j] === selectedIds[i]){
    console.dir('### currentSelected '+selectedIds[i]);
    allSelectedRows.splice(j, 1);
    console.dir('### allSelectedRows after splice '+allSelectedRows);

    My allSelectedRows still contains the unchecked records

    Thanks in advance

  6. Hi

    This is not working as expected. When user selects the check box, its not getting selected. Please help with the issue.


    1. take the code as it is, it should work, else please let me know the error if you are seeing any.

  7. Hi Manish,

    In this pagination if I selected the record on first page and after that I jumped two or three page and then selected the record then there comes issue.
    Like if I select the 1 record from first page and then selected the 3 records from the 4 page then it holds total only 3 records.It is not holding the first record of the 4 page.Because rowselection is not working for the first record of fourth page when I jumping from 1 page to 4 page.
    Please help me with this issue.

    1. I have tested your scenario as well, and the data-table is holding the selection perfectly. Please make sure you are using latest code from the blog as I had changed it some time back.

  8. Hi Manish, This blog saved my day. It is really helpful. I have implemented the similar logic for the row selection. But unselect is not working. Can you please guide me here. My code is as follows.

    getSelectedRows : function(component, event, helper){
    //Get selected Rows
    var selectedRows = event.getParam(‘selectedRows’);

    //Get all selected rows from datatable, this will give all the selected data from all the pages
    var allSelectedRows = component.get(“v.selectedRows”);

    // variable selectedRowsList of type List, holds all the data that is selected for the serverside controller. Where I am working on selected rows
    var existRows = (component.get(“v.selectedRowsList”).length >0)?component.get(“v.selectedRowsList”):[];
    var Idset = new Set();


    component.set(“v.showCancelTableError”, false);
    existRows = existRows.concat(row);

    var IdsSelected = [];
    component.set(“v.selectedRows”, IdsSelected);
    component.set(“v.selectedRowsList”,existRows );
    I am confused here, on how to find the unselected rows and how to remove them from IdsSelected and selectedRowsList

Leave a Reply

Close Menu