{"id":7101,"date":"2020-06-10T00:06:35","date_gmt":"2020-06-10T04:06:35","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=7101"},"modified":"2020-08-26T09:49:23","modified_gmt":"2020-08-26T13:49:23","slug":"implement-infinite-scrolling-for-lightning-data-table","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/implement-infinite-scrolling-for-lightning-data-table\/","title":{"rendered":"Implement Infinite Scrolling for lightning-datatable"},"content":{"rendered":"\n<p class=\"justify\">If you are thinking this post is about <strong>implementing infinite scrolling behavior<\/strong> for <strong><a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/bundle\/lightning-datatable\/example\">lightning-datatable<\/a><\/strong> component, then you only got half part right. Main purpose of this blog post is to compare side by side<strong> @wire vs Imperative<\/strong> way of calling Apex and decide which one to use when?<\/p>\n\n\n\n<p>If you are looking for <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-lightning-web-component\/\">basics of LW<\/a>C or <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/point-and-click\/use-lightning-web-components-in-flow\/\">how to use LWC in flow<\/a>, <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/data-exchange-between-aura-lightning-web-components-lwc-and-visualforce\/\">Lightning Message Service<\/a>, <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gravatar-reusable-lightning-web-component\/\">how to call Apex<\/a> then <a href=\"https:\/\/www.jitendrazaa.com\/blog\/tag\/lightning-web-component\/\">follow this link<\/a>.<\/p>\n\n\n\n<p>In this post, you would learn<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>How to call Apex in LWC using <strong>@wire<\/strong><\/li><li>How to call Apex in LWC by <strong>Imperative<\/strong> approach<\/li><li>How to call Apex on component load event equivalent to init in Aura<\/li><li>Why would you choose to call Apex either by <strong>@wire<\/strong> or <strong>Imperative<\/strong> Apex approach<\/li><li>How to bind <strong>wrapper class<\/strong> in <strong><a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/bundle\/lightning-datatable\/example\">Lightning-datatable<\/a><\/strong> component<\/li><li>How to enable infinite scrolling in <strong><a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/bundle\/lightning-datatable\/example\">Lightning-datatable<\/a><\/strong> by making server call<\/li><\/ul>\n\n\n\n<!--more-->\n\n\n\n<p>Lets start with building demo <strong> lightning-datatable<\/strong> component with infinite scroll effect ,  below code is self explanatory so I would skip code explanation part. <a href=\"https:\/\/jit29-developer-edition.na85.force.com\/blogdemo\/s\/lwcdemo\">Click here for live demo of this component and test end result yourself.<\/a><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/e45244d3f6095b3cd1d46616c0178c2b.js\"><\/script>\n\n\n\n<p class=\"justify\">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 <strong>cacheable=true<\/strong> was mentioned in Apex. Salesforce is trying to save resources. You cannot use wire method if <strong>cacheable is not true<\/strong>. This is great caching feature, unfortunately it didn&#8217;t sufficed our need. <\/p>\n\n\n\n<p class=\"justify\">Let&#8217;s do one more attempt, this time we would use <strong>Imperative approach<\/strong> and use <strong>connectedCallback<\/strong> 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 <strong>cacheable=false<\/strong>. <a href=\"https:\/\/jit29-developer-edition.na85.force.com\/blogdemo\/s\/lwcdemo\">Click here for live demo of this component and test end result yourself.<\/a><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/dab45e5c47829b0d96d9f78aa7583574.js\"><\/script>\n\n\n\n<p>Use below code to wrap both approach in single component<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/b3ccd976d72e417730396a8bc6fb5e69.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Problem &#8211; It is making continuous server calls even when no one is scrolling<\/h3>\n\n\n\n<p class=\"justify\"><strong>Cause 1<\/strong> : Parent component needs to restrict height. If parent Div does not have height in pixel then it will keep calling Apex method. <a href=\"https:\/\/salesforce.stackexchange.com\/questions\/279776\/lwc-lightning-datatable-infinite-scrolling-not-working\">Read more about issue here<\/a><\/p>\n\n\n\n<p class=\"justify\"><strong>Cause 2 <\/strong>: Let&#8217;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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When to use wire vs Imperative approach to call Apex in Lightning Web Component<\/p>\n","protected":false},"author":1,"featured_media":7103,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[475,9],"tags":[499,501,500,462,464,502],"class_list":["post-7101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightning-web-components","category-salesforce","tag-datatable","tag-imperative-apex","tag-lightning-datatable","tag-lightning-web-component","tag-lwc","tag-wire"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6419,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/introduction-to-lightning-test-services-with-jasmine\/","url_meta":{"origin":7101,"position":0},"title":"Introduction to Lightning Test Services with Jasmine","author":"Jitendra","date":"March 10, 2018","format":false,"excerpt":"Complete Source code and video of using Lightning Datatable Component and Jasmine in Salesforce","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Lightning Testing Service (LTS)","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/03\/Lightning-Testing-Service-LTS.png?fit=1200%2C433&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/03\/Lightning-Testing-Service-LTS.png?fit=1200%2C433&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/03\/Lightning-Testing-Service-LTS.png?fit=1200%2C433&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/03\/Lightning-Testing-Service-LTS.png?fit=1200%2C433&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/03\/Lightning-Testing-Service-LTS.png?fit=1200%2C433&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6880,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-current-user-id-in-salesforce\/","url_meta":{"origin":7101,"position":1},"title":"Get Current User Id in Salesforce","author":"Jitendra","date":"February 2, 2019","format":false,"excerpt":"How to get Current Logged in user Id in Apex, Visualforce, Lightning Component and Formula fields in Salesforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6798,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-lightning-web-component\/","url_meta":{"origin":7101,"position":2},"title":"Getting Started with Lightning Web Component","author":"Jitendra","date":"March 3, 2019","format":false,"excerpt":"Before starting with Lightning Web Component, I would suggest to read this introduction post first. If you enjoy watching video then you might enjoy below video where I conducted Live coding explaining basics of Lightning Web Component. https:\/\/www.youtube.com\/watch?v=KKNEpPP6V4s In this post, we are going to Show loading image on initial\u2026","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/KKNEpPP6V4s\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":7058,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gravatar-reusable-lightning-web-component\/","url_meta":{"origin":7101,"position":3},"title":"Gravatar &#8211; Reusable Lightning Web Component","author":"Jitendra","date":"May 2, 2020","format":false,"excerpt":"Avoid asking your users to upload pictures - Use Globally Recognized Avatar , Reusable Lightning Web Component","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Gravatar - Reusable Lightning Web Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6908,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/point-and-click\/use-lightning-web-components-in-flow\/","url_meta":{"origin":7101,"position":4},"title":"Use Lightning Web Components in Flow","author":"Jitendra","date":"October 21, 2019","format":false,"excerpt":"Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)","rel":"","context":"In &quot;Lightning Web Components&quot;","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Using LWC in Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7072,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/share-javascript-code-in-lightning-web-component-to-read-url-parameters\/","url_meta":{"origin":7101,"position":5},"title":"Share JavaScript Code in Lightning Web Component to Read URL Parameters","author":"Jitendra","date":"May 4, 2020","format":false,"excerpt":"Building Reusable LWC Component to read query string from URL","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=7101"}],"version-history":[{"count":8,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7101\/revisions"}],"predecessor-version":[{"id":7166,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7101\/revisions\/7166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/7103"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=7101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=7101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=7101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}