Lightning Component - Data Tables - Record Menu

Question

I am new to Salesforce Lightning. Trying to create a component to add/edit an object and related lists without saving as part of a workflow. SLDS help provides a nice(??) guidance on how to create tables - and would like to create something like this using aura:iteration

https://www.lightningdesignsystem.com/components/data-tables/#flavor-advanced

I am trying put in the menu on the record as shown in the example. Can any one provide on how to add this menu and handle menu selections from the controller please.

Thanks for the help in advance.

Answer 1

After an intensive search - found the answer was hiding in plain sight.

This trail provided some guidance and finally built it

                <aura:iteration items="{!v.tlist}" var="tx" indexVar="idx">
                    <tr class="slds-hint-parent" data-data="{!idx}" onclick="{!c.rowClick}">
                        <td class="slds-cell-shrink" data-label="Select Row">
                            <label class="slds-checkbox" data-data="{!idx}">
                                <input type="checkbox" name="options" value="{!tx.isSelected}" data-data="{!idx}" />
                                <span class="slds-checkbox--faux" data-data="{!idx}"></span>
                                <span class="slds-assistive-text">Select Row</span>
                            </label>
                        </td>
                        <th class="slds-truncate" scope="row" data-label="Header" title="{!tx.Name}">
                            {!tx.Name}
                        </th>
                        <td class="slds-truncate" data-label="Process" title="{!tx.Name}">{!tx.Name}</td>
                        <td class="slds-truncate" data-label="GL Date" title="{!tx.xDate__c}"><ui:outputDate value="{!tx.xDate__c}" /></td>                                                        
                        <td colspan="2" class="slds-cell-shrink" data-label="Actions">
                            <div class="slds-button-group" role="group">
                                <button class="slds-button slds-button--icon" data-data="{!idx}" onclick="{!c.showdetailsClick}">
                                    <c:svg ariaHidden="true" class="slds-button__icon"
                                           xlinkHref="/resource/SLDS201/assets/icons/utility-sprite/svg/symbols.svg#table">
                                    </c:svg>
                                    <span class="slds-assistive-text">Details</span>
                                </button>                                                                                                        
                                <ui:menu >
                                    <ui:menuTriggerLink aura:id="trigger">                                        
                                        <button class="slds-button slds-button--icon" aria-haspopup="true">
                                            <c:svg ariaHidden="true" class="slds-button__icon"
                                                   xlinkHref="/resource/SLDS201/assets/icons/utility-sprite/svg/symbols.svg#settings">
                                            </c:svg>
                                            <c:svg ariaHidden="true" class="slds-button__icon slds-button__icon--x-small"
                                                   xlinkHref="/resource/SLDS201/assets/icons/utility-sprite/svg/symbols.svg#down">
                                            </c:svg>
                                            <span class="slds-assistive-text">More Actions</span>
                                        </button>
                                    </ui:menuTriggerLink>
                                    <ui:menuList class="actionMenu" aura:id="actionMenu">
                                        <li class="uiMenuItem">
                                            <a data-data="{!idx}" role="menuitem" onclick="{!c.editClick}">
                                                <p class="slds-truncate">Edit</p>
                                            </a>
                                        </li>
                                        <li class="uiMenuItem">
                                            <a data-data="{!idx}" role="menuitem" onclick="{!c.deleteClick}">
                                                <p class="slds-truncate">Unpost</p>
                                            </a>
                                        </li>                                            
                                    </ui:menuList>
                                </ui:menu>    
                            </div>
                        </td>
                    </tr>                        
                </aura:iteration>

Then Handle click event and get data-data like this

rowClick : function(component, event, helper) {     
    debugger;
    if(!event.target) return;
    if(event.target.parentNode === undefined) return;

    var idx = event.target.getAttribute("data-data") || event.target.parentNode.getAttribute("data-data");
    if(!idx) return; //there is NO data associated
    var ix = parseInt(idx);  //<--You get Index here      
    /* Use this record index to something */              
}

I am using indexVar but there is no such limitation - You can directly use any data point- like recordId

Answer 2

You could implement an aura:iteration for the table rows identifying each row with the record id, then use a checkbox to know which rows have been selected for edition (or any other action). If you want to add new rows, you should handle it in the controller by defining a function in response for a user action. Are you thinking in something like this?