1

I am trying to use the built-in infinite loading capabilities of the lightning-datatable. But whenever enable-infinite-loading is set to true, the component repeatedly spams the loadMoreData action, even if the user has not scrolled to the bottom of the table.

<template>
<lightning-datatable
    key-field="Id"
    columns={tableColumns}
    data={data}
    is-loading={isloading}
    enable-infinite-loading
  onloadmore={loadMoreData}>
</lightning-datatable>
import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
 tableColumns = [
    {label: 'Number', fieldName: 'Id', type: 'number'},
    {label: 'Name', fieldName: 'Name'}
 ];

@track data = [];
@track isloading = false;

connectedCallback() {
    this.loadData();
    this.isloading = true;
}

loadData() {
    console.log('in load data==');
    const offset = this.data.length;
    let newData = [];

    for(let i=offset + 1;i<=offset + 100; i++) {
        newData.push({
            Id: i,
            Name: 'Test Row #' + i
        });
    }
    this.data = [...this.data, ...newData];
}

loadMoreData(event) {
    console.log('load more');
    const { target } = event;
    target.isLoading = true;
    this.loadData().then(() => {
       target.isLoading = false;
    });
}

}

Without scrolling down loadData is being called again and again

16 in load data==

How can we either adjust the height of the table dynamically or stop the spinner from spinning at the bottom of the table. I have adjusted height dynamically like this but still not working.

Problem: When there is less data like 1-2 record to show, then spinner is always visible and it doesn't go away. Please help.

3 Answers 3

2

In lightning-datatable the onloadmore event is called continuously until the available data fills in the space for the datatable.

The for loop in the loadData function keeps adding data to the variable and since there is no height restriction as such the table will expand and it will call the onloadmore event again which in turn calls the loadData function.

You'll have to define a criteria in the loadMoreData function which will disable the infinite loading when it is met.

if('your criteria here'){
    let baseTableEle = this.template.querySelector('your datatable');
    if(baseTableEle){
        baseTableEle.enableInfiniteLoading = false;
    }
}
2
  • Only problem here is the criteria, what can be the criteria, moreover if I find any criteria, then what are the odds that when system loads all the records like 100 records, when all records show up, will the spinner stop?
    – sfdc rowdy
    Commented Nov 10, 2022 at 7:59
  • The criteria will be based on your use case, let's say you only want to load data when there are less than 100 values in your data variable. Once the condition is not satisfied you can set isLoading = false. Also I observed that you are setting target.isLoading = false, that is not required. You can just set this.isloading = false as that is the one being used for the table. Commented Nov 10, 2022 at 12:05
0

Please try to add in the datatable component load-more-offset="20"

3
0

You can build condition like this. this.data is the data coming from the server call. If the number of rows coming from server is lower than a fixed number of rows which you are displaying when the page loads first then in that case you don't need infinite scrolling feature so just disable it. below is a small snippet

handleLoadMore () {
    
    if (this.data.length < incrementSize) {
      const baseTableEle = this.template.querySelector('lightning-datatable')
      if (baseTableEle) {
        baseTableEle.enableInfiniteLoading = false
      }
    } else {
      this.pageSize = this.pageSize + incrementSize
      this.fetchData(this.pageSize)
    }
  }

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .