Wrapper Class in LWC (Lightning Web Components)

In Salesforce development, an Apex class is used to create objects that hold values of fixed data types. For example, an Integer variable stores only integers, and a String variable stores only text.

However, when a developer needs to return multiple values of different types — such as a mix of Contact fields, Account fields, booleans, or even custom strings — a standard SObject is not enough.

This is where a Wrapper Class becomes extremely useful.

What Is a Wrapper Class?

A Wrapper Class is a custom Apex class that works as a container. It allows you to group different types of data together inside one object.

Key features:

• Can store multiple data types (String, Boolean, Objects, IDs, etc.)

• Helps return multiple values from Apex to LWC

• Useful for datatables, checkboxes, and combining related/unrelated objects

  
  

Creating a Wrapper Class Inside Apex

Wrapper classes are usually created inside an Apex controller.

public class Account_Controller {
	public class wrap_account_details {
		public Account acc {get; set;}
		public Boolean selected {get; set;}
	}
}

Initializing Wrapper Class Variables

Account acc_obj = [SELECT Id, Name FROM Account LIMIT 1];

wrap_account_details wrapperObj = new wrap_account_details();
wrapperObj.acc = acc_obj;
wrapperObj.selected = true;

Returning Wrapper Class Data

Return Single Wrapper Object

public static wrap_account_details Account_details(){
	wrap_account_details wrapperObj = new wrap_account_details();
	wrapperObj.acc = [SELECT Id, Name FROM Account LIMIT 1];
	wrapperObj.selected = true;
	return wrapperObj;
}

Return Multiple Records (List of Wrapper Objects)

List<wrap_account_details> wrapperList = new List<wrap_account_details>();

Populate inside a loop and return the list.

Real Project Example

Goal:

Return a combination of

• Contact fields

• Associated Account Name

• A custom string variable

• Display all data in a Lightning Datatable in LWC

This cannot be done using standard SObjects. So we build a wrapper class.

🧩 Apex Controller: Account_contact_wrapper_controller.cls

public class Account_contact_wrapper_controller {

@AuraEnabled(cacheable=true)
public static List<Account_Contact_Wrapper> getAllAccountWithContacts(){
        	List<Account_Contact_Wrapper> accWrapperList = new List<Account_Contact_Wrapper>();

		List<Contact> cont_list = [
				SELECT Id, Name, Phone, Email, Account.Name             
				FROM Contact 
				WHERE Account.Name != null LIMIT 5
];        

if(!cont_list.isEmpty()){
	for(Contact c : cont_list){
		Account_Contact_Wrapper w = new Account_Contact_Wrapper();
		w.accName = c.Account.Name;
         w.contactName = c.Name;
         w.contactEmail = c.Email;
         w.phoneNumber = c.Phone;
         w.textMessage = 'Have a Nice Day..!!';
		accWrapperList.add(w);
     }        
}
        return accWrapperList;
}

public class Account_Contact_Wrapper{
        @AuraEnabled public String accName;
        @AuraEnabled public String contactName;
        @AuraEnabled public String contactEmail;
        @AuraEnabled public String textMessage;
        @AuraEnabled public String phoneNumber;
    }

🧩 LWC HTML: Wrapperlwc_demo.html

<template>    
	<lightning-card title="Account with Contacts using Wrapper Class in LWC" icon-name="custom:custom63">
	<div class="slds-var-m-around_medium">
          <template if:true={accountsWithContacts}>
			<lightning-datatable 
				key-field="id"
				data={accountsWithContacts}
				columns={columns}>                
			</lightning-datatable>
		</template>

		<template if:true={error}>
 			{error}
		</template>
	</div>    
	</lightning-card>
</template>

🧩 LWC JS: Wrapperlwc_demo.js

import { LightningElement, wire } from 'lwc';
import getAllAccountWithContacts from '@salesforce/apex/Account_contact_wrapper_controller.getAllAccountWithContacts';

export default class WrapperClassExampleLWC extends LightningElement {
	columns = [{ label: 'Account Name', fieldName: 'accName' },
        		{ label: 'Contact Name', fieldName: 'contactName' },
        		{ label: 'Email', fieldName: 'contactEmail' }
    	];
    
	accountsWithContacts;
    error;

    @wire(getAllAccountWithContacts)
    wiredAccountsWithContacts({ error, data }) {
        if (data) {
            this.accountsWithContacts = data;
        } else if (error) {
            this.error = error;
        }
    }
}

🧩 Meta XML File: Wrapperlwc_demo.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>

Summary

In this article, we:

✔ Created a Wrapper Class inside an Apex controller

✔ Wrapped Contact fields + Account Name + Custom variables

✔ Added data into a wrapper list

✔ Returned the list to LWC

✔ Displayed everything using a Lightning Datatable

Wrapper classes are one of the most powerful concepts when building scalable LWC and Apex applications.