View, Edit and Delete Record in Lightning Datatable

Hi Everyone, In this post we will see an example that let you view, edit and delete record through lightning datatable. These task will be done through datatable action attribute which is really helpful to do all thing from single place.

View, edit and delete record through datatable

In this example, I am using account record to perform all these action, any standard and custom object will be used for this example.

DatatableHandler.apxc

 public class DatatableHandler {
    
    @AuraEnabled
    public static List<Account> getAccountData(){
       return [SELECT Id,Name,AccountNumber,Industry,Phone FROM Account limit 7];
    }
    
    @AuraEnabled
    public static void delAccount(Account accountRec){
        delete accountRec;
    } 
 }

DatatableActions.cmp

 <aura:component controller="DatatableHandler" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="global" >
    <aura:attribute name="results" type="List[]"/>
    <aura:attribute name="mycolumns" type="List"/>        
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>    
    <aura:attribute name="isLoading" type="Boolean" default="false" />
    <aura:if isTrue="{! v.isLoading }">
        <lightning:spinner alternativeText="Loading" />
    </aura:if> 
    <lightning:layout multipleRows="true" horizontalAlign="center">
        <lightning:layoutItem padding="around-small" size="12">             
            <lightning:datatable keyField="id" data="{!v.results}"
                                 columns="{!v.mycolumns}"
                                 resizeColumnDisabled="true"
                                 hideCheckboxColumn="true"
                                 onrowaction="{!c.handleRowAction}"
                                 />            
        </lightning:layoutItem>       
    </lightning:layout>
 </aura:component>     

DatatableActionsController.js

 ({
    doInit : function(component, event, helper) {
        var actions = [
            {label: 'View', name: 'view'},
            {label: 'Edit', name: 'edit'},
            {label: 'Delete', name: 'delete'}
        ];
        component.set('v.mycolumns', [
            {label: 'Name', fieldName: 'Name', type: 'text'},
            {label: 'AccountNumber', fieldName: 'AccountNumber', type: 'text'},
            {label: 'Industry', fieldName: 'Industry', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'},
            {type: 'action', typeAttributes: { rowActions: actions } } 
        ]);
        helper.pullData(component);
    },
    
    handleRowAction: function (component, event, helper) {
        var action = event.getParam('action');
        switch (action.name) {
            case 'view':
                helper.viewRecord(component, event);
                break;
            case 'edit':
                helper.editRecord(component, event);
                break;
            case 'delete':
                helper.deleteRecord(component, event);
                break;
        }
    },
 })

DatatableActionsHelper.js

 ({  
    pullData:function(component){
        component.set("v.isLoading", true);
        var action=component.get("c.getAccountData");       
        action.setCallback(this,function(e){
            component.set("v.isLoading", false);
            if(e.getState()=='SUCCESS'){
                var results=e.getReturnValue();                 
                if(results.length>0){
                    component.set('v.results', results);                                                           
                }
                else{
                    component.set('v.results', []);                                        
                }
            }
            else{
                this.showToast("ERROR","error",JSON.stringify(e.getError()));   
            }
        });
        $A.enqueueAction(action);
    },
    
    viewRecord : function(component, event) {
        var row = event.getParam('row');
        var recordId = row.Id;
        var viewRec=$A.get("event.force:navigateToSObject");
        viewRec.setParams({
            "recordId": recordId,
            "slideDevName": "detail"
        });
        viewRec.fire();
    },
    
    editRecord : function(component, event) {
        var row = event.getParam('row');
        var recordId = row.Id;
        $A.get("e.force:editRecord").setParams({"recordId": recordId}).fire();
    },  
    
    deleteRecord : function(component, event) {
        component.set("v.isLoading", true);
        var accountRec = event.getParam('row');        
        var action = component.get("c.delAccount");
        action.setParams({
            "accountRec": accountRec
        });
        action.setCallback(this, function(response) {
            component.set("v.isLoading", false);            
            if (response.getState() === "SUCCESS" ) {
                var rows = component.get('v.results');
                var rowIndex = rows.indexOf(accountRec);
                rows.splice(rowIndex, 1);
                component.set('v.results', rows);
                this.showToast("Success!","success","The record has been delete successfully.");
            }
            else{
                this.showToast("ERROR","error",JSON.stringify(response.getError())); 
            }
        });
        $A.enqueueAction(action);
    },
    
    showToast:function(title,type,message){
        var toastEvent = $A.get("e.force:showToast");
        if(toastEvent){
            toastEvent.setParams({"title": title,"type": type,"message": message}).fire();
        }
        else{
            alert(message);
        }
    },
 })

Output:

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.