Fix LWC Datatable Filtering with Infinite Scroll

Fix LWC Datatable Filtering with Infinite Scroll

On September 10, 2025, Posted by , In Lightning web components, With Comments Off on Fix LWC Datatable Filtering with Infinite Scroll
lwc-datatable-filter-scroll

Question

I am building a Lightning Web Component (LWC) that displays data in a custom datatable with infinite scrolling enabled. The table initially loads five records, and then fetches more in batches when the onloadmore event is triggered. This part works fine.

The problem occurs when I apply a filter. For example, if I filter on Notification Type = Email, I expect to see only one record. Instead, I see three: one that matches the filter and two others that were appended by the infinite scroll handler. This happens because the getMetadata Apex call still returns more records, and the infinite scroll handler adds them directly to this.data, ignoring the filter.

Additionally, after applying a filter, I reset the infinite scroll flags so the user can continue scrolling. However, the table does not scroll back to the top. Instead, it stays at its previous scroll position, which feels inconsistent compared to the initial load where the user starts from the first record.

My questions are:

  1. How can I ensure that infinite scrolling respects the applied filter instead of appending unfiltered records?
  2. How can I reset the datatable scroll position back to the top after applying a filter, without scrolling the entire browser window?

Answer

For the first issue, you need to reapply the filter whenever new data is fetched during infinite scrolling. Currently, your infinite load handler simply concatenates new rows to this.data. To fix this, track the active filter criteria and apply it to new records before appending. For example:

handleLoadMoreData(event) {
    if (event.target) {
        event.target.isLoading = true;
    }

    this.tableElement = event.target;
    this.loadMoreStatus = 'Loading';
    this.queryOffset += this.queryLimit;

    getMetadata({
        loadedPicklist: this.loadedPicklist,
        offsetRecords: this.queryOffset,
        limitRecords: this.queryLimit
    }).then((data) => {
        let newData = this.addPicklistVals(data.metaRecords);

        // Apply active filter if one exists
        if (this.activeFilter) {
            newData = this.applyFilterLogic(newData, this.activeFilter);
        }

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

        this.loadMoreStatus = '';
        if (data.metaRecords.length === 0) {
            this.tableElement.enableInfiniteLoading = false;
            this.loadMoreStatus = 'No more data to load';
        }

        this.tableElement.isLoading = false;
    });
}

This code handles the infinite scroll event when the user reaches the bottom of the table. It sets the table’s loading spinner and increments the offset to fetch the next batch of records. After fetching data from Apex, it enriches the records with picklist values and applies any active filter. Finally, it appends the filtered records to this.data and updates the infinite loading status.

In your handleFilter method, save the filter criteria into this.activeFilter so that infinite scrolling can respect the current filter. For the second issue, you cannot use window.scrollTop() because that affects the whole browser window. Instead, reset the scroll position on the specific datatable container. Since your table is wrapped in a div with a fixed height, you can do this:

handleFilter(event) {
    this.data = event.detail.data;
    this.queryOffset = 0;
    this.activeFilter = event.detail.filter; // store active filter

    this.tableElement = this.template.querySelector('c-custom-datatable');

    if (this.data.length === 0) {
        this.tableElement.enableInfiniteLoading = false;
        this.loadMoreStatus = 'No more data to load';
        this.tableElement.isLoading = false;
    } else {
        this.tableElement.enableInfiniteLoading = true;
        this.loadMoreStatus = '';
        this.tableElement.isLoading = false;
    }

    // Reset scroll position for the datatable container
    const tableContainer = this.template.querySelector('div[style*="height: 200px"]');
    if (tableContainer) {
        tableContainer.scrollTop = 0;
    }
}

This code applies the filter to the dataset and resets the offset so infinite scrolling can restart from the top. It stores the active filter so subsequent handleLoadMoreData calls can respect it. Depending on the data length, it either disables or enables infinite scrolling. Finally, it resets the scroll position of the table container so the user sees the first row at the top.

By tracking the active filter and resetting the container’s scroll position, your datatable will correctly apply filtering and behave consistently with infinite scrolling.

Enroll for Career-Building Salesforce Training with 100% Money Back Guarantee

Our Salesforce course is designed to provide you with a comprehensive understanding of the Salesforce platform, empowering you with the essential skills to thrive in the CRM industry. The course covers key topics such as Salesforce Admin, Developer, and AI, seamlessly integrating theory with practical application. By engaging in hands-on projects and assignments, you’ll develop the expertise to solve real-world business challenges using Salesforce solutions. Our expert trainers ensure you gain the technical knowledge and industry insights needed to excel in the Salesforce ecosystem.

In addition to technical skills, our Salesforce Training in Mysore offers personalized mentorship, certification guidance, and interview coaching to support your career growth. You’ll have access to a wide range of study materials, live projects, and dedicated support throughout the course. By the time you complete the program, you will be well-prepared for certification exams and equipped with the problem-solving skills that employers value. Start your Salesforce career today and unlock a world of opportunities. Sign up for a free demo now!

← →
Comments are closed.