Lightning Web Component lightning-datatable

Lightning Web Component lightning-datatable

Lightning Web Component lightning-datatable in lwc

lightning-datatable component displays tabular data for list of records. lightning-datatable component supports inline editing, which enables you to update a field value without navigating to the record. We cab display each column based on the data type.

Lightning Web Component Datatable example

Lets create lightning web component where we will display all account records using datatable.

First we need to create apex class for it.

AccountHelper class
public with sharing class AccountHelper {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountList() {
        return [SELECT Id, Name, Type, Rating,
                Phone, Website, AnnualRevenue
            FROM Account];
    }
}

The @AuraEnabled(cacheable=true) annotation exposes the method to Lightning components and caches the list of accounts on the client.

lightningDatatableLWCExample.js

import { LightningElement ,api, wire, track} from 'lwc';
import getAccountList from '@salesforce/apex/AccountHelper.getAccountList';
export default class LightningDatatableLWCExample extends LightningElement {
    @track columns = [{
            label: 'Account name',
            fieldName: 'Name',
            type: 'text',
            sortable: true
        },
        {
            label: 'Type',
            fieldName: 'Type',
            type: 'text',
            sortable: true
        },
        {
            label: 'Annual Revenue',
            fieldName: 'AnnualRevenue',
            type: 'Currency',
            sortable: true
        },
        {
            label: 'Phone',
            fieldName: 'Phone',
            type: 'phone',
            sortable: true
        },
        {
            label: 'Website',
            fieldName: 'Website',
            type: 'url',
            sortable: true
        },
        {
            label: 'Rating',
            fieldName: 'Rating',
            type: 'test',
            sortable: true
        }
    ];

    @track error;
    @track accList ;
    @wire(getAccountList)
    wiredAccounts({
        error,
        data
    }) {
        if (data) {
            this.accList = data;
        } else if (error) {
            this.error = error;
        }
    }
}

We are creating columns and accList prroperty which we will use in html file datatable.

lightningDatatableLWCExample.html

<template>
    <h2> Account Datatable</h2>
    <template if:true={accList}>
        <lightning-datatable data={accList} columns={columns} key-field="Id">
        </lightning-datatable>
    </template>
    <template if:true={error}>
        {error}
    </template>
</template>

lightningDatatableLWCExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

In above file, we are exposing lwc component for home page.

Now we can add this lwc component on home page

  • Go to Home page
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your lightningDatatableLWCExample component and drag it on left hand side.
  • Click Save and activate.

We will have following output:

Lightning Web Component lightning datatable

For more detail please refer to official link.

Happy Coding 🙂

Permanent link to this article: https://www.sfdcpoint.com/salesforce/lightning-web-component-lightning-datatable/

2 comments

    • Tarun on August 10, 2020 at 11:36 pm
    • Reply

    how do you do this if you want to show a field such as name from the parent account object in the data table?

    • MI on August 16, 2020 at 9:48 pm
    • Reply

    Hello Nitin Goyal,

    You are simply awesome, priceless gem, keep up the great guiding work.

Leave a Reply

Your email address will not be published.