datatable lightning web component salesforce

Lightning DataTable With Row Action In Salesforce Lightning Web Component

Uncategorized

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

 

lwc datatable with action sfdcMonkey.com

 

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 :

lwc datatable with action sfdcMonkey.com

 

Related Resources :
Other popular Post :

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 sfdcmonkey
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

2 comments

  • Hi Predeep,
    is it possible to use a data table with two head rows in LWC, something like that:
    first row      |                           |Revenues |Active Issues|
    second row |Account Name|May|June|May|June     |
    records

    Can you help me with it?
    Regards,
    Magde

  • How can we show 2 row level actions instead of just one? I am confused as to how to structure the array. Thank you.

Leave a Reply