LWC lightning-datatable Infinite Scrolling Not Working

Question

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 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.

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"
                             columns={tableColumns}
                             data={data}
                             enable-infinite-loading={isLoaded}
                             onloadmore={onLoadMoreHandler}>
        </lightning-datatable>
    </div>

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