This is what we are trying to achieve: 



Below you will see the component, controller and helper. 

Component:

<aura:component controller="ClosePlanController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    
    <!-- attributes -->
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="errors" type="Object" default="[]"/>
    <aura:attribute name="draftValues" type="Object" default="[]"/>

    <!-- Imports -->
   <!-- <aura:import library="lightningcomponentdemo:mockdataFaker" property="mockdataLibrary"/>-->

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

    

    <!-- the container element determine the height of the datatable -->
    <div style="height: 300px">
        <lightning:datatable
            columns="{! v.columns }"
            data="{! v.data }"
            keyField="id"
            errors="{! v.errors }"
            draftValues="{! v.draftValues }"
            onsave="{! c.handleSaveEdition }"
        />
    </div>


</aura:component>


Controller:

({
    init: function (cmp,helper) {
        cmp.set('v.columns', [
            {label: 'Proposed Activity', fieldName: 'Proposed_Activity__c ', type: 'text', editable: true, typeAttributes: { required: true }},
            {
                label: 'Target Date', fieldName: 'Target_Date__c ', type: 'date', editable: true,
                typeAttributes: {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                }
            },
            {label: 'Comments', fieldName: 'Comments__c', type: 'text', editable: true }
            
        ]);
        helper.getData(cmp);
        helper.initServer().then($A.getCallback(function () {
            helper.fetchData(cmp)
        }));
    }
   /* handleSaveEdition: function (cmp, event, helper) {
        var draftValues = event.getParam('draftValues');

        helper.saveEdition(cmp, draftValues);
    },
    handleCancelEdition: function (cmp) {
        // do nothing for now...
    }*/
})


Helper:

({
    getData : function(cmp) {
        var action = cmp.get('c.getClosePlans');
        action.setCallback(this, $A.getCallback(function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set('v.mydata', response.getReturnValue());
            } else if (state === "ERROR") {
                var errors = response.getError();
                console.error(errors);
            }
        }));
        $A.enqueueAction(action);
    }
})


They all save, but we get the following error message when we are trying to paste it on the lightning record page.




Can you please help. We are trying to create a component that will allow us to create multiple records from a single screen, similar to Manage Contact Roles.

Francisco