Lazy loading in Lightning Web Component
1) Apex Class with offSet
2) Lightning web component with Datatable
Step 1)
Apex Class with offSet
LazyLoadingController
public with sharing class LazyLoadingController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts(Integer limitSize, Integer offset){
List<Account> accountList = [SELECT Id,Name,Rating
FROM Account
ORDER BY CreatedDate
LIMIT :limitSize
OFFSET :offset
];
return accountList;
}
}
Step 2) Lightning web component with Datatable
Create lightning web component in your sandbox or developer org
lazyLoadingLWCDemo.html
<template>
<div style="height:500px">
<lightning-datatable key-field="Id"
data={accounts}
columns={columns}
enable-infinite-loading
onloadmore={loadMoreData}
hide-checkbox-column="true"
show-row-number-column="true">
</lightning-datatable>
</div>
</template>
To enable infinite scrolling, specify enable-infinite-loading and provide an event handler using onloadmore.
lazyLoadingLWCDemo.js
import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/LazyLoadingController.getAccounts';
const columns = [
{ label: 'Id', fieldName: 'Id', type: 'text' },
{ label: 'Name', fieldName: 'Name', type: 'text'},
{ label: 'Rating', fieldName: 'Rating', type: 'text'}
];
export default class LazyLoadingLWCDemo extends LightningElement {
accounts=[];
error;
columns = columns;
rowLimit =25;
rowOffSet=0;
connectedCallback() {
this.loadData();
}
loadData(){
return getAccounts({ limitSize: this.rowLimit , offset : this.rowOffSet })
.then(result => {
let updatedRecords = [...this.accounts, ...result];
this.accounts = updatedRecords;
this.error = undefined;
})
.catch(error => {
this.error = error;
this.accounts = undefined;
});
}
loadMoreData(event) {
const currentRecord = this.accounts;
const { target } = event;
target.isLoading = true;
this.rowOffSet = this.rowOffSet + this.rowLimit;
this.loadData()
.then(()=> {
target.isLoading = false;
});
}
}
lazyLoadingLWCDemo.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Building greater futures through innovation and collective knowledge
Tech SkillBirds Enterprise is an IT services, consulting and business solutions organization that has been partnering with many of the world’s largest businesses for the past 13 years. We believe innovation and collective knowledge can transform all our futures with greater purpose.
Website : www.techskillbirds.com
Telegram : https://t.me/techskillbirds
What's Up : +91 63010 61963
Facebook : profile.php?id=61565870777368
Instagram : techskillbirds/
LinkedIn : company/skillbirds-acquire-enterprise/
YouTube : /@techskillbirds638/videos
Pinterest : TechSkillBirds/
Twitter : @techskillbirds
urbanpro : hyderabad/tech-skillbirds-enterprise-hitec-city/32237376
JustDail : Hyderabad/Tech-Skillbirds-Enterprise-Secunderabad-City
Indiamart: skillbirds-acquire-enterprise/
About Us : https://www.techskillbirds.com/
Services : https://www.techskillbirds.com/blank-1
Buy Services : https://www.techskillbirds.com/book-o...
Corporate Trainings : https://www.techskillbirds.com/shop
Software Training : https://www.techskillbirds.com/s-proj...
Blog : https://www.techskillbirds.com/blog
Contact Us : https://www.techskillbirds.com/about-1
Plans & Pricing : https://www.techskillbirds.com/plans-...
Comments