Infinite Scroll In LWC DataTable Using @wire Getting Error For FetchData

javascriptlightning-web-componentslwc-wire-adapterscrolling

The Salesforce documentation for LWC datatable indicates fetchData(50) but doesn't define it. In my case I am using @wire(apexMethod) to populate the data but getting understandable error

fetchData is not defined

I'm not even clear if this has to be done completely differently given that I am using @wire for the table data with a general SELECT <Confirmations__c> WHERE... and getting all data at once.

export default class recordTableLastMonthConfirmations extends LightningElement {
  error;
  columns = columns;
  loadMoreStatus;
  @api totalNumberOfRows;

  @wire(getConfirmationList)
  confirmations;

  handleSave(event) {
    this.saveDraftValues = event.detail.saveDraftValues;
  }

  // The method onsort event handler
  onHandleSort(event) {
    var fieldName = event.detail.fieldName;
    var sortDirection = event.detail.sortDirection;
    // assign the latest attribute with the sorted column fieldName and sorted direction
    this.sortedBy = fieldName;
    this.sortedDirection = sortDirection;
    this.confirmations = this.sortData(fieldName, sortDirection);
  }

  // Supports infinite scrolling
  loadMoreData(event) {
    //Display a spinner to signal that data is being loaded
    event.target.isLoading = true;
    //Display "Loading" when more data is being loaded
    this.loadMoreStatus = 'Loading';
    fetchData(50).then((confirmations) => {
      if (confirmations.length >= this.totalNumberOfRows) {
        event.target.enableInfiniteLoading = false;
        this.loadMoreStatus = 'No more data to load';
      } else {
        const currentData = this.confirmations;
        //Appends new data to the end of the table
        const newData = currentData.concat(confirmations);
        this.confirmations = newData;
        this.loadMoreStatus = '';
      }
      event.target.isLoading = false;
    });
  }
}

The table loads fine but throws the error in scratch org and just hangs on the spinner in preview.
Tried:

  1. fetch(confirmations)(50).then((confirmations)
  2. fetchConfirmations(50).then((confirmations)

Seen these sites but they are not using @wire to populate the table or slightly different issues:

  1. Infinite scroll in lightning datatable in LWC increments offset multiple times
  2. LWC lightning-datatable Infinite Scrolling Not Working

What is the proper method for the loadMoreData(event) in this case?

Best Answer

fetchData is simply an example method used in the doc, indicating that you should define a method to "fetch more data".

Basically, you need handle the "fetching data" part with your own function.

Related Topic