Last active
June 10, 2020 03:54
-
-
Save JitendraZaa/e45244d3f6095b3cd1d46616c0178c2b to your computer and use it in GitHub Desktop.
Infinite Lightning Data Table Scrolling using @wire decorator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
} | |
); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @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; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @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