Infinite scroll in LWC datatable is calling the loadMoreData()
function multiple times. This increments the offset multiple times but wire is not called multiple times and hence some data gets skipped while loading. Also, the spinner at the end is not showing. I used wire to get the data from database. I am not able to figure out why datatable is making multiple function calls. I did research but was not able to figure out the reason. Please guide. Thanks!
I checked these sites:
- https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation
- https://salesforcespace.blogspot.com/2020/02/lwc-audit-log-viewer-using-infinite.html
HTML
<div class="slds-table_col-bordered slds-table_bordered slds-table_striped" style="height:15rem;">
<lightning-datatable key-field="id" data={data} columns={columns} onrowselection={handleRowActions} default-sort-direction={defaultSortDirection}
sorted-direction={sortDirection}
sorted-by={sortedBy}
onsort={onHandleSort}
enable-infinite-loading
onloadmore={loadMoreData}>
</lightning-datatable>
</div>
Javascript
@wire(downloadRelatedListControllerLWC, { Id: '$recordId',PageSize: '$PageSize',counterLWC:'$counter' }) wired(result) {
window.console.log('in wire - pagesize:'+this.PageSize+'counter:'+this.counter);
this.refreshTable = result; //for refreshing the datatable
//rest of wire code here
}
loadMoreData(event) {
window.console.log('inside load more data');
event.target.isLoading = true; //showing the spinner
if(this.count.data > this.counter){
event.target.isLoading = false; //hiding the spinner
window.console.log('incrementing counter'+this.counter);
this.counter=this.counter+10; //This statement is called multiple times. Hence offset is incremented multiple times
window.console.log('incremented counter'+this.counter);
return refreshApex(this.refreshTable); //calling the wire. Wire is not called multiple times when offset is incremented. Offset is incremented 2-3 times and then wire is incremented
}
}
Debug logs:
Red represents scrolls and yellow represents calls
Updates
If I use constructor instead of wire to access apex code, I get the following error