Infinite/lazy loading In LWC Lightning Datatable

by Rijwan Mohmmed
0 comment
infinite-lazy-loading-in-lwc-lightning-datatable-techdicer

Hello friends, we will discuss how to show Infinite/lazy loading In LWC Lightning Datatable. That way we don’t need pagination and by scrolling, we will load the following data in the LWC Datatable. Here We will load the data on the Client Side.

Also, check this: Pass value from child LWC to parent AURA component

lightning-datatable-infinite--lazy-loading-in-lwc-output-techdicer
lightning-datatable-infinite–lazy-loading-in-lwc-output-techdicer

Key Highlights:

  1. Load the data on scroll.
  2. Save extra space for the pagination button.
  3. More user-friendly.
  4. Load data on the Client-Side.

Code :

LWCLazyLoadingCtrl.cls :

public class LWCLazyLoadingCtrl {    
    @AuraEnabled
    public static List<Account> getAccountData() {
        return [SELECT Id, Name, Type, Phone, CreatedDate FROM Account LIMIT 50000];
    }
 }

lWCLazyLoading.HTML :

<template>
	<!-- create card -->
	<lightning-card variant="Narrow" title="LWC Datatable Infinite/Lazy Loading" icon-name="standard:recipe">
		<div class="slds-var-p-around_small" style="height: 400px;">
			<lightning-datatable key-field="Id" data={data} columns={columns} load-more-offset="20"
				onloadmore={handleLoadMore} enable-infinite-loading hide-checkbox-column show-row-number-column>
			</lightning-datatable>
		</div>
	</lightning-card>	
		
 </template>

lWCLazyLoading.JS :

import { LightningElement } from 'lwc';
import getAccountData from '@salesforce/apex/LWCLazyLoadingCtrl.getAccountData';
const columns = [
    {
        label: 'Account Name', fieldName: 'linkAccount', type: 'url',
        typeAttributes: {
            label: { fieldName: 'Name' },
            target: '_blank'
        }
    },
    { label: 'Type', fieldName: 'Type', type: 'text' },
    { label: 'Phone', fieldName: 'Phone', type: 'text' },
    { label: 'Created Date', fieldName: 'CreatedDate', type: 'date',
            typeAttributes: {
            day: "numeric",
            month: "numeric",
            year: "numeric"
        } 
    }
 ];
 export default class LWCLazyLoading extends LightningElement {
    columns = columns;
    data = [];
    items = [];
    error;
    totalNumberOfRows = 100; // stop the infinite load after this threshold count
    recordCount = 20;
    loadMoreStatus;
    totalRecountCount = 0;
    targetDatatable; // capture the loadmore event to fetch data and stop infinite loading
    connectedCallback() {
        this.getData();
    }
    getData(){
        getAccountData({})
        .then(result => {
            result = JSON.parse(JSON.stringify(result));
            result.forEach(record => {
                record.linkAccount = '/' + record.Id;
            });
            this.totalRecountCount = result.length;
            this.items = [...this.items, ...result];
            this.data = this.items.slice(0, this.recordCount); 
            this.error = undefined;
        }).catch(error => {
            this.error = error;
            this.data = undefined;
            this.items = undefined;
        });
    }
    getRecords() {
        this.recordCount = (this.recordCount > this.totalRecountCount) ? this.totalRecountCount : this.recordCount; 
        this.data = this.items.slice(0, this.recordCount);
        this.loadMoreStatus = '';
        if (this.targetDatatable){
            this.targetDatatable.isLoading = false;
        }
    }
    // Event to handle onloadmore on lightning datatable markup
    handleLoadMore(event) {
        event.preventDefault();
        // increase the record Count by 20 on every loadmore event
        this.recordCount = this.recordCount + 20;
        //Display a spinner to signal that data is being loaded
        event.target.isLoading = true;
        //Set the onloadmore event taraget to make it visible to imperative call response to apex.
        this.targetDatatable = event.target;
        //Display "Loading" when more data is being loaded
        this.loadMoreStatus = 'Loading';
        // Get new set of records and append to this.data
        this.getRecords();
    }
 }

Output:

lightning-datatable-infinite--lazy-loading-in-lwc-output-techdicer
Infinite / lazy loading In LWC Lightning Datatable-output-techdicer

Reference:

  1. LWC datatable

You may also like

Leave a Comment