A Beginner’s guide to Using Datatable in LWC

In Salesforce Lightning Web Components (LWC), datatables allow developers to display complex data in a structured, readable way. Using a lightning-datatable in LWC is essential for Salesforce developers who need to show record data in table format. This article will cover the steps to create a datatable in LWC using a simple JSON object, without needing to fetch data from Apex. This approach is perfect for quick testing and demos, and provides a solid foundation to new Salesforce Developers who are implementing datatables in LWC for the first time.

Table of Contents

1. Setting Up the Lightning Datatable in LWC
2. Understanding the JSON Data Structure
3. Mapping JSON Data to LWC Datatable Columns
4. Bringing it all together
5. Rendering the Datatable in LWC
6. Conclusion

Setting Up the Lightning Datatable in LWC

Before we dive into the details of showing columns and rows in lightning datatable let checkout the tag that we are going to use to create the datatable.

<template>
    
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}>
        </lightning-datatable>
    
</template>

To get started, all you need to use is the lightning-datatable tag and some important attributes like data, columns and key-field.

As you can guess from the names, data attribute is used to assign content we want to show in the tabular format, whereas columns help lightning-datatable map the right column to the right value.

In the next section, we are going to see how to structure our data so that the right values appear under the right column.

Understanding the JSON Data Structure

The data attribute in the lightning-datatable expects a JSON structure to create a tabular structure.

Using the sample JSON structure below, we want to show id, name, industry, annualRevenue, contactName and contactEmail details in a tabular structure.

This JSON is an array of JSON Objects which is denoted by anything inside a curly brace, it’s a key-value pair where key is the column name and value is the value for that column.

[
    {
        "id": "001",
        "name": "Acme Corporation",
        "industry": "Manufacturing",
        "annualRevenue": 1000000,
        "contactName": "John Doe",
        "contactEmail": "johndoe@acme.com"
    },
    {
        "id": "002",
        "name": "Tech Innovations",
        "industry": "Technology",
        "annualRevenue": 2000000,
        "contactName": "Jane Smith",
        "contactEmail": "janesmith@techinnovations.com"
    }
]

As you can see, all the array elements have the same structure where key remains the same but the value changes. This is what helps lightning-datatable identify the right value for the column. This way all the values are stacked under the same key which becomes a column as we will see later.

These keys might not be the API names of the Salesforce field, you can use any key label but just make sure all the array elements/ records have the same key.

---

Mapping JSON Data to LWC Datatable Columns

Now that we have understood the JSON data structure that is going to be rendered as a table. Now is the time to populate the column value of the lightning-datatable.

Next, will create a columns variable in our LWC js file s the below JSON structure. Note, that it is again an array of JSON Objects just like the data, but it’s specific to the columns.

As you can see the fieldName is populated with the same key label as the data JSON structure above. Apart from the fieldName we also have other fields that define a specific behaviour of the column.

For Example: The fieldName ‘annualRevenue‘ is of type currency and its label is ‘Annual Revenue‘. This means in the UI, the column name will be Annual Revenue and the content will be formatted to render as a Currency. Similarly, the value under the column with fieldName contactEmail will be rendered as an email with a hyperlink, which users can click on.

columns = [
        { label: 'ID', fieldName: 'id' },
        { label: 'Name', fieldName: 'name' },
        { label: 'Industry', fieldName: 'industry' },
        { label: 'Annual Revenue', fieldName: 'annualRevenue', type: 'currency' },
        { label: 'Contact Name', fieldName: 'contactName' },
        { label: 'Contact Email', fieldName: 'contactEmail', type: 'email' }
    ];

Bringing it all together

Now, let’s bring it all together and create a complete LWC Code, starting first with the javascript file.

import { LightningElement } from 'lwc';

export default class DatatableExample extends LightningElement {
    data = [
        {
            id: '001',
            name: 'Acme Corporation',
            industry: 'Manufacturing',
            annualRevenue: 1000000,
            contactName: 'John Doe',
            contactEmail: 'johndoe@acme.com'
        },
        {
            id: '002',
            name: 'Tech Innovations',
            industry: 'Technology',
            annualRevenue: 2000000,
            contactName: 'Jane Smith',
            contactEmail: 'janesmith@techinnovations.com'
        }
    ];

    columns = [
        { label: 'ID', fieldName: 'id' },
        { label: 'Name', fieldName: 'name' },
        { label: 'Industry', fieldName: 'industry' },
        { label: 'Annual Revenue', fieldName: 'annualRevenue', type: 'currency' },
        { label: 'Contact Name', fieldName: 'contactName' },
        { label: 'Contact Email', fieldName: 'contactEmail', type: 'email' }
    ];
}

Explanation

• data: Holds our JSON data, structured as an array of objects.
• columns: Defines each column with attributes:
  • label: The display name of the column.
  • fieldName: The key in our JSON data that maps to this column.
  • type: Specifies the data type (e.g., currency, email).

Rendering the Datatable in LWC

Now that we have our data and columns, let’s render the datatable in the component’s HTML file:

<template>
    <lightning-card title="Company Data Table">
        <lightning-datatable 
            key-field="id" 
            data={data} 
            columns={columns} 
            hide-checkbox-column="true"
        >
        </lightning-datatable>
    </lightning-card>
</template>

Explanation

• key-field: Uniquely identifies each row, using the id from our data.
• data: Binds the JSON data to the datatable.
• columns: Binds the column configuration as explained above.
• hide-checkbox-column: This is another attribute which we are using in this sample, it’s used to hide/show a checkbox next the each record in a datatable.

Other use cases around lightning-datatable

You can explore other articles which cover different interesting topics around lightning-datatable:

• Using lightning datatable in LWC with Apex
• How to incorporate icons in lightning datatable?
• Elevate your datatable with action columns in LWC
• How to add a button in lightning-datable in LWC?
• How to show parent record in lightning-datable in LWC?

Conclusion

Using a lightning-datatable in LWC is an efficient way to present structured data in Salesforce applications. In this guide, we explored how to use JSON data as an initial step, define columns for our datatable, and render it in an LWC component. We also included row selection functionality for more dynamic interaction.

By using JSON data instead of Apex for this example, developers can quickly prototype and understand how datatables work in LWC, making this a valuable starting point before integrating with real Salesforce data.

If you have any questions or inputs, please do let us know in the comment box below.

If you find this blog useful, do share it with your friends as well and don’t forget to subscribe to our newsletter to receive such content right into your inbox.