Wrapper class in LWC Datatable Salesforce
Hello friends, today we will learn the Wrapper class in LWC Datatable Salesforce. We all know it’s very easy to show Datatable where we query the data from any object and put data in Datatable. But by wrapper class, there are multiple efforts we need to put in LWC.
Key Highlights :
- A wrapper class is like a custom object defined by a developer, which defines the wrapper class properties.
- A wrapper or container class is a class, a data structure that contains different objects or collections of objects as its members.
- For details about how we can use the wrapper class on the Visualforce page check the wrapper class in Apex.
Code :
Wrapper Class in LWC Example: First of all, we create a wrapper class where we can create the user-defined variables and can put multiple object data. We will show account fields as a wrapper class like address will be comma-separated, Owner link, total contact, etc.
AccountWrapper.cls :
public class AccountWrapper {
@AuraEnabled(cacheable=true)
public static List<AccountWrapperClass> fetchWrapperData(){
List<AccountWrapperClass> wrapperList = new List<AccountWrapperClass>();
for(Account acc : [SELECT Id, Name, billingStreet, billingCity, billingState, billingCountry, Type, (SELECT Id FROM Contacts) FROM Account WHERE Name != '' LIMIT 10]){
wrapperList.add(new AccountWrapperClass(acc, acc.Contacts.SIZE()));
}
return wrapperList;
}
public class AccountWrapperClass{
@AuraEnabled
public Account acc;
@AuraEnabled
public Integer totalContact;
@AuraEnabled
public String billingAddress;
@AuraEnabled
public String accountLink;
@AuraEnabled
public String accountName;
@AuraEnabled
public String type;
public AccountWrapperClass(Account acc, Integer totalContact){
this.acc = acc;
this.totalContact = totalContact;
this.accountLink = '/' + acc.Id;
this.accountName = acc.Name;
this.type = acc.Type;
this.billingAddress = acc.billingStreet + ',' + acc.billingCity + ',' + acc.billingState + ','+ acc.billingCountry;
}
}
}
WrapperLWCDatatableTechdicer.Html :
<template>
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Wrapper Class LWC Datatable</span>
<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<lightning-card title="Wrapper Class LWC Datatable" icon-name="standard:account">
<div class="slds-m-around_medium">
<template if:true={data}>
<lightning-datatable
data={data}
columns={columns}
key-field="id"
hide-checkbox-column
>
</lightning-datatable>
</template>
<template if:true={error}>
{error}
</template>
</div>
</lightning-card>
</template>
WrapperLWCDatatableTechdicer.Js: Fetch the data by wire and set in track variable data and show in LWC Datatable.
import { LightningElement, wire, track} from 'lwc';
import fetchWrapperData from '@salesforce/apex/AccountWrapper.fetchWrapperData';
const columns = [
{
label: 'Account Name',
fieldName: 'accountLink',
type:'url',
typeAttributes: {
label: {
fieldName: 'accountName'
},
target : '_blank'
}
},
{
label: 'Type',
fieldName: 'type',
type: 'text',
sortable: true
},
{
label: 'Total Contact',
fieldName: 'totalContact',
type: 'Number',
sortable: true
},
{
label: 'Billing Address',
fieldName: 'billingAddress',
type: 'text',
wrapText: true,
},
];
export default class WrapperLWCDatatableTechdicer extends LightningElement {
@track columns = columns
@track error;
@track data ;
@wire(fetchWrapperData)
wiredAccounts({error, data}) {
if (data) {
console.log(data);
this.data = data;
} else if (error) {
this.error = error;
}
}
}
WrapperLWCDatatableTechdicer.Js-meta.xml: Exposed this LWC Component and set the target Homepage.
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output :
Reference :
What’s your Reaction?
+1
7
+1
+1
+1
+1
+1
Total views : 1106263
1 comment
this is very helpful