Hi Hariprasath,

Please try the below code with the lightning data table and with the modal popup for child component and with edit and delete functionality.

Here is your parent component. First, you need to save this component with controllersjs and helper js.
 

// Parent Component

<aura:component controller="NewAccountDatatableclass">

    <!-- attributes -->
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="selectedAccount" type="Object"/>
    <aura:attribute name="isOpen" type="boolean" default="false"/>

    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>


    <!-- the container element determine the height of the datatable -->
    <div>
        <lightning:datatable
                keyField="id"
                data="{! v.data }"
                columns="{! v.columns }"
                hideCheckboxColumn="true"
                onrowaction="{! c.handleRowAction }"/>
    </div>
    
    <aura:if isTrue="{!v.isOpen}">
      <div class="slds-modal slds-fade-in-open">
          <div class="slds-modal__container">
              <div class="slds-modal__header">
                  <h2 class="title slds-text-heading--medium">Edit Record</h2>
              </div>
              <div class="slds-modal__content slds-p-around--medium">
                  <c:NewChildComp SelectedAccountInfo="{!v.selectedAccount}"/>
              </div>
              <div class="slds-modal__footer">
                  <lightning:button variant="neutral" iconName="utility:close" label="Cancel"
                                    onclick="{!c.closeModel}"/>
              </div>
          </div>
      </div>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
</aura:component>


// js controller of parent component

({
    init : function(c, e, h){
        
        var actions = [
            { label: 'Edit','iconName': 'utility:edit', name: 'edit' },
            { label: 'Delete','iconName': 'utility:delete', name: 'delete' }
        ]
        c.set('v.columns', [
            {label: 'Account name', fieldName: 'Name', type: 'text'},
            {label: 'Account Number', fieldName: 'AccountNumber', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'text'},
            {type: 'action', typeAttributes: { rowActions: actions } },
            
            
        ]);
            h.getAccounts_helper(c,e,h);
            
            },
            
            handleRowAction : function(c,e,h)
            {
            
            var action = e.getParam('action');
            var row = e.getParam('row');
            
            switch (action.name) {
            case 'edit':
            c.set("v.isOpen",true);
            c.set("v.selectedAccount",row);
            console.log("selectedAccount-->"+c.get("v.selectedAccount"));
            break;
            
            case 'delete':
            if (confirm("Are you sure you want to delete this record")) 
            {
            h.handleDeleteAction_helper(c,row);
            }
            break;
            }
            
            },
            
            closeModel : function(c,e,h)
            {
            c.set("v.isOpen",false);
            h.getAccounts_helper(c,e,h);
            }
            })


// helper controller of Parent

({
    getAccounts_helper : function(c,e,h){
        try {
            var action = c.get("c.fetchAccounts_Apex");
            
            action.setCallback(this, function (r) {
                if(r.getState() === 'SUCCESS') {
                    var storedResponse = r.getReturnValue();
                    /*console.log('storedResponse:');
                    console.log(storedResponse);*/
                c.set("v.data",storedResponse);
                
            } else {
                console.log('ERROR');
                console.log(r.getError());
            }
            });
                $A.enqueueAction(action);
            } catch (ex) {
                console.log(ex);
            }
   },
    
    handleDeleteAction_helper : function(c,row,h)
    {
        try {
            var action = c.get("c.deleteAccounts_Apex");
            action.setParams({
                "delAccount": row
            });
            action.setCallback(this, function (r) {
                if(r.getState() === 'SUCCESS') {
                    
                    var storedResponse = r.getReturnValue();
                    console.log('storedResponse:');
                    console.log(storedResponse);
                     c.set("v.data",storedResponse);
                } 
                else {
                    console.log('ERROR');
                    console.log(r.getError());
                }
                
            });
                $A.enqueueAction(action);
            } catch (ex) {
                console.log(ex);
            }
                
            }
    
})

Here is your Child Component you need to save in new component with contollerjs and helperjs.
 

//Child component

<aura:component controller="NewAccountDatatableclass">
    <aura:attribute name="SelectedAccountInfo" type="Object"/>
    
      <lightning:layout multipleRows="true" >
          <lightning:layoutitem padding="around-small" flexibility="auto" size="6">
              <lightning:input  label="Name"  value="{!v.SelectedAccountInfo.Name}"/>
          </lightning:layoutitem>
          <lightning:layoutitem padding="around-small" flexibility="auto" size="6">
              <lightning:input  label="Account Number" value="{!v.SelectedAccountInfo.AccountNumber}" />
          </lightning:layoutitem>
          <lightning:layoutitem padding="around-small" flexibility="auto" size="6">
              <lightning:input  label="Phone"   value="{!v.SelectedAccountInfo.Phone}"/>
          </lightning:layoutitem>
      </lightning:layout>
    <lightning:layout horizontalAlign="center">
        <lightning:layoutitem padding="around-small">
              <lightning:button  label="Save" variant="brand" onclick="{!c.editAccountInfo}"/>
          </lightning:layoutitem>
    </lightning:layout>
    
</aura:component>

// controllerjs of child component

({
    editAccountInfo : function(c,e,h) {
        h.editAccountInfo_helper(c,e,h);
    }
})


//helperjs of child component

({
    editAccountInfo_helper : function(c,e,h) {
        try {
            var selectedAcc = c.get("v.SelectedAccountInfo");
            var action = c.get("c.editAccounts_Apex");
            action.setParams({
                "selAccount": selectedAcc
            });
            action.setCallback(this, function (r) {
                if(r.getState() === 'SUCCESS') {
                    var storedResponse = r.getReturnValue();
                    /*console.log('storedResponse:');
                    console.log(storedResponse);*/
                    if(storedResponse!=null)
                    {
                        alert('Edit Record has been done successfully');
                    }
                    c.set("v.SelectedAccountInfo",storedResponse);
                
                } else {
                    console.log('ERROR');
                    console.log(r.getError());
                }
            });
            $A.enqueueAction(action);
        } catch (ex) {
            console.log(ex);
        }
    }
})

Here is your apex class
 

// Apex Class

public class NewAccountDatatableclass {
    @AuraEnabled
    public static List<Account> fetchAccounts_Apex()
    {
        List<Account> accountList = new List<Account>();
        accountList = [SELECT Name,AccountNumber,Phone FROM Account LIMIT 10];
        return accountList;
    }
    
    @AuraEnabled
    public static Account editAccounts_Apex(Account selAccount)
    {
        if(selAccount!=NULL)
        {
            upsert selAccount;
        }
        return selAccount;
    }
    
    @AuraEnabled
    public static List<Account> deleteAccounts_Apex(Account delAccount)
    {
        system.debug('delAccount'+delAccount);
        if(delAccount!=NULL)
        {
            delete delAccount;
           List<Account> accList = new List<Account>();
            accList = fetchAccounts_Apex();
            return accList;
        }
        return null;
    }
}

//Here is your app

<aura:application extends="force:slds">
<!--here you need to call your parent component.-->
    <c:"your parent component name"/> 
</aura:application>

Please select as best answer if it helps you.

Thank You,
Ajay Dubedi