Today, I would like to share with you how to use Lightning Data Tables in LWC. I recently used it in one of my tasks. So, I thought, let’s share this with you guys as well.
Imagine opening a Salesforce app and instantly seeing all the data you need—neatly organised, easy to sort, and editable right from the table itself. That’s the magic of Lightning Data Tables in LWC! Whether you’re managing accounts, opportunities, or cases, data tables turn complex datasets into interactive, user-friendly experiences. In this blog, we’ll dive into how to harness the full power of Lightning Datatable, from simple lists to advanced features like row actions, so that you can build smarter, faster, and more efficient Salesforce applications.
What is the Structure of Lightning-DataTable, and how did I use it in my task?
The Lightning Datatable Component in LWC is used to display tabular data in a structured and interactive format. To get started, it’s essential to understand its required properties and how to use them:
Required Properties
- data
- This property holds the array of records you want to display in the table.
- Each object in the array represents a row in the table.
Ex: data = [
{ Id: ‘001’, Name: ‘Acme Corp’, Industry: ‘Technology’},
{ Id: ‘002’, Name: ‘Global Media’, Industry: ‘Media’}
];
- columns
- This defines how each column in the table is displayed.
- Each column object can have properties like:
- fieldName: The field in your data to display
- type: Type of data (text, number, email, date, etc.)
- sortable (optional): Enabling sorting on columns (sortable=true)
Ex: columns = [
{label: ‘Account Name’, fieldName: ‘Name’, type: ‘text’},
{label: ‘Industry’, fieldName: ‘Industry’, type: ‘text’}
];
3. key-field
- A unique identifier for each row.
- Helps LWC track row changes efficiently.
Ex:
<lightning-datatable
key-field= “Id”
data={data}
columns={columns}>
</lightning-datatable>
Building Your First Lightning Data Table in LWC
AccountController.cls
Note: We Use a Wrapper Class Here. One of the limitations of lightning-datatable is that it cannot directly display related object fields (like Account.Opportunities.size() or Opportunity.Name).
AccountList.js
AccountList.html
Final Output: Account Data in Lightning Data table
Final Notes on the Data Table
Dynamic Data → The data is retrieved from the AccountController Apex class, ensuring that any changes made to Salesforce records are reflected in the UI.
Wrapper Support → Because Lightning Datatable cannot directly handle related object fields, we used a wrapper class in Apex to flatten the Structure and make fields like totalOpportunities and accountUrl available.
Clickable Links → The Account Name column is displayed as a clickable URL, which allows users to navigate directly to the account record page.
Simple Columns → For this demo, we kept the table to just three columns (Account Name, Type, and Total Opportunities). This keeps the focus clear and easy to understand, but more fields can be added to the wrapper and columns array as needed.
Reusable Component → The combination of Apex + wrapper + LWC makes this pattern reusable. You can adapt it for other objects (such as Contacts, Opportunities, Cases, etc.) by simply changing the Apex query and wrapper.