Implement Infinite Scrolling for lightning-datatable

When to use wire vs Imperative approach to call Apex in Lightning Web Component

Salesforce Lightning Datatable Infinite Scrolling

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

2 thoughts on “Implement Infinite Scrolling for lightning-datatable”

  1. 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. 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

Leave a Reply

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