Ad Code

lightning datatable with lwc in salesforce

lightning datatable with lwc in salesforce

In this post, you will learn how to implement datatable within the Salesforce lightning web component which is the latest version of the user interface implementation in the Salesforce lighting framework.

As you already know that lightning web components consist of three files namely HTML, JavaScript, and XML metadata files. Find the code for each one below.


    <div style="height: 300px;">


import { track, wire, LightningElement } from 'lwc';
import GetContactList from '@salesforce/apex/poc.getContacts';
const columns = [
    { label: 'Id', fieldName: 'Id' },
    { label: 'Name', fieldName: 'Name', type: 'text', sortable: true },
    { label: 'AccountId', fieldName: 'AccountId', type: 'Id' },
    { label: 'Email', fieldName: 'Email', type: 'email' },

export default class DataTableComponent extends LightningElement {
    @track data = [];
    @track columns = columns;

    @wire(GetContactList, {})
    ApexResponse({ error, data }) {
        if (data) {
   = data;
        } else if (error) {


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="" fqn="DataTableComponent">

Add this code to your web component and deploy LWC to your sandbox.

The second part is the Apex class which provides data to the component.


source      :
Description : Apex class to fetch accounts and related contacts
public class poc {
    @AuraEnabled(cacheable = true)
    public static List<Contact> getContacts() {
        List<Contact> contacts =
            [SELECT Id, Name, Phone, Email, AccountId FROM Contact where phone != null limit 50];
        return contacts;

Save the changes, refresh the component page and notice the results.

lightning datatable with lwc in salesforce

Well done!

In this post, we have seen a simple example of implementing a data grid/data table in the Salesforce lightning web components.

Do you see any issues in implementing Salesforce lightning web components in your implementations? start the conversation in the comments section below

You may like these

Post a Comment


  1. Hi :)
    How can we add a url, so when we click on the Id field it takes us to the user page?

    1. Try to add extra url parameter for that id field. I have tested this in the aura component, hope that works in the lwc too.

      { label: 'Id', fieldName: 'LinkName', type: 'url', typeAttributes: {label: { fieldName: 'Name' }, target: '_top'} },

      hope this helps.

  2. I need to show list of data on the click of tab, then select multiple data and by clicking on button it will add this to the object record.

    1. Yes, that is possible. Create a lightning component which displays the records in the data-table format and map it to the lightning tab. for selecting the records you need to implement client side javascript to get the selected records; and once the add button is clicked, get the records selected, pass it to the apex class and insert records to object. Hope this helps!

  3. Hi i just want to hide an entire column satisfying some conditions. Is that possible in lwc?

    1. May be you can try changing the "columns" to let or var and dynamically remove and add the column property as per the requirement. This solution we haven't tried. Appreciate if you can share the results.

  4. also I want to add opportunity and case records on datatable

    1. please follow same steps above. only change is instead of an account write a query to fetch the opportunity or case records