0

I am trying to implement infinite loading purely from js by using onscroll event in my LWC.

Html:

<template>
    <!--Some other html code-->

    <template if:true={showRecords}>
        <div class="table-container" onscroll={handleScroll}>
            <div class="scrollable-table">
                <lightning-datatable
                    key-field="Id"
                    data={recData}
                    columns={columns}
                    hide-checkbox-column
                    show-row-number-column
                >
                </lightning-datatable>
            </div>
        </div>
    </template>
    <template if:false={showRecords}>
        <p>No Records Found</p>
    </template>
</template>

Css:

.spinner-class{
    position: fixed;
    top:50%;
    left:50%;
    z-index:9051;
    transform:translate(-50%,-50%)rotate(90deg);
}
.table-container {
    height: 300px;
    overflow-y: auto;
}
.scrollable-table {
    height: fit-content;
}

JS:

import { LightningElement } from 'lwc';
import getARecs from '@salesforce/apex/FirstClass.getARecs';
import getBRecs from '@salesforce/apex/FirstClass.getBRecs';
//some more imports

const COLUMNS = [
                 //some columns
                ];


export default class SampleLWC extends LightningElement {

    columns = COLUMNS

    isLoading = false;
    
    recData = [];
    recMain = [];
    showRecords = false;

    selectedVal='A';
    
    someBoolean=false;

    pageSize = 20;
    lastIndex = 1;
    pageSizeF = 20;
    lastIndexF = 1;


    connectedCallback() {
        if (this.selectedVal === 'A') {
            this.fetchARecs();
        }
    }
    
    //some more logic
    
    handleData(data){
        this.recMain = JSON.parse(JSON.stringify(data));

        try{
            if(this.recMain.length <= this.pageSize){
                this.recData = [...this.recMain] ;
            }else{
                this.recData = this.recMain.slice(0,this.pageSize);
            }
            this.showRecords = this.recData.length > 0 ;
            
            this.isLoading = false;

        }catch(e){
            console.log('error:'+e);
        }
    
    }
    
    handleChange(event){
        this.selectedVal = event.detail.value;
        this.selectedVal === 'A' ? this.fetchARecs() : this.fetchBRecs();
    }
    
    handleScroll(event) {
        const target = event.target;
        if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
          this.loadMoreData();
        }
    }

    loadMoreData(){
        window.addEventListener('scroll',()=>{
            if(someBoolean){
                //logic to fetch more data if someBoolean is true
            }else{
                //logic to fetch more data if someBoolean is false
            }
        })
    }


}

Somehow, the handleScroll method doesnt get called when scrolling. But, strangely enough, when i right click and inspect and then try to scroll, it does get called and the loadMoreData works perfectly. Not sure why this is happening. What am i missing here?

1 Answer 1

0

lightning-datatable already provides JS-based infinite scrolling, and handles its own internal scrolling. As long as the scroll events are being caught by the table, your own handler will never fire. That's why inspecting the element can "fix" the problem. If you want to make your own custom scrolling, you likely won't be able to use lightning-datatable and will have to build one from the SLDS blueprints instead.

4
  • Thanks @sfdcfox . That must be the issue. But in the documentation it says To enable infinite scrolling, specify enable-infinite-loading and provide an event handler using onloadmore . Other than the custom table you mentioned is there any other workaround Commented Dec 22, 2023 at 6:59
  • @JackSparrow No, you'll need to specify enable-infinite-loading and use the onloadmore event. There's no way to use onscroll here, because the component itself uses that event.
    – sfdcfox
    Commented Dec 22, 2023 at 10:48
  • I have data-table wrapped in div. I have attached onscroll there. There also is not firing event. any guidance?
    – Ankuli
    Commented Jan 25 at 10:14
  • @Ankuli The datatable captures the onscroll, rather than letting it bubble up to the div. Use the onloadmore event.
    – sfdcfox
    Commented Jan 25 at 14:51

You must log in to answer this question.

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