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.
Best Answer
If you carefully observe the definition of when datatable fired
loadmore
event in documentationAs you are not restricting the height, it is firing the events as long as it reaches
enable-infinite-loading
to be false. As the scroll is internally implemented in datatable, If you are not restricting height, the page height is considered full view and thinks that user has reached the end of scroll. Try below:style="height: 15rem;"
restricts the height to 15rem.