In Salesforce, using a Lightning Web Component, we can fetch and display the record data in a tabular format. In the Lightning data table, we can display, sort, and customise the records with enabled inline editing.
In this Salesforce tutorial, we will learn how to create a Lightning data table in Salesforce LWC, where we will cover the various features of a Salesforce Lightning data table and implement them step by step.
What is the Lightning data table in LWC?
In Salesforce Lightning web components, a Lightning data table is a customizable component that displays tabular data in a structured format.
The Lightning data table supports sorting, inline editing, row selection, pagination, and custom cell rendering. The data for the Lightning data table can be retrieved from Salesforce objects, custom Apex controllers, or even static data.
Create a Custom Lightning Data Table in Salesforce LWC
In the steps below, we are going to create a Lightning data table, and in this example, we will create a Lightning data table with manually entered data so that you can understand how it works.
To create a Lightning data table, we use the tag <lightning-datatable>, which supports various data types such as text, number, currency, date, email, phone, etc.
1. To create a Lightning data table, first create an LWC component and follow the code below in the HTML file.
<template>
<lightning-card title="LWC table with manual data"></lightning-card>
<lightning-datatable
key-field="id"
data={data}
columns={columns}
hide-checkbox-column="true">
</lightning-datatable>
</template>2. Now, enter the code below in the JS file, in which we have the data that we will display in the Lightning data table.
import { LightningElement, track } from 'lwc';
export default class DatatableExample extends LightningElement {
@track data = [
{ id: '1', name: 'Ema Evans', email: 'evans@mail.com', salary: 75000, joiningDate: '2024-01-15' },
{ id: '2', name: 'Jane Smith', email: 'smith@mail.com', salary: 85000, joiningDate: '2025-07-10' }
];
columns = [
{ label: 'Name', fieldName: 'name' },
{ label: 'Email', fieldName: 'email', type: 'email' },
{ label: 'Salary', fieldName: 'salary', type: 'currency' },
{ label: 'Joining Date', fieldName: 'joiningDate', type: 'date' }
];
}3. The LWC lightning data table is created and ready to deploy on the lightning page. To make the component available for the Lightning pages, enter the code below inside the LightningComponentBundle tag.
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>With this, the data table can be deployed on a Lightning app, record, and home page.
4. Go to the Lightning page, where you need to deploy the Lightning data table. There, click on the settings icon, then select Edit page.
5. From the custom components, drag and drop the LWC component to the Lightning page and click Save.
Now, on the Lightning page, you will see the data we have entered into the JavaScript file is displayed in a tabular format.
This way, we can display the data in a tabular format in the Salesforce Lightning data table.
Dynamically Fetch and Display data in the LWC data table
In this example, we will fetch and display the data dynamically, and for that, we will use the Opportunity object. In this lightning data table, we will fetch and display Opportunity records with and display them in the LWC data table.
To dynamically fetch the data in the Lightning table, will use the @wire decorator that will set up the connection between the controller class and the code logic to display data in JS code.
1. We are fetching the records dynamically, so we will create a controller class that will handle the logic to fetch the records.
public with sharing class OpportunityController {
@AuraEnabled(cacheable=true)
public static List<Opportunity> getOpportunities() {
return [SELECT Id, Name, Amount, CloseDate, StageName FROM Opportunity LIMIT 50];
}
}2. After defining the apex controller class, create a Lightning web component and enter the code below in the
<template>
<lightning-card title="LWC data table" icon-name="standard:opportunity">
<template if:true={data}>
<lightning-datatable
key-field="Id"
data={data}
columns={columns}
hide-checkbox-column="true">
</lightning-datatable>
</template>
</lightning-card>
</template>3. To handle the logic of displaying the fetched records in the Lightning data table, enter the code below in the JS file.
import { LightningElement, wire, track } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';
const columns = [
{ label: 'Opportunity Name', fieldName: 'Name' },
{ label: 'Stage', fieldName: 'StageName' },
{ label: 'Amount', fieldName: 'Amount' },
{ label: 'Close Date', fieldName: 'CloseDate'}
];
export default class OpportunityTable extends LightningElement {
@track data = [];
@track columns = columns;
@track error;
@wire(getOpportunities)
wiredOpportunities({ error, data }) {
if (data) {
this.data = data;
this.error = undefined;
} else if (error) {
this.error = error;
this.data = undefined;
}
}
}4. Now, make the component visible on the Lightning page, and enter the code below in the meta.xml file <LightningComponentBundle> tag.
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>5. Navigate to the Lightning page, click on the settings icon, and select Edit page.
6. Drag and drop the LWC component to the page region and click Save.
Now, we can see the Lightning data table on the lighting page with the fetched data of the Opportunity records.
This way, we can dynamically fetch and display data on the LWC Lightning data table in Salesforce.
Conclusion
In this Salesforce LWC tutorial, we have learned about the Lightning Data Table and how to create and deploy a data table on the Lightning page using Salesforce LWC. In the above steps, we have displayed the manually entered data in the Lightning data table.
To dynamically fetch and display data in the Lightning data table, we have used the Opportunity object.
You may also like to read:
- Implement Data Table with Inline Editing in LWC
- Call Apex Methods From LWC in Salesforce
- LWC in Salesforce
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.
