Salesforce Lightning Datatable Infinite Scrolling

Implement Infinite Scrolling for lightning-datatable

If you are thinking this post is about implementing infinite scrolling behavior for lightning-datatable component, then you only got half part right. Main purpose of this blog post is to compare side by side @wire vs Imperative way of calling Apex and decide which one to use when?

If you are looking for basics of LWC or how to use LWC in flow, Lightning Message Service, how to call Apex then follow this link.

In this post, you would learn

  • How to call Apex in LWC using @wire
  • How to call Apex in LWC by Imperative approach
  • How to call Apex on component load event equivalent to init in Aura
  • Why would you choose to call Apex either by @wire or Imperative Apex approach
  • How to bind wrapper class in Lightning-datatable component
  • How to enable infinite scrolling in Lightning-datatable by making server call

Lets start with building demo lightning-datatable component with infinite scroll effect , below code is self explanatory so I would skip code explanation part. Click here for live demo of this component and test end result yourself.

Initially , it seems everything working as expected, however after some scroll , try to search any employee name. You would observe that Salesforce never made 2nd Apex call as cacheable=true was mentioned in Apex. Salesforce is trying to save resources. You cannot use wire method if cacheable is not true. This is great caching feature, unfortunately it didn’t sufficed our need.

Let’s do one more attempt, this time we would use Imperative approach and use connectedCallback method to make Apex call on component load. @wire decorator did this automatically on component load, this time we have to make explicit call. Another change , we have done is, we marked method as cacheable=false. Click here for live demo of this component and test end result yourself.

Use below code to wrap both approach in single component

Problem – It is making continuous server calls even when no one is scrolling

Cause 1 : Parent component needs to restrict height. If parent Div does not have height in pixel then it will keep calling Apex method. Read more about issue here

Cause 2 : Let’s say height is 300px but we have less component that does not fit 300px then this component would still make server call continuously. In that case height needs to be automatically adjusted or disable infinite scrolling if total record in component is not enough to fill height.


Related Posts

Comments

7 responses to “Implement Infinite Scrolling for lightning-datatable”

  1. Edwin Avatar

    Thank you for the beautiful post. Do you have a suggestion on how to implement this for a standard div tag? I have a div displaying an iteration of components and wanted to see if i can replicate similar behavior.

  2. Michel Carvalho Lopes Avatar

    Very good man! Congrats! Thank for the post. But I think that the title of this post maybe should be “Implement Infinite Scrolling for ๐—น๐—ถ๐—ด๐—ต๐˜๐—ป๐—ถ๐—ป๐—ด-๐—ฑ๐—ฎ๐˜๐—ฎ๐˜๐—ฎ๐—ฏ๐—น๐—ฒ” rather than “Implement Infinite Scrolling for ๐—น๐—ถ๐—ด๐—ต๐˜๐—ป๐—ถ๐—ป๐—ด:๐—ฑ๐—ฎ๐˜๐—ฎ๐˜๐—ฎ๐—ฏ๐—น๐—ฒ” because this exemplo teach to do scrolling in LWC and not in Aura

  3. Siri Avatar
    Siri

    Thank you so much Jitendra ji๐Ÿ‘๐Ÿ‘ This blog is very helpful!!

  4. Cassidy Rush Avatar
    Cassidy Rush

    Yes, I was struggling so much to get this functionality to work properly. Obviously no one at Salesforce tested the sample code in the official documentation for lightning-datatable, or they would have realized it doesn’t work.

  5. Oz Avatar
    Oz

    I have an issue with checkboxes, when I scroll down, checkboxes return back to unchecked even I keep them in a seperate vars and assign back again they still remain unchecked

  6. priya Avatar
    priya

    Hi Jitendra
    How can we implement horizontal scroll for a HTML table in LWC on salesforce mobile App

  7. Keith C Avatar
    Keith C

    Thanks Jitendra, your post was a big help for me to get this working.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading