Skip to content

Instantly share code, notes, and snippets.

@JitendraZaa
Last active June 10, 2020 03:54
Show Gist options
  • Save JitendraZaa/e45244d3f6095b3cd1d46616c0178c2b to your computer and use it in GitHub Desktop.
Save JitendraZaa/e45244d3f6095b3cd1d46616c0178c2b to your computer and use it in GitHub Desktop.
Infinite Lightning Data Table Scrolling using @wire decorator
<template>
<div> <span class="slds-badge slds-badge_inverse badge"> Total Records in Table - {totalRecords} </span> </div>
<div style="height: 300px">
<lightning-datatable key-field="empId" data={dataRow} columns={columns} enable-infinite-loading="true"
onloadmore={loadMoreData} load-more-offset="20"
> </lightning-datatable>
</div>
</template>
import { LightningElement, track, wire } from 'lwc';
import wireCall from '@salesforce/apex/DataTableDemoController.wireCall';
const columns = [
{ label: 'Employee Name', fieldName: 'empName', type:"text" },
{ label: 'Phone', fieldName: 'empPhone' , type:'phone' },
{ label: 'Email', fieldName: 'empEmail' , type: 'email'},
{ label: 'Website', fieldName: 'empWebsite', type:"url" }
];
export default class Datatable_wire extends LightningElement {
maxRows=1000;
tableElement;
@track dataRow;
@track totalRecords;
columns = columns;
@wire( wireCall, {recToReturn : 10} )
wireMethodCallback({error,data}){
console.log('Callout JS');
console.log(data);
if(data){
this.dataRow = data;
this.totalRecords = data.length;
console.log(data );
console.log(this.dataRow );
}
}
loadMoreData(event) {
console.log('Load more JS made');
//Display a spinner to signal that data is being loaded
if(event.target){
event.target.isLoading = true;
}
this.tableElement = event.target;
//Display "Loading" when more data is being loaded
this.loadMoreStatus = 'Loading';
wireCall( {recToReturn : 10} )
.then((data) => {
console.log('Load more Call made');
const currentData = this.dataRow;
//Appends new data to the end of the table
this.dataRow = this.dataRow.concat(data);
this.loadMoreStatus = '';
this.totalRecords = this.dataRow.length;
if (this.dataRow.length >= this.maxRows) {
this.tableElement.enableInfiniteLoading = false;
this.loadMoreStatus = 'No more data to load';
}
if(this.tableElement){
this.tableElement.isLoading = false;
}
}
);
}
}
/**
* @desc Apex Controller class for LWC Data Table Demo
* @Author Jitendra Zaa
* @Date June 4 2020
*/
public with sharing class DataTableDemoController {
public class DataTableWrapper{
@AuraEnabled
public String empName;
@AuraEnabled
public String empEmail;
@AuraEnabled
public String empPhone;
@AuraEnabled
public String empWebsite;
@AuraEnabled
public String empId;
}
@AuraEnabled(cacheable=false)
public static List<DataTableWrapper> imperativeCall(Integer recToReturn){
return getRandomEmployees(recToReturn);
}
@AuraEnabled(cacheable=true)
public static List<DataTableWrapper> wireCall(Integer recToReturn){
return getRandomEmployees(recToReturn);
}
private static List<DataTableWrapper> getRandomEmployees(Integer recToReturn){
List<DataTableWrapper> lstRet = new List<DataTableWrapper>();
for(Integer i=0;i<recToReturn;i++){
DataTableWrapper obj = new DataTableWrapper();
obj.empId = DummyData_Generator.generateRandomString(18);
obj.empName = DummyData_Generator.generateRandomString(15);
obj.empEmail = DummyData_Generator.getRandomEmail();
obj.empPhone = String.valueOf(DummyData_Generator.generateRandomNumber(10));
obj.empWebsite = DummyData_Generator.generateRandomString(15)+'.com';
lstRet.add(obj);
}
return lstRet;
}
}
/**
* @desc Temporary class to generate Dummy data quickly
* @Author Jitendra Zaa
* @Date June 4 2020
*/
public with sharing class DummyData_Generator {
/**
* @Description Generate random alpha numeric string of length X
*/
public static String generateRandomAlphaNumeric(Integer len) {
final String chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz';
String randStr = '';
while (randStr.length() < len) {
Integer idx = Math.mod(Math.abs(Crypto.getRandomInteger()), chars.length());
randStr += chars.substring(idx, idx+1);
}
return randStr;
}
/**
* @Description Generate random alpha numeric string of length X
*/
public static String generateRandomString(Integer len) {
final String chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
String randStr = '';
while (randStr.length() < len) {
Integer idx = Math.mod(Math.abs(Crypto.getRandomInteger()), chars.length());
randStr += chars.substring(idx, idx+1);
}
return randStr;
}
/**
* @Description Generate random Number of length X
*/
public static Decimal generateRandomNumber(Integer len) {
final String chars = '0123456789';
String randStr = '';
while (randStr.length() < len) {
Integer idx = Math.mod(Math.abs(Crypto.getRandomInteger()), chars.length());
randStr += chars.substring(idx, idx+1);
}
return Decimal.valueOf(randStr);
}
public static Integer generateRandomInteger(Integer len) {
final String chars = '0123456789';
String randStr = '';
while (randStr.length() < len) {
Integer idx = Math.mod(Math.abs(Crypto.getRandomInteger()), chars.length());
randStr += chars.substring(idx, idx+1);
}
return Integer.valueOf(randStr);
}
/**
* @Description Generate random date in future
*/
public static Date generateRandomDateInFuture(){
Integer daysinFuture = generateRandomInteger(3);
return Date.today().addDays(daysinFuture);
}
/**
* @Description Generate random date in past
*/
public static Date generateRandomDateInPast(){
Integer daysinFuture = generateRandomInteger(3);
return Date.today().addDays(-daysinFuture);
}
/**
* @Description Generate random email address
*/
public static String getRandomEmail(){
return generateRandomString(10)+'@'+generateRandomString(5)+'.com';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment