0

I created lightning-datatable lwc component with lazy-loading data, if user scrolling bottom. But I have not idea, how to read scroll position property lightning-datatable element, if user scroll to top, for realize lazy-loading in both horizontal sides. Html sample:

<div style='height: 400px' if:true={columnsReady}> <lightning-datatable data={accounts} columns={columns} key-field="Id" enable-infinite-loading onloadmore={loadMoreData} > </lightning-datatable> </div>

JS:

 @api fieldSet;
@track accounts;
columns;
@track columnsReady = false;

loadMoreData(event) {
    event.target.isLoading = true;
    getMoreAccounts({account: this.accounts[this.accounts.length - 1]})
        .then((data) => {
            this.accounts = this.accounts.concat(data);
        })
        .catch((error) => {
            alert('Failed load rows. Error - ' + error);
        });
    event.target.isLoading = false;
}

connectedCallback() {
    getColumns({fs: this.fieldSet})
        .then((data) => {
            this.columns = JSON.parse(data);
            this.columnsReady = true;
        })
        .catch((error) => {
            alert('Failed load columns. Error - ' + error);
        });
    getAccounts({fieldSet: this.fieldSet})
        .then((data) => {
            this.accounts = data;
        })
        .catch((error) => {
            alert('Failed load start rows. Error - ' + error);
        });
}

1 Answer 1

2

Infinite Scrolling only works in the downward direction. It is intended that a developer will never remove the original rows of content while scrolling down. There's no way to read the internals of the lightning:datatable to figure out when the user has returned to the top of the table, as far as I can tell. If you need this feature, you'll have to write your own custom data table component.

You must log in to answer this question.

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