Hello, I have a lightning component that is working and returns data but we are trying to enable inline editing on all the fields for easy edit and save capabilities.

Below is the component, controller, and helper:

Component:

<aura:component controller="ClosePlanController"  implements="flexipage:availableForAllPageTypes" access="global">
        <aura:attribute name="closeplans" type="List" />
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <!-- Use a data table from the Lightning Design System: https://www.lightningdesignsystem.com/components/data-tables/ -->
    <div class="slds-table_edit_container slds-is-relative">    
    <table class="slds-table slds-no-cell-focus slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols">
          <thead>
            <tr class="slds-text-heading_label">
              <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
              <th scope="col"><div class="slds-truncate" title="Proposed Activity">Name</div></th>
              <th scope="col"><div class="slds-truncate" title="Client Owner">Type</div></th>
              <th scope="col"><div class="slds-truncate" title="Owner">Number Of Employees</div></th>
              <th scope="col"><div class="slds-truncate" title="Target Date">Ticker Symbol</div></th>
              <th scope="col"><div class="slds-truncate" title="Complete">Phone</div></th>
              <th scope="col"><div class="slds-truncate" title="Comments">Delete</div></th>
            </tr>
          </thead>
          <tbody>
            <!-- Use the Apex model and controller to fetch server side data -->
            <aura:iteration items="{!v.closeplans}" var="closeplan">
                <tr>
                    <th scope="row"><div class="slds-truncate" title="{!closeplan.Id}">{!closeplan.Id}</div></th>
                    <td><div class="slds-cell-edit" title="{!closeplan.Proposed_Activity__c}">{!closeplan.Proposed_Activity__c}</div></td>
                    <td><div class="slds-cell-edit" title="{!closeplan.Client_Owner__c}">{!closeplan.Client_Owner__c}</div></td>
                    <td><div class="slds-cell-edit" title="{!closeplan.OwnerId}">{!closeplan.OwnerId}</div></td>
                    <td><div class="slds-cell-edit" title="{!closeplan.Target_Date__c}">{!closeplan.Target_Date__c}</div></td>
                    <td><div class="slds-cell-edit" title="{!closeplan.Complete__c}">{!closeplan.Complete__c}</div></td>
                    <td><div class="slds-cell-edit" title="{!closeplan.Comments__c}">{!closeplan.Comments__c}</div></td>
                    <!--<td>
                        <form class="closeplan-form" onsubmit="{!c.deleteClosePlan}">
                          <input type="hidden" value="{!closeplan.Name}" class="closeplan-name" />
                          
                          <lightning:button
                            label="Delete"
                            iconName="utility:delete"
                            iconPosition="left"
                            variant="destructive"
                            type="submit"
                          />
                        </form>
                    </td> -->    
                </tr>
            </aura:iteration>
          </tbody>
        </table>
    </div>
      </aura:component>

Controller:

({
      doInit: function(component, event, helper) {
        // Fetch the account list from the Apex controller
        helper.getClosePlanList(component);
      }
    })


Helper:

({
      // Fetch the accounts from the Apex controller
      getClosePlanList: function(component) {
        var action = component.get('c.getClosePlans');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
         component.set('v.closeplans', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
      }
    })


Can you please help. Thank you,

Francisco