Sample Code:
AccountListController.apex:
public class AccountListController {
@AuraEnabled
public static List < Account > fetchAccts() {
return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 10 ];
}
}
AccountList.cmp:
<aura:component implements="force:appHostable"
controller="AccountListController">
<aura:attribute type="Account[]" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
<lightning:datatable data="{! v.acctList }"
columns="{! v.mycolumns }"
keyField="Id"
hideCheckboxColumn="true"
onrowaction="{!c.viewRecord}"/>
</aura:component>
AccountListController.js:
({
fetchAccounts : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name', type: 'text'},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Type', fieldName: 'Type', type: 'Text'},
{type: "button", typeAttributes: {
label: 'View',
name: 'View',
title: 'View',
disabled: false,
value: 'view',
iconPosition: 'left'
}},
{type: "button", typeAttributes: {
label: 'Edit',
name: 'Edit',
title: 'Edit',
disabled: false,
value: 'edit',
iconPosition: 'left'
}}
]);
var action = component.get("c.fetchAccts");
action.setParams({
});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.acctList", response.getReturnValue());
}
});
$A.enqueueAction(action);
},
viewRecord : function(component, event, helper) {
var recId = event.getParam('row').Id;
var actionName = event.getParam('action').name;
if ( actionName == 'Edit' ) {
alert('Edit');
var editRecordEvent = $A.get("e.force:editRecord");
editRecordEvent.setParams({
"recordId": recId
});
editRecordEvent.fire();
} else if ( actionName == 'View') {
alert('view');
var viewRecordEvent = $A.get("e.force:navigateToURL");
viewRecordEvent.setParams({
"url": "/" + recId
});
viewRecordEvent.fire();
}
}
})
Output:

If you click View button, it will take you to the Account detail page.
If you click Edit button, it will popup Account Edit form.
Hey,
Thanks for this. Do you know if it's possible to use event.getSource() on the button clicked? I wish to have the button clicked highlighted. Any idea on how I can access it? If it was a regular lightning button I could just find it with aura:id / event.getSource.
I don't think event.getSource will work. Use event.getParam('action').name to get the name.
Thanks for the article, is it possible to hide the buttons when industry value is blank? please reply
Check this – http://www.infallibletechie.com/2018/07/how-to-disable-and-enable-button-in.html. You can enable and disable. There is no attribute available to hide and show.
Hi Magulan,
How to add delete button for the lightning data table.
Similar to View and Edit buttons, create Delete button. Get the record id in the javascript and pass it to apex class to delete the record.
Hi Magulan,
The given example is not working. On clicking Edit/view, nothing is happening. Is there any code missing?
Please update me.
Thanks,
Phanikumar
keyField="Id".
Don't use id. It should be Id. It is case sensitive.
any way to get edit/view as a picklist not a button and how to disable the button on some conditions
Check the below comment.
lightning:datatable with row actions in Salesforce – https://www.infallibletechie.com/2020/06/lightningdatatable-with-row-actions-in.html
Check this – http://www.infallibletechie.com/2018/07/how-to-disable-and-enable-button-in.html. You can enable and disable. There is no attribute available to hide and show.
I tried this by my table has no formatting. Any ideas why?
Remove custom CSS and try.
It's because I did not have extends="force:slds" on my app
Good catch. Thanks for Sharing!!!
hey how to reduce the width of column which contain the buttons so that they appear closer?
Use fixedWidth attribute to reduce the width of the columns.
Hi the edit and view button are not working it is throwing an error setparams of undefined
Check in Browser Console and find the errors.
nothing is happening on edit and view button after clicking it . both buttons seems to be in disabled mode
Did you check the browser console? If there are any errors, you will be able to see it there.