In today’s post we’ll see how to create a lightning data table and display records and add row actions to each row using Lightning web components(lwc).

LWC decorators :

  • @api: Marks a property as public in your template or other components.
  • @track: Marks a property for internal monitoring. A template or function using
    this property forces a component to rerender when the property’s value changes.
    Use this to store values locally, especially as a user interacts with your component.
  • @wire: Gives you a way to get and bind data. This implementation simplifies
    getting data from a Salesforce org.

To extend the behaviour of a class, getter, setter, method or property decorators are often used in JavaScript.

Below is the code for the component:

<template>
     <!--lightning datatable-->
    <lightning-datatable 
            key-field="id"
            data={parameters.data}
            onrowaction={handleRowAction}
            row-number-offset={rowOffset}
            hide-checkbox-column="true"
            columns={columns}></lightning-datatable>
                
        <!-- Detail view modal start -->
    <template if:true={ShowModal}>
        <section role="dialog" tabindex="-1"
                aria-labelledby="modal-heading-01"
                aria-modal="true"
                aria-describedby="modal-content-id-1"
                class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <!-- modal header start -->
            <header class="slds-modal__header">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                    <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
                </button>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Record Detail</h2>
            </header>
            <!-- modal body start -->
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <dl class="slds-list_horizontal slds-wrap">
                    <dt class="slds-item_label slds-truncate" title="Name">Name:</dt>
                    <dd class="slds-item_detail slds-truncate">{record.Name}</dd>
                    <dt class="slds-item_label slds-truncate" title="Phone">Phone:</dt>
                    <dd class="slds-item_detail slds-truncate">{record.Phone}</dd>
                    <dt class="slds-item_label slds-truncate" title="Type">Type :</dt>
                    <dd class="slds-item_detail slds-truncate">{record.Type}</dd>
                    <dt class="slds-item_label slds-truncate" title="Website">Website :</dt>
                    <dd class="slds-item_detail slds-truncate">{record.Website}</dd>
                </dl>
            </div>
            <!-- modal footer start-->
            <footer class="slds-modal__footer">
                <lightning-button variant="brand"
                label="Close"
                title="Close"
                onclick={closeModal}
                ></lightning-button>
            </footer>
        </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
    <!-- Detail view modal end -->
 
    
</template>
import { LightningElement, wire, track } from 'lwc';

//import method from the Apex Class
import getAccountRecords from '@salesforce/apex/lwcDataTableController.getAccountRecords';
 
// Declaring the columns in the datatable
const columns = [{
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'action:preview',
            title: 'Preview',
            variant: 'border-filled',
            alternativeText: 'View'
        }
    },
    {
        label: 'Name',
        fieldName: 'Name'
    },
    {
        label: 'Phone',
        fieldName: 'Phone'
    },
    {
        label: 'Type',
        fieldName: 'Type'
    }
];

export default class LwcDataTable extends LightningElement {
    @track columns = columns;
    @track record = {};
    @track rowOffset = 0;
    @track data = {};
    @track ShowModal = false;
    @wire(getAccountRecords) parameters;
 
    // Row Action event to show the details of the record
    handleRowAction(event) {
        const row = event.detail.row;
        this.record = row;
        this.ShowModal = true; // display modal window
    }
 
    // to close modal window set 'bShowModal' tarck value as false
    closeModal() {
        this.ShowModal = false;
    }
}
 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <!-- With following targets make component available for lightning app page, record page and home page in salesforce -->
   <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
public without sharing class lwcDataTableController {
    @AuraEnabled(cacheable = true)
    public static List<Account> getAccountRecords(){
        return [SELECT id, Name, Phone,Website,Type FROM Account LIMIT 10];
    }
}

Demo:

lwcDataTable demo
accounts record detail modal

for any other salesforce related post click here.

To add-on or point out correction on my post or any suggestion of topics, Please fell free to add comments in the comments section.

LEAVE A REPLY

Please enter your comment!
Please enter your name here