Wrapper class in LWC Datatable Salesforce

by Rijwan Mohmmed
0 comment

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 :

  1. A wrapper class is like a custom object defined by a developer, which defines the wrapper class properties.
  2. A wrapper or container class is a class, a data structure that contains different objects or collections of objects as its members.
  3. For details about how we can use the wrapper class on the Visualforce page check the wrapper class in Apex.


Wrapper-classes- Datatable-in-LWC-Salesforce-techdicer

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 {

    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{
        public Account acc;
        public Integer totalContact;
        public String billingAddress;
        public String accountLink;
        public String accountName;
        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 :

    <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>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
										<span>Wrapper Class LWC Datatable</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
	</div> <br/>

    <lightning-card title="Wrapper Class LWC Datatable" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <template if:true={data}>
            <template if:true={error}>


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',
            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 ;

    wiredAccounts({error, data}) {
        if (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">

Output :


Reference :

  1. Apex Developer Guide

You may also like

Leave a Comment