Lightning Data Table With Lazy Loading

Display Large Amount of Data in Visualforce always create problem. There are many limits which we need to overcome to show data in page. In Lightning we can use Datatable component with Lazy loading to show infinite records. Wew can also include sorting as well.

Today We will create a Lightning Datatable with generic sObject so that you can use that with any sObject.  This Datatable also include selection of records,Sorting. With some tweaks we can also include inline editing as well. As we load data partially and once load we keep the data in the list so it is very responsive. Below I have shared the code as well.

Lazy Loading dataTable.gif

This code is very simple. Most of the functionality is provided by component itself. We just tweak it as per our requirement. As the number of components are increasing day by day . They are making Lightning a very good choice for long run.

I have created a upgrade version of this component with action, inline editing. For  more details you can check this post.

Did you like the post or want to add anything. Just let me know in comments section. Happy Programming 🙂

Advertisements

7 thoughts on “Lightning Data Table With Lazy Loading

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

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

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

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

Leave a Reply

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