Lightning DataTable With Row Action In Salesforce Lightning Web Component

Welcome back guys, today in this post we are going to create another ‘lightning web component‘, where we will display account record data using ‘lightning:dataTable‘ web component. and with the row level actions users can view the record details in a modal window.

Hope you all know how to create and deploy the Lightning Web Component .
if not please check this

dataTableLWC.cls [Apex Controller]

public with sharing class dataTableLWC {
    @AuraEnabled(cacheable = true)
public static List<Account> fetchAccounts(){
       return [SELECT Id,Name,Phone,Type,Industry,Rating,Website FROM Account LIMIT 100];
    }
}

dataTableComponent.html [Lightning Web 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={bShowModal}>
    <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="Industry">Industry :</dt>
                <dd class="slds-item_detail slds-truncate">{record.Industry}</dd>
                <dt class="slds-item_label slds-truncate" title="Website">Website :</dt>
                <dd class="slds-item_detail slds-truncate">{record.Website}</dd>
                <dt class="slds-item_label slds-truncate" title="Rating">Rating :</dt>
                <dd class="slds-item_detail slds-truncate">{record.Rating}</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>

Check Out : Display Popup/Modal Window In Salesforce Lightning Web Component

• Check code comments.

dataTableComponent.js [JavaScript File]

// import module elements
import {
    LightningElement,
    wire,
    track
} from 'lwc';

//import method from the Apex Class
import fetchAccounts from '@salesforce/apex/dataTableLWC.fetchAccounts';

// 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'
    }
];

// declare class to expose the component
export default class DataTableComponent extends LightningElement {
    @track columns = columns;
    @track record = {};
    @track rowOffset = 0;
    @track data = {};
    @track bShowModal = false;
    @wire(fetchAccounts) parameters;

    // Row Action event to show the details of the record
    handleRowAction(event) {
        const row = event.detail.row;
        this.record = row;
        this.bShowModal = true; // display modal window
    }

    // to close modal window set 'bShowModal' tarck value as false
    closeModal() {
        this.bShowModal = false;
    }
}

Decorators
Decorators are often used in JavaScript to extend the behavior of a class, property, getter, setter, or method.

Lightning Web Component decorators include:

• @api: Marks a property as public for use 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.

dataTableComponent.js-meta.xml [MetaData File]

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="dataTableComponent">
   <apiVersion>45.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>

Output :

Related Resources :

• Documentation 
• Lightning Web Components Basics
• Set Up Your Lightning Web Components Developer Tools

Other popular Post :

• Display Popup/Modal Window In Salesforce Lightning Web Component
• How to Create Lightning Web Component And Deploy To The Salesforce Org
• Custom Multi-Select Picklist In Lightning Component With Select2 jQuery Plugin
• How To Display Lightning Component In Visualforce Page-Sample
• Delete Multiple Records Using Checkbox In Lightning Component
• How To Use jQuery DataTable Plugin In Salesforce Lightning Component -: Sample

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box.

Happy Learning

About The contributor: 

• Pradeep Kumar

  2 Post Contribute

  

Pradeep Kumar

2 Post Contribute

Salesforce Enthusiast and Salesforce Evangelist.

Volunteer for Hyderabad Trailblazin’.
Teck Geek || Life Philosophy :
Six W’s –> Work Will Win When Wishing Won’t.

“Once you see the results, it becomes an Addiction”

Post By Pradeep:

1. How to Create Lightning Web Component And Deploy To The Org
2. Lightning DataTable With Row Action In Salesforce Lightning Web Component