Building Lazy Loading in LWC Lightning Datatable: A Full Dynamic Working Code

Introduction:

In this blog post, we will explore how to implement lazy loading functionality in Lightning Web Components (LWC) using the Lightning Datatable component. Lazy loading is a technique that loads data dynamically as the user scrolls, resulting in improved performance and reduced initial load time. We will provide a step-by-step guide along with a full working code example to help you understand and implement this functionality in your LWC projects.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of LWC and be familiar with building Lightning components in Salesforce. You should also have access to a Salesforce Developer Edition org or any org where you can create LWC components and work with data.

Step 1: Set up the Project

Before we dive into the code, let's set up our LWC project. Assuming you have the Salesforce CLI installed, follow these steps:

1. Open the terminal or command prompt.
2. Create a new directory for your project: mkdir lwc-infinite-loading
3. Navigate to the project directory: cd lwc-infinite-loading
4. Create a new LWC component: sfdx force:lightning:component:create --type lwc -n InfiniteDataTable

Step 2: Implementing the LWC Component

Open the newly created component directory: cd force-app/main/default/lwc/InfiniteDataTable

In the InfiniteDataTable.js file, remove the existing code and replace it with the following:

import { LightningElement, wire } from 'lwc';

import { loadScript } from 'lightning/platformResourceLoader';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import fetchData from '@salesforce/apex/YourApexController.fetchData';

export default class InfiniteDataTable extends LightningElement {

    data = [];

    page = 1;

    pageSize = 10;

    isLoading = false;

    connectedCallback() {

        this.loadData();

    }

    @wire(fetchData, { page: '$page', pageSize: '$pageSize' })

    wiredData({ error, data }) {

        if (data) {

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

            this.isLoading = false;

        } else if (error) {

            this.dispatchEvent(

                new ShowToastEvent({

                    title: 'Error',

                    message: error.body.message,

                    variant: 'error'

                })

            );

            this.isLoading = false;

        }

    }

    loadData() {

        this.isLoading = true;

        this.page++;

    }

    handleScroll() {

        const container = this.template.querySelector('.datatable-container');

        const scrollHeight = container.scrollHeight;

        const scrollTop = container.scrollTop;

        const clientHeight = container.clientHeight;

        if (scrollTop + clientHeight >= scrollHeight) {

            this.loadData();

        }

    }

}

Step 3: Implement the Lightning Datatable Markup

In the InfiniteDataTable.html file, remove the existing code and replace it with the following:

<template>

    <div class="datatable-container" onscroll={handleScroll}>

        <lightning-datatable

            key-field="Id"

            data={data}

            columns={columns}

            hide-checkbox-column="true"

            show-row-number-column="true"

            onloadmore={loadData}

        ></lightning-datatable>

        <div if:true={isLoading} class="loading-indicator">

            Loading...

        </div>

    </div>

</template>

Step 4: Styling the Component

In the InfiniteDataTable.css file, add the following CSS to style the loading indicator:

.datatable-container {

    height: 400px; /* Adjust the height as per your requirements */

    overflow-y: auto;

    border: 1px solid #d3d3d3;

}

.loading-indicator {

    text-align: center;

    margin-top: 1rem;

}

Step 5: Apex Controller - fetchData

Create an Apex class (if not already existing) to handle the server-side logic for fetching data in a paginated manner. Replace YourApexController in the fetchData method with the appropriate Apex class and method.

public with sharing class YourApexController {

    @AuraEnabled(cacheable=true)

    public static List<sObject> fetchData(Integer page, Integer pageSize) {

        Integer offset = (page - 1) * pageSize;

        // Fetch and return data from the server using OFFSET and LIMIT

        return [SELECT Id, Name FROM YourObject LIMIT :pageSize OFFSET :offset];

    }

}

Conclusion:

Congratulations! You have successfully implemented infinite/lazy loading functionality in an LWC Lightning Datatable. By following this step-by-step guide and using the provided code, you now have a dynamic table that loads data as the user scrolls. This approach significantly improves the performance of large datasets by reducing the initial load time.

Feel free to customize the code based on your specific requirements, such as modifying the number of records to load per page or adding additional columns to the datatable.

Remember to deploy your component to your Salesforce org and test it in a Lightning App or Lightning Record Page to see the infinite loading in action.

Happy coding!