Dynamic Custom Datatable using dual List

Application Event


Event: secondevt

<aura:event type="APPLICATION" description="Event template" >
    <aura:attribute name="accName" type="String"/>

</aura:event>


child1.cmp
<aura:component >
    <aura:attribute name="name" type="string" default="vinayak" />
  <!---Registering Event-->  
    <aura:registerEvent name="one" type="c:secondEvent" />
    <div class="box">
        <lightning:button label="change" onclick="{!c.call}" />
    </div>
</aura:component>

Js
 ({
    call : function(component, event, helper) {
        //getting the value from UI
        var name=component.get('v.name');
        console.log(name);
        var evt=$A.get("e.c:secondEvent");
        evt.setParams({"accName":name});
        evt.fire();
    }
})


child2.cmp
<aura:component >
    <aura:attribute name="val1" type="String" />

    <aura:handler event="c:secondEvent"  action="{!c.invoke}"/>
    <div class="box">
        Name for child_2 is : {!v.val1}
    </div>
</aura:component>

JS
({
    invoke : function(component, event, helper) {
        var acc=event.getParam("accName");
        //Getting the value from event and setting to attribute val1 in UI
        component.set("v.val1",acc);
    }

})


Application:

<aura:application extends="force:slds" >
    <div class="box">
        <c:Child1 />
        <c:Child2 />
    </div>

</aura:application>


Op:

After clicking on change we get the result