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:

     <!--lightning datatable-->
        <!-- Detail view modal start -->
    <template if:true={ShowModal}>
        <section role="dialog" tabindex="-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>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Record Detail</h2>
            <!-- 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>
            <!-- modal footer start-->
            <footer class="slds-modal__footer">
                <lightning-button variant="brand"
        <div class="slds-backdrop slds-backdrop_open"></div>
    <!-- Detail view modal end -->
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="">
    <!-- With following targets make component available for lightning app page, record page and home page in salesforce -->
public without sharing class lwcDataTableController {
    @AuraEnabled(cacheable = true)
    public static List<Account> getAccountRecords(){
        return [SELECT id, Name, Phone,Website,Type FROM Account LIMIT 10];


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.


Please enter your comment!
Please enter your name here