Today we will create Lightning Data Table With Lazy Loading support. This will be a generic component, which can be used with any supported object. Lightning Datatable also includes functionality to select multiple records, Sorting of data. And with some tweaks, we can also include inline editing as well.
So display Large Amount of Data in Visualforce always creates a problem. As there are many limits which we need to overcome to show data on the page. In Lightning, we can use the Lightning Datatable component with Lazy loading to show infinite records.
As we load data partially and once the user scrolls down at the end then we load the next set of data. So it is very responsive. Below you can check the demo for Lightning Data Table With Lazy Loading.
So the code is very simple and we just enhanced the standard component. Firstly in the apex class, we are making SOQL to get data and pass that data back to the Lightning controller as Wrapper.
Secondly, in the component we have attributes to pass Object and field name and control the lazy loading. And the number of rows we want to load in a single request.
Thirdly we have our component controller, In which init method we load Initial data. In addition, we have fetchdata method which will get called when the user reached the end and want to load the next set of data.
Finally, the helper, in which we are making the actual call to apex and getting the data from the controller. After that, we add this data in lightning attribute to display on UI.
Component Code
As we can see the code is very simple. Most of the functionality is provided by the component itself. So we just tweak it as per our requirement.
I have created a upgrade version of this component with action, inline editing. For more details check this post.
Did you like the post or want to add anything. Just let me know in comments section. Happy Programming 🙂
Hi Tushar,
Lazy loading is displaying only 2k records after that i am getting offset limit error.Any suggestions to handle more than 50k records.
Are you using my code. Because I test it with 2500 records and it work. Maybe in your query you are using offset, I suggest you to remove that.
When I tried to save the code it gives me an error for field isLoading
event.getSource().set(“v.isLoading”, true);
This page has an error. You might just need to refresh it.
Access Check Failed! AttributeSet.set(): ‘isLoading’ of component ‘markup://c:LazyLoadingDataTableApplication {1:0}’ is not visible to
Ankit its hard to tell without looking your code. As it looks like there is some information is missing. You need to check the access as this code is working fine in my org.
Only Text field values are being shown on the table other field vales are still blank
Thanks I fixed it. Just update this line ` labelList.add( new LabelDescriptionWrapper( fieldMap.get(fieldName).getDescribe(). getLabel(), fieldName, fieldMap. get(fieldName). getDescribe().getType() .name().toLowerCase(), true, inlineEdit, null ));` I have lowerCase the field type here.
Hi Tushar,
I do not see the code snippet. I am not sure why I am not able to. Also I tried to open your upgraded code but no luck. Is there any way I can view the code.
Thanks,
Raji
I am not sure why you are unable to view the code. You can find the gist here https://gist.github.com/tushar30/7f21b3366246dd488d1da31ace2c9c71#file-lazyloadingdatatable-js
Thanks Tushar, It is a great example for me to learn more on Lightning.
Hi Tushar,
I am pretty sure this code wont work as intended. You are using id > :recId. How will this work? If you sort on the basis of a column doesn’t mean that it will get sorted automatically on the basis of Salesforce ID.
yes good catch. We will not get expected output.
Apex controller is using Object Record `Id` to do the forward pagination. Is that a reliable way of doing pagination? As Salesforce Object Ids are VarChar, does greater than (>) operator behave as normal?
yes it works.
Is it calling server each and every time when next page is clicked?
Yes every time page reach at end it get next set of records.
how to write custom metadata using this program
Just pass the custom Metadata name in parameters
Can we do same thing if we get all data in one call and then load more if scroll ? I mean no need to go apex class on every scroll .
Yes we can. In controller instead of making Apex request store data in a attribute and get it from here.