+ Start a Discussion
LUIGI EMANUEL TAORMINALUIGI EMANUEL TAORMINA 

how to create a new lightning datatable by clicking the Add button in the lightning datatable passing the record into the new table?

I have a table created with lightning datatable where I get records from a query in an apex class. I added an add button where the click of the button fetches the record from me and creates a new table with the fetched record. How can I do ?
Component:
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>

<div class="container" style="height:280px">

    <lightning:datatable style="color:blue ;font-size:12px" data="{! v.mydata }"
                         columns="{! v.mycolumns }"
                         keyField="Id"
                         hideCheckboxColumn="true"
                         />
</div>

Controller:
init: function (cmp, event, helper) {
    cmp.set('v.mycolumns', [
        { label: 'Name Number', fieldName: 'Name'},
        { label: 'Product Name', fieldName: 'Name__c', type: 'text'},
        { label: 'Weight For Single Product', fieldName: 'WeightForSingleProduct__c', type: 'number'},
        { label: 'Available Quantity', fieldName: 'AvailableQuantity__c', type: 'number'},
        { label: 'Genre', fieldName: 'GenreBook__c', type: 'text'},
          {type: "button", typeAttributes: {
            label: 'Add Cart',
            name: '',
            title: '',
            disabled: false,
            value: '',
            iconPosition: ''
        }},
        {type: "button", typeAttributes: {
            label: 'Preview Cart',
            name: '',
            title: '',
            disabled: false,
            value: '',
            iconPosition: 'l'
        }}
    ]);
    helper.getData(cmp);
}
Helper:
getData : function(cmp) {
    var action = cmp.get('c.getSearchQuery');
    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);
}


 
Best Answer chosen by LUIGI EMANUEL TAORMINA
CharuDuttCharuDutt
Hii Emanuel
Try Below Code
<aura:component controller="AccountListController2">
               
    <aura:attribute type="Account[]" name="acctList"/>
    <aura:attribute type="Account[]" name="acctList2"/>
    <aura:attribute name="mycolumns" type="List"/>
   <aura:attribute name="truthy" type="Boolean" default='false'/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
   
     <lightning:datatable aura:id="acctTable"  
                         data="{! v.acctList }"     
                         columns="{! v.mycolumns }"     
                         keyField="Id"    
                         onrowselection="{! c.getSelectedName }"/> 
    
    
    <lightning:button variant="base" label="Base" title="Base action" onclick="{! c.handleClick }"/>
     <aura:if isTrue="{!v.truthy}">
    <lightning:datatable aura:id="acctTable"  
                         data="{! v.acctList2 }"     
                         columns="{! v.mycolumns }"     
                         keyField="Id"    
                         hideCheckboxColumn="true"  
                         onsave="{! c.onSave }"
                         onrowselection="{! c.getSelectedName }"/> 
  </aura:if> 
        
</aura:component>



Controller
({    
    init : function( component, event, helper ) {    
        component.set( 'v.mycolumns', [    
            {label: 'Account Name', fieldName: 'Name', type: 'text', editable:'true'}
        ]);    
        helper.fetchAccounts(component);  
          
    },  
    getSelectedName: function (component, event) {
        var selectedRows = event.getParam('selectedRows');
       component.set( "v.acctList2", event.getParam('selectedRows') );     
    }, 
    handleClick : function (component, event, helper) {
        component.set( "v.truthy", true );   
    }
      
})



Helper
({  
    fetchAccounts : function( component ) {  
        var action = component.get( "c.fetchAccts" );  
        action.setCallback(this, function( response ) {    
              
            var state = response.getState();    
            if (state === "SUCCESS")     
                component.set( "v.acctList", response.getReturnValue() );                
              
        });    
        $A.enqueueAction(action);   
          
    }
})
Please Mark It As Best Asnwerr If It Helps
Thank You!

All Answers

CharuDuttCharuDutt
Hii Emanuel
OnClick Of Add Button Does It get New Records Or The Selected Records From One Datable TO Another Datatable
LUIGI EMANUEL TAORMINALUIGI EMANUEL TAORMINA

OnClick of  Add button obtains the selected record to be added to a new datatable
CharuDuttCharuDutt
Hii Emanuel
Try Below Code
<aura:component controller="AccountListController2">
               
    <aura:attribute type="Account[]" name="acctList"/>
    <aura:attribute type="Account[]" name="acctList2"/>
    <aura:attribute name="mycolumns" type="List"/>
   <aura:attribute name="truthy" type="Boolean" default='false'/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
   
     <lightning:datatable aura:id="acctTable"  
                         data="{! v.acctList }"     
                         columns="{! v.mycolumns }"     
                         keyField="Id"    
                         onrowselection="{! c.getSelectedName }"/> 
    
    
    <lightning:button variant="base" label="Base" title="Base action" onclick="{! c.handleClick }"/>
     <aura:if isTrue="{!v.truthy}">
    <lightning:datatable aura:id="acctTable"  
                         data="{! v.acctList2 }"     
                         columns="{! v.mycolumns }"     
                         keyField="Id"    
                         hideCheckboxColumn="true"  
                         onsave="{! c.onSave }"
                         onrowselection="{! c.getSelectedName }"/> 
  </aura:if> 
        
</aura:component>



Controller
({    
    init : function( component, event, helper ) {    
        component.set( 'v.mycolumns', [    
            {label: 'Account Name', fieldName: 'Name', type: 'text', editable:'true'}
        ]);    
        helper.fetchAccounts(component);  
          
    },  
    getSelectedName: function (component, event) {
        var selectedRows = event.getParam('selectedRows');
       component.set( "v.acctList2", event.getParam('selectedRows') );     
    }, 
    handleClick : function (component, event, helper) {
        component.set( "v.truthy", true );   
    }
      
})



Helper
({  
    fetchAccounts : function( component ) {  
        var action = component.get( "c.fetchAccts" );  
        action.setCallback(this, function( response ) {    
              
            var state = response.getState();    
            if (state === "SUCCESS")     
                component.set( "v.acctList", response.getReturnValue() );                
              
        });    
        $A.enqueueAction(action);   
          
    }
})
Please Mark It As Best Asnwerr If It Helps
Thank You!
This was selected as the best answer
LUIGI EMANUEL TAORMINALUIGI EMANUEL TAORMINA
thanks it works, as you could do by putting the button inside the controller in the init function eg:
type: button typeAttributes: {......
CharuDuttCharuDutt
Please Close Your Query By Marking It As Best Answer If It Helps So It Also Helps Others In Future