lightning:accordionSection row actions

Sample example to show how to use the lightning:accordionSection row actions whihc enables a custom menu implementation. Actions are displayed to the right of the section title.

Apex Class

public class AccountContactList {
    @AuraEnabled
    public static List<Account> getAllAccounts(){
        return [Select Id , Name , (Select Id , Name,Email from Contacts) from Account] ;
    }
    
    @AuraEnabled
    public static void deleteAccount(String accId){
        delete  [Select Id , Name , (Select Id , Name,Email from Contacts) from Account where id=:accId] ;
    }
    
}

Lightning Component 

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName" access="global" controller="AccountContactList">
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:attribute name="currentId" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:accordion aura:id="accordion" onsectiontoggle="{! c.onsectiontoggle }">
        <aura:iteration items="{!v.accounts}" var="obj">
            <lightning:accordionSection  name="{!obj.Id}" label="{!obj.Name}">
                <aura:set attribute="body">
                    <aura:iteration items="{!obj.Contacts}" var="con">
                        <p>{!con.Name}</p>
                        <p>{!con.Email}</p>
                    </aura:iteration>
                </aura:set>
                <aura:set attribute="actions">
                    <lightning:buttonMenu aura:id="menu" onselect="{! c.handleSelect }" alternativeText="Show menu">
                        <lightning:menuItem value="View_Account" label="View Account" />
                        <lightning:menuItem value="DeleteAccount" label="Delete Account" />
                    </lightning:buttonMenu>
                </aura:set>
            </lightning:accordionSection>
        </aura:iteration>
    </lightning:accordion>
    
</aura:component>

Controller.js

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getAllAccounts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(response.getReturnValue());
                component.set("v.accounts", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    onsectiontoggle: function (cmp ,event){
        var val =   cmp.find("accordion").get('v.activeSectionName') ; 
        console.log('val'+val);
        cmp.set("v.currentId" ,val) ;
    },
    handleSelect: function (cmp, event) {
        var selectedMenuItemValue = event.getParam("value");
        console.log('selectedMenuItemValue'+selectedMenuItemValue);
        var currentId =   cmp.get("v.currentId");
        console.log('currentId'+currentId); 
        switch (selectedMenuItemValue) {
            case 'View_Account':
                var urlEvent = $A.get("e.force:navigateToURL");
                urlEvent.setParams({
                    "url": "/"+currentId
                });
                urlEvent.fire();
                break;
            case 'DeleteAccount':
                var action = cmp.get("c.deleteAccount");
                action.setParams({accId:currentId});
                action.setCallback(this, function(response) {
                    var state = response.getState();
                    if (state === "SUCCESS") {
                        $A.get('e.force:refreshView').fire();
                    }
                });
                $A.enqueueAction(action);
                break;
        }
    },
    
})

Understanding code 

1. The below code is used to set the row level actions

<aura:set attribute="actions">
                    <lightning:buttonMenu aura:id="menu" onselect="{! c.handleSelect }" alternativeText="Show menu">
                        <lightning:menuItem value="View_Account" label="View Account" />
                        <lightning:menuItem value="DeleteAccount" label="Delete Account" />
                    </lightning:buttonMenu>
                </aura:set>

2. On row click of the button menu, we are handling the on the select event.

 handleSelect: function (cmp, event) {
        var selectedMenuItemValue = event.getParam("value");
        console.log('selectedMenuItemValue'+selectedMenuItemValue);
        var currentId =   cmp.get("v.currentId");
        console.log('currentId'+currentId); 
        switch (selectedMenuItemValue) {
            case 'View_Account':
                var urlEvent = $A.get("e.force:navigateToURL");
                urlEvent.setParams({
                    "url": "/"+currentId
                });
                urlEvent.fire();
                break;
            case 'DeleteAccount':
                var action = cmp.get("c.deleteAccount");
                action.setParams({accId:currentId});
                action.setCallback(this, function(response) {
                    var state = response.getState();
                    if (state === "SUCCESS") {
                        $A.get('e.force:refreshView').fire();
                    }
                });
                $A.enqueueAction(action);
                break;
        }
    },