Hey guys, today in this post we are going to learn about how to Create a lightning-datatable with Row Actions and Display a Modal Popup on Click View Icon Button in Salesforce Lightning Web Component — LWC.
Files we used in this post example
lwcDataTableRowAction.html | Lightning Web Component HTML | The Templae HTML file for used to write HTML element for user interface. |
lwcDataTableRowAction.js | Lightning Web Component JavaScript | It is holding onclick functionality for display modal popup through click on icon view button . |
lwcDataTableRowAction.js-meta.xml | XML Meta File | It is used for where this lightning web component you want to exposed. |
lwcAppExampleApex.cls | Apex Controller | It is used for Fetching Contact records through @wire Decorators from database. |
lwcApp.app | Lightning Application | It is used for call the component and preview on browser. |
Live Demo
Other related post that would you like to learn in LWC
Step 1:- Create Apex Controller : lwcAppExampleApex.cls
SFDX:Create Apex Class >> New >> lwcAppExampleApex.cls
lwcAppExampleApex.cls [Apex Class]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
public with sharing class lwcAppExampleApex { // Create a lightning-datatable and display modal on rowaction @AuraEnabled(cacheable=true) public static List<Contact> getDataFromContact(){ List<Contact> conList = [Select Id, FirstName, LastName, Email, Phone From Contact limit 10]; try{ return conList; } catch(Exception e){ throw new AuraHandledException(e.getMessage()); } } } |
Step 2:- Create Lightning Web Component : lwcDataTableRowAction.html
SFDX:Lightning Web Component >> New >> lwcDataTableRowAction.html
lwcDataTableRowAction.html [Lightning Web Component HTML]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<template> <lightning-card title="Create a lightning-datatable and display modal popup on rowaction in LWC" icon-name="custom:custom14"> <lightning-datatable data={wireContact.data} columns={columns} key-field="id" hide-checkbox-column="true" onrowaction={handleRowAction}></lightning-datatable> <template if:true={modalContainer}> <section class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header"> <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModalAction}> <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon> </button> <h2 class="slds-text-heading_medium slds-hyphenate">Contact Record Detail</h2> </header> <div class="slds-modal__content slds-p-around_medium"> <table class="slds-table slds-table_bordered slds-table_col-bordered slds-table_cell-buffer"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email Name</th> <th>Phone Name</th> </tr> </thead> <tbody> <tr> <td>{contactRow.FirstName}</td> <td>{contactRow.LastName}</td> <td>{contactRow.Email}</td> <td>{contactRow.Phone}</td> </tr> </tbody> </table> </div> <footer class="slds-modal__footer"> <lightning-button variant="brand" label="Close" title="Close" onclick={closeModalAction}></lightning-button> </footer> </div> </section> <div class="slds-backdrop slds-backdrop_open"></div> </template> </lightning-card> </template> |
Step 3:- Create Lightning Web Component : lwcDataTableRowAction.js
SFDX:Lightning Web Component >> New >> lwcDataTableRowAction.js
lwcDataTableRowAction.js [LWC JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import { LightningElement, track, wire } from 'lwc'; import getDataFromContact from '@salesforce/apex/lwcAppExampleApex.getDataFromContact'; const columns=[ { label: 'View', type: 'button-icon', initialWidth: 75, typeAttributes: { iconName: 'action:preview', title: 'Preview', variant: 'border-filled', alternativeText: 'View' } }, { label: 'First Name', fieldName: 'FirstName' }, { label: 'Last Name', fieldName: 'LastName' }, { label: 'Email', fieldName: 'Email' }, { label: 'Phone', fieldName: 'Phone' } ]; export default class LwcDataTableRowAction extends LightningElement { @track columns = columns; @track contactRow={}; @track rowOffset = 0; @track modalContainer = false; @wire(getDataFromContact) wireContact; handleRowAction(event){ const dataRow = event.detail.row; window.console.log('dataRow@@ ' + dataRow); this.contactRow=dataRow; window.console.log('contactRow## ' + dataRow); this.modalContainer=true; } closeModalAction(){ this.modalContainer=false; } } |
Step 4:- Create Lightning Web Component : lwcDataTableRowAction.js-meta.xml
SFDX:Lightning Web Component >> New >> lwcDataTableRowAction.js-meta.xml
lwcDataTableRowAction.js-meta.xml [LWC Meta Data XML]
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle> |
Step 5:- Create Lightning Application : lwcApp.app
From Developer Console >> File >> New >> Lightning Application
lwcApp.app [Component Application File]
1 2 3 |
<aura:application extends="force:slds"> <c:lwcDataTableRowAction/> </aura:application> |
Further post that would you like to learn in LWC
Nice content..!! .