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.

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.isLoaded = true;

    addMoreData() {
        const offset = this.data.length;
        let newData = [];

        for(let i=offset + 1;i<=offset + 100; i++) {
                Id: i,
                Name: 'Test Row #' + i

        this.data = [...this.data, ...newData];


    onLoadMoreHandler() {
        console.log('load more');

        if(this.addMoreDataCounter === 4) {
            this.isLoaded = false;
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <description>Scroll Issue</description>
    <masterLabel>Scroll Issue</masterLabel>
  • In this example, enable-infinite-loading is turned off after the fourth call to addMoreData() 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.

1 Answer 1


If you carefully observe the definition of when datatable fired loadmore event in documentation

Determines when to trigger infinite loading based on how many pixels the table's scroll position is from the bottom of the table. The default is 20.

As 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:

    <div style="height: 15rem;">
        <lightning-datatable key-field="Id"

style="height: 15rem;" restricts the height to 15rem.

  • Dear God thank you! Also, just the CSS to limit the height worked for me with an out-of-control, load-until-everything's there lightning-datatable component. Dec 10, 2020 at 23:06
  • 2
    Using max-height would be preferable, in case the table only has a couple rows. But there's seems to possibly be a bug with this? See this post.
    – jbyrd
    Sep 22, 2021 at 4:12

You must log in to answer this question.

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