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