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.

(Visited 2071 Times)

3 thoughts on “Keep selected rows persistent in lightning datatable pagination

  1. Raja

    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.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *