As you can see from the code posted below I keep two lightning: datatable, the first datatable I need to display all the books on the screen and I also need to select a book that through a button inserts the values ​​in the second lightning: datatable . I would like to know how to display only the second lightning: datatable inside the lightning: tab "c.clickProva"

CMP:

</lightning:tab>
        <lightning:tab  onactive="{! c.clickHorror }" label="Horror" > <h2 style=" font-size:16px;text-align:center; color:red; font-family: Lucida Console, Courier New, monospace;">Here are all the horror books</h2>  </lightning:tab>
        <lightning:tab onactive="{! c.clickFantasy }" label="Fantasy"  > <h2 style="font-size:16px; text-align:center; color:red;font-family: Lucida Console, Courier New, monospace;">Here are all the fantasy books</h2> </lightning:tab>
        <lightning:tab onactive="{! c.clickAvailable }" label="Available Books"  > <h2 style=" font-size:16px; text-align:center; color:red;font-family: Lucida Console, Courier New, monospace;">Here are all the books available </h2> </lightning:tab> 
        <div ><lightning:tab   onactive="{! c.clickProva }"  iconName="utility:cart" > <h2 style=" font-size:16px; text-align:center; color:red;font-family: Lucida Console, Courier New, monospace;">Prova </h2> </lightning:tab></div>
        
    </lightning:tabset>

CMP:

<!-- Create Datatable -->   
    <aura:attribute type="Product2__c[]" name="prodList"/>
    <aura:attribute type="Product2__c[]" name="prodList2"/>
    <aura:attribute name="control" type="Boolean" default='false'/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="Counter" type="Integer" default="0" />
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <div class="container" style="height:250px ; padding:10px ; ">
        
        <lightning:datatable style="color:red ;font-size:14px;font-family: Lucida Console, Courier New, monospace;" 
                          
                             data="{! v.prodList }"     
                             columns="{! v.mycolumns }"     
                             keyField="Id"
                             showRowNumberColumn="true" 
                             editable="true"
                             onrowselection="{! c.getSelectedProd }"
                             
                             />
    </div>
    <br /> <br />  <br/> 
    <lightning:button
                      label="{!v.Counter}"
                      title="Cart"
                      onclick="{! c.handleClick }"
                      iconName="utility:cart"
                      >
    </lightning:button>
    <br /> <br />
    <aura:if isTrue="{!v.control}">
        <div class="container" style="height:150px;padding:10px">
            <lightning:datatable style="color:rgb(255, 0, 0) ;font-size:14px;font-family: Lucida Console, Courier New, monospace;"
                                
                                 data="{! v.prodList2 }"     
                                 columns="{! v.mycolumns }"     
                                 keyField="Id"    
                                 hideCheckboxColumn="true"  
                                 onrowselection="{! c.getSelectedProd }"/> 
        </div>
        <aura:set attribute="else">
            <h1 style="font-size:28px; text-align:center; color:red">Empty Cart</h1>
        </aura:set>
    </aura:if>

Controller:

//function that generates the table of books  
    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'},
            
        ]);
            helper.getData(cmp);
            },
            getSelectedProd: function (component, event) {
            var selectedRows = event.getParam('selectedRows');
            component.set( "v.prodList2", selectedRows );
            var count = component.get('v.Counter');
            count = count+1;
            component.set('v.Counter', count);
            var list = component.get("v.prodList2");
            if(list.length==0){
            component.set("v.control",false);
            }
            else{
            console.log("Size = "+list.length);
            }
            },
            handleClick : function (component, event, helper) {
            component.set( "v.control", true );
            
            },
            
            clickProva : function (component, event, helper) {
                }