In Salesforce Lightning data tables, we can add some dynamic functionality, such as updating the headers dynamically based on user input.
Instead of changing the column headers through code, we can define the LWC component so that the user can change them directly in the Salesforce Lightning app builder.
In this Salesforce tutorial, we will learn how to create an LWC data table that allows us to update headers in the Salesforce LWC data table dynamically.
Update Headers Dynamically in Salesforce LWC Data Table
In this example, I will display sample data in the table defined in the LWC component’s JS file.
1. Create an LWC component and enter the code below in the HTML file.
Here, data and columns will map the table data and columns defined in the JS file.
<template>
<lightning-datatable
key-field="id"
data={data}
columns={columns}
></lightning-datatable>
</template>2. In the JS file, we will define the data to render in the Lightning Data Table. In the data, I have defined the column values that will be displayed in the data table.
In this code, we have exposed the column headers as public using the @api decorator and entered default header values for Column 1, Column 2, and Column 3.
import { LightningElement, api } from 'lwc';
export default class DynamicDataTable extends LightningElement {
@api column1Header = 'Column 1';
@api column2Header = 'Column 2';
@api column3Header = 'Column 3';
data = [
{ id: '1', Name: 'Steven', Email: 'steve12@mail.com', Profile: 'Developer' },
{ id: '2', Name: 'Brayan', Email: 'br1452@mail.com', Profile: 'Admin' }
];
get columns() {
return [
{ label: this.column1Header, fieldName: 'Name', type: 'text' },
{ label: this.column2Header, fieldName: 'Email', type: 'email' },
{ label: this.column3Header, fieldName: 'Profile', type: 'text' }
];
}
}3. Enter the code below in the meta.xml file to make the component visible to the Lightning app pages.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>63.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage,lightning__AppPage,lightning__HomePage">
<property name="column1Header" type="String" label="Column 1 Header" default="Column 1" />
<property name="column2Header" type="String" label="Column 2 Header" default="Column 2" />
<property name="column3Header" type="String" label="Column 3 Header" default="Column 3" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>4. Now, when we deploy the LWC component using the Lightning App Builder, on the right side, it will display the input fields with default header values.
Enter the new values in the input fields and save the changes.
Now, the default headers of the Lightning data table will be replaced by the updated header values.
This way, we can update headers dynamically in the LWC data table in Salesforce by following the above steps.
Update Headers Dynamically in the Salesforce LWC Data Table for Object Records
In this example, we will fetch the data dynamically from the account object with a controller class, and the headers of these data table columns will be modified dynamically through the Lightning App Builder.
1. First, create a controller class that fetches the data dynamically and displays it in the Lightning Data Table.
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts() {
return [SELECT Id, Name, Industry, Phone FROM Account LIMIT 10];
}
}2. Enter the code below in the HTML file to render the UI of the data table.
<template>
<lightning-card title="Dynamic Data Table " icon-name="standard:account">
<div class="slds-m-around_medium">
<template if:true={tableData}>
<lightning-datatable
key-field="Id"
data={tableData}
columns={columns}
hide-checkbox-column
></lightning-datatable>
</template>
</div>
</lightning-card>
</template>3. After this, enter the code below in the JS file. In this, we have imported the controller class to get the account records.
In LWC, we don’t have any default functionality to modify the column header. For this, we have used the @api decorator, which exposes properties and methods as public, allowing parent components to access and modify them.
Here, we have entered the default value for the headers, such as column1Label = ‘Column 1’ for the first column.
After, we have included it in the columns array, which will be displayed in the table.
import { LightningElement, api, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
export default class DynamicDataTable extends LightningElement {
@track columns = [];
@track tableData = [];
@track isLoading = false;
@api column1Label = 'Account Name';
@api column2Label = 'Account Industry';
@api column3Label = 'Account Phone';
get dynamicColumns() {
return [
{ label: this.column1Label, fieldName: 'Name', type: 'text' },
{ label: this.column2Label, fieldName: 'Industry', type: 'text' },
{ label: this.column3Label, fieldName: 'Phone', type: 'phone' }
];
}
connectedCallback(){
this.fetchData();
}
fetchData() {
this.isLoading = true;
getAccounts()
.then(result => {
this.tableData = result;
this.columns = this.dynamicColumns;
this.isLoading = false;
})
.catch(error => {
console.error('Error fetching data:', error);
this.isLoading = false;
});
}
handlePropertyChange() {
this.columns = this.dynamicColumns;
}
}4. Enter the code below in the meta.xml file to expose the component to the Lightning pages.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>63.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__AppPage,lightning__RecordPage,lightning__HomePage">
<property name="column1Label" type="String" label="Column 1 Label" default="Account Name" />
<property name="column2Label" type="String" label="Column 2 Label" default="Account Industry" />
<property name="column3Label" type="String" label="Column 3 Label" default="Account Phone" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>In the meta.xml file, we have included a property element to enclose a list of table properties such as name, type, and label.
5. Deploy the LWC component to the Lightning data table via the Lightning app builder.
In the Lightning app builder, after adding the component, we will see input fields on the right side for the header columns.
6. In the Input fields, enter the header values that you want to replace with the default ones. We have to update the values through the Lightning app builder every time we need to update the header columns in the data table.
This way, we can update the headers dynamically in the Salesforce LWC data table for the dynamically fetched records.
Conclusion
In this Salesforce LWC tutorial, we have learned how to update headers dynamically in the Salesforce LWC data table. In the above steps, we created a lightning data table with editable table headers that we can edit from the Lightning App Builder.
To implement this, we used the @api decorator that makes class properties or methods public, which means they can be set by parent components in the template.
You may also like to read.
- Export Data in CSV File From LWC Lightning Data Table
- Display Toast Notifications in Lightning Web Components (LWC)
- Add a Picklist In LWC Data Table
- Dynamic Filters for Salesforce LWC Lightning Datatable
I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.
