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 onloadmore
action, even if the user has not scrolled to the bottom of the table.
<template>
<lightning-datatable
key-field="Id"
columns={tableColumns}
data={data}
enable-infinite-loading={isLoaded}
onloadmore={onLoadMoreHandler}>
</lightning-datatable>
</template>
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 isLoaded = false;
addMoreDataCounter = 0;
connectedCallback() {
this.addMoreData();
this.isLoaded = true;
}
addMoreData() {
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];
this.addMoreDataCounter++;
}
onLoadMoreHandler() {
console.log('load more');
this.addMoreData();
if(this.addMoreDataCounter === 4) {
this.isLoaded = false;
}
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>46.0</apiVersion>
<description>Scroll Issue</description>
<isExposed>true</isExposed>
<masterLabel>Scroll Issue</masterLabel>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
- In this example,
enable-infinite-loading
is turned off after the fourth call toaddMoreData()
to prevent the application from crashing. - This component is being used in a single column Lightning App Builder page, where it is the only component.
- This example is intentionally simplified to generate data on the client side, in order to reproduce the issue in a way that is easy to share.