datatable lightning web component salesforce

Lightning DataTable With Row Action In Salesforce Lightning Web Component

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


lwc datatable with action


dataTableLWC.cls [Apex Controller]

dataTableComponent.html [Lightning Web Component]

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

  • Check code comments.
dataTableComponent.js [JavaScript File]

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]

Output :

lwc datatable with action


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


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

    Can you help me with it?

  • 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