+ Start a Discussion
Amidou CisseAmidou Cisse 

Need a Lightning component to display a data-table of my campaign data. Please help !

User-added image
Hello everyone, I hope you are well.
I have this array of data to develop by lightning component, this table allows me to show some data from my campaign as you can see below. If someone has already developed a simulare lightning component, I would like to have their code as a model to adapt my table.

Thank you in advance.
Best Answer chosen by Amidou Cisse
Amidou CisseAmidou Cisse
Thanks gays, my problème is solved, it work.

User-added image

 
// Controller Apex


public with sharing class CampaignController {
    
    @AuraEnabled
    public static List<Campaign> getCampaign(Id CampaignId) {
        return [SELECT Id, cel_ext_id_campaign__c, Name, cel_category__c, cel_SubCatergory__c, IsActive, cel_Countries__c, BudgetedCost, StartDate, EndDate, cel_Format__c, cel_MenWomen__c,
                NumberSent, cel_Reason__c, NumberOfResponses,cel_Stores__c, cel_AmountTotal__c, cel_TotalConfirmed__c, cel_TotalDirectSales__c, cel_TotalInvited__c,
                cel_TotalPurchasing__c, cel_TotalSales__c, cel_TotalShowUp__c, cel_Total__c, cel_BudgetEuro__c, cel_SalesTargetResWDeposit__c, cel_SalesTargetResWODeposit__c,
                cel_TotalSLG__c, cel_TotalRTW__c, cel_TotalShoes__c, cel_TotalBags__c, cel_TotalACC__c
                FROM Campaign where Id=:CampaignId];
    }   
    @AuraEnabled
    public static Campaign saveCampaign(Campaign campaign) {
        upsert campaign;
        return campaign;
    }     
}
 
// Componant 1 


<aura:component controller="CampaignController" implements="lightning:isUrlAddressable,force:hasSObjectName,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">                                                           
	<aura:attribute name="recordId" type="String" />
    <aura:attribute name="campaigns" type="Campaign[]"/>     
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>  
        <lightning:layoutItem >
            <c:CEL_CampaignDetailList campaigns="{!v.campaigns}"/>
        </lightning:layoutItem>
</aura:component>
 
//componant 2


<aura:component controller="CampaignController" access="global" >
   <aura:attribute name="recordId" type="String" />
   <aura:attribute name="campaigns" type="Campaign[]"/>
	 <lightning:card title="">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.campaigns}" var="campaign">
                <c:CEL_CampaignItem campaign="{!campaign}"/>
            </aura:iteration>
        </p>
    </lightning:card>
</aura:component>
 
// Componant 3

<aura:component controller="CampaignController" access="global"> 
   <aura:attribute name="recordId" type="String" />
   <aura:attribute name="campaign" type="Campaign[]"/>
   
    <div class=" slds-grid slds-grid_vertical " style="height:auto width:auto;" >    
         <h1 style="font-weight: bold; color:white; text-align:center;"> Campaign Details </h1> 
        	<table class="slds-table slds-table_bordered slds-table_cell-buffer">            
                     <tr>                     
                      <td data-label="Category">
                        <div class="slds-truncate" title="Category">Category</div>
                      </td>
                      <td>
                        <div class="slds-truncate" > 
                            <lightning:formattedText value="{!v.campaign.cel_Category__c}" style="string"/>
                        </div>
                      </td>
                      <td data-label="Invited">
                        <div class="slds-truncate" title="Invited">Invited</div>
                      </td>
                      <td>
                        <div class="slds-truncate">                           
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalInvited__c}"/></div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td >
                        <div class="slds-truncate" title="tot_pot_sales">Total Direct Sales</div>
                      </td>                       
                      <td>
                        <div class="slds-truncate">
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalDirectSales__c}" style="currency"/>
                        </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Clienteling_rate">
                        <div class="slds-truncate" title="Clienteling_rate">Total Confirmed</div>
                      </td>                        
                      <td data-label="Clienteling_rate_val">
                        	<div class="slds-truncate" >
                               <lightning:formattedNumber value="{!v.campaign.cel_TotalConfirmed__c}"/>
                            </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                    </tr>              
                <!--*********************** -->
                    <tr>  
                      <td data-label="Sub Category">
                        <div class="slds-truncate" title="Bub Category">Sub Category</div>
                      </td>
                      <td>
                        <div class="slds-truncate" > 
                            <lightning:formattedText value="{!v.campaign.cel_SubCatergory__c}" style="string"/>
                        </div>
                      </td>
                      <td data-label="PERIOD">
                        <div class="slds-truncate" title="Period">Star date</div>
                      </td>
                      <td data-label="Period_Plage">
                        <div class="slds-truncate" title="Period_Plage">
                            <lightning:formattedDateTime value="{!v.campaign.StartDate}" style="Date"/>
                        </div>
                      </td> 
                      <td data-label="emp">
                      </td>
                      <td >
                        <div class="slds-truncate" title="Period">End date</div>
                      </td>
                      <td data-label="Period_Plage">
                        <div class="slds-truncate" title="Period_Plage">
                            <lightning:formattedDateTime value="{!v.campaign.EndDate}" style="Date"/>
                        </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Contacted">
                        <div class="slds-truncate" title="Contacted">Country</div>
                      </td>
                      <td data-label="Val_Contacted">
                        <div class="slds-truncate" title="Val_Contacted">
                         <lightning:formattedText value="{!v.campaign.cel_Countries__c}" style="string"/>
                        </div>
                      </td>    
                       <td data-label="Activation_rate_val">
                        	<div class="slds-truncate" title="Activation_rate_val"></div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                    </tr>                          
                 <!-- ************** -->
                    <tr>                  
                      <td>
                        <div class="slds-truncate">Budget(€)</div>
                      </td>
                      <td >
                        <div class="slds-truncate">
                        	<lightning:formattedNumber value="{!v.campaign.cel_BudgetEuro__c}" style="currency"/>
                        </div>
                      </td>                      
                      <td data-label="Resa_whith_deposit">
                        <div class="slds-truncate" title="tot_pot_sales">Sales Target Res W Deposit</div>
                      </td>          
                      <td data-label="Resa_whith_deposit_amount">
                        <div class="slds-truncate" title="Resa_whith_deposit_amount">
                        	<lightning:formattedNumber value="{!v.campaign.cel_SalesTargetResWDeposit__c}" style="currency"/>  
                        </div>
                      </td>
                        <td data-label="Resa_whith_deposit_amount_percent">
                        <div class="slds-truncate" title="Resa_whith_deposit_amount_percent"></div>
                      </td>
                        <td data-label="Cross_selling_rate">
                        <div class="slds-truncate" title="Cross_selling_rate">Sales Target Res W/O Deposit</div>
                      </td>
                         <td data-label="Cross_selling_rate_val">
                        	<div class="slds-truncate" title="Cross_selling_rate_val">
                             	<lightning:formattedNumber value="{!v.campaign.cel_SalesTargetResWODeposit__c}" style="currency"/>  
                            </div>
                      	</td>
                       <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                        
                       <td data-label="Total_SLG">
                        <div class="slds-truncate" title="Total SLG">Total SLG</div>
                      </td>
                      <td>
                        <div class="slds-truncate">                           
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalSLG__c}" style="currency"/></div>
                      </td>
                    </tr>                              
                 <!-- *************** -->
                    <tr>
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up">Total show-up</div>
                      </td>
                      <td data-label="Val_Show_up">
                        <div class="slds-truncate" title="Val_Show_up">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalShowUp__c}"/>
                       </div>
                      </td>
                      <td>
                        <div class="slds-truncate" >Total purchasing</div>
                      </td>                   
                      <td data-label="Resa_whithout_deposit_amount">
                        <div class="slds-truncate" >
                          	 <lightning:formattedNumber value="{!v.campaign.cel_TotalPurchasing__c}" style="currency"/>
                        </div>
                      </td>
                      <td >
                        <div class="slds-truncate" ></div>
                      </td>
                      <td data-label="Target_achieved">
                        <div class="slds-truncate" title="Target_achieved">Store(s)</div>
                      </td>                        
                      <td data-label="Target_achieved_val">
                       	<div class="slds-truncate" >                           
                        	<lightning:formattedText value="{!v.campaign.cel_Stores__c}" style="string"/>
                        </div>
                      </td> 
                        
                      <td data-label="Target_achieved_val_euro">
                        <div class="slds-truncate" title="Target_achieved_val_euro"></div>
                      </td>
                        
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up">Total RTW</div>
                      </td>
                      <td data-label="TotalRTw">
                        <div class="slds-truncate" title="TotalRTW">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalRTW__c}"/>
                       </div>
                      </td>  
                        
                      <td data-label="Target_achieved_val_euro">
                        <div class="slds-truncate" title="Target_achieved_val_euro"></div>
                      </td>
                    </tr>
          
                 <!-- Store -->
                 <tr >                    
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up"> total Shoes</div>
                      </td>
                      <td data-label="TotalShoes">
                       <div class="slds-truncate" title="TotalShoes">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalShoes__c}"/>
                       </div>
                      </td>                                      
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up"> total Bags</div>
                      </td>
                      <td data-label="TotalBags">
                       <div class="slds-truncate" title="TotalBags">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalBags__c}"/>
                       </div>
                      </td> 
                      <td data-label="Val_Purchasing_percent">
                        <div class="slds-truncate" title="Val_Purchasing_percent"></div>
                      </td>
                      <td data-label="TotalACC">
                        <div class="slds-truncate" title="TotalACC">Total ACC</div>
                      </td> 
                      <td data-label="Total ACC">
                        <div class="slds-truncate" title="otal ACC">
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalACC__c}" style="currency"/>
                        </div>
                      </td>
                        <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Men/Women">
                        <div class="slds-truncate" title="Men/Women">Men/Women</div>
                      </td>                        
                      <td data-label="Men/Women">
                       	<div class="slds-truncate" >                           
                        	<lightning:formattedText value="{!v.campaign.cel_MenWomen__c}" style="string"/>
                        </div>
                      </td>    
                 </tr>
        </table>
    </div>
</aura:component>
 
// Controller JS 


({
    doInit: function(component, event, helper) {
      var action = component.get("c.getCampaign");
          action.setParams({ CampaignId : component.get("v.recordId") }); 
          action.setCallback(this, function(response){
      var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.campaigns", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
    },
    
     clickActive: function(component, event, helper) {
        var campaign = component.get("v.recordId");
        campaign.setParams({ "campaign": campaign });
        campaign.fire();
    }
})
 
// Controller Js helper

({ 
   doInit: function(component, event, helper) {
      var action = component.get("c.recordId");         
          action.setParams({recordId : component.get("v.recordId")});            
          action.setCallback(this, function(response) {
      var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.recordId", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
    },  
    clickActive: function(component, event, helper) {
        var campaign = component.get("v.recordId");
        campaign.setParams({ "campaign": campaign });
        campaign.fire();
    }
})

 

All Answers

SandhyaSandhya (Salesforce Developers) 
Hi,

You can use Lightning: datatable base component.

Refer below links.

http://sfdcmonkey.com/2018/01/05/lightning-datatable-base-component/
 
http://sfdcmonkey.com/2018/01/05/lightning-datatable-base-component/
 
Best Regards,
Sandhya
Amidou CisseAmidou Cisse
 I tried to display that with force:recordData, but it don't work, Please do you have onather way to do that ?
User-added image

<aura:component controller="campaignApexController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="record" type="Object" description="The record object to be displayed"/>
    <aura:attribute name="CampaignRecord" type="Object"  description="A simplified view record object to be displayed"/>
    <aura:attribute name="recordError" type="String" description="An error message bound to force:recordData"/>  
    <force:recordData aura:id="record"
      recordId="{!v.recordId}"
      targetFields="{!v.CampaignRecord}"
      targetError="{!v.recordError}"
      targetRecord="{!v.record}"
      mode="VIEW"
      />
    
<!-- Display a lightning card with details about the record -->
<div class="Record Details"> 
    <lightning:card iconName="standard:account" title="{!v.CampaignRecord.Name}" >

    <div style="overflow-x:auto;" class="container theTable">        
            <h1 style="font-weight: bold; color:white"> Details Campaign </h1>       
            <table class="slds-table slds-table_bordered slds-table_cell-buffer">            
                    <tr>                     
                      <td data-label="Category">
                          <div class="slds-truncate" title="Category"> Category </div>                      
                      </td>
                      <td >
                        <div class="slds-truncate"> 
                          <lightning:formattedText title="Category" value="{!v.CampaignRecord.Celine_Category__c}" /> 
                        </div>
                      </td>
                      <td data-label="Invited">
                        <div class="slds-truncate" title="Invited"> Invited </div>
                      </td>
                      <td data-label="Invited">
                        <div class="slds-truncate"> 
                            <lightning:formattedText value="{!v.CampaignRecord.Celine_TotalInvited__c}" />
                         </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="tot_pot_sales">
                        <div class="slds-truncate" > Total Direct Sales </div>
                      </td>                    
                      <td data-label="tot_pot_sales_amount">
                        <div class="slds-truncate" > 
                            <lightning:outputField value="{!v.CampaignRecord.Celine_TotalDirectSales__c}" />
                          </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Clienteling_rate">
                         <div class="slds-truncate" title="Clienteling_rate">Total Units</div>
                      </td>                      
                      <td data-label="Clienteling_rate_val">
                          <div class="slds-truncate">                         
                              <lightning:outputField value="{!v.CampaignRecord.Celine_Total__c}" />
                          </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                   </tr>
                               
                   <tr>                     
                      <td data-label="Category">
                          <div class="slds-truncate" title="Category"> Category </div>                      
                      </td>
                      <td data-label="Preview">
                        <div class="slds-truncate"> <ui:outputText value="{!v.CampaignRecord.Celine_Category__c}"/> </div>
                      </td>
                      <td data-label="Invited">
                        <div class="slds-truncate" title="Invited"> Invited </div>
                      </td>
                      <td data-label="Invited">
                        <div class="slds-truncate"> <ui:outputNumber value="{!v.CampaignRecord.Celine_TotalInvited__c}"/> </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="tot_pot_sales">
                        <div class="slds-truncate" > Total Direct Sales </div>
                      </td>                    
                      <td data-label="tot_pot_sales_amount">
                        <div class="slds-truncate" > <ui:outputNumber value="{!v.CampaignRecord.Celine_TotalDirectSales__c}"/></div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Clienteling_rate">
                         <div class="slds-truncate" title="Clienteling_rate">Total Units</div>
                      </td>                      
                      <td data-label="Clienteling_rate_val">
                          <div class="slds-truncate"> <ui:outputNumber value="{!v.CampaignRecord.Celine_Total__c}"/> </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                   </tr>
                               
                   <tr>                     
                      <td data-label="Category">
                          <div class="slds-truncate" title="Category"> Category </div>                      
                      </td>
                      <td data-label="Preview">
                        <div class="slds-truncate"> <ui:outputText value="{!v.CampaignRecord.Celine_Category__c}"/> </div>
                      </td>
                      <td data-label="Invited">
                        <div class="slds-truncate" title="Invited"> Invited </div>
                      </td>
                      <td data-label="Invited">
                        <div class="slds-truncate"> <ui:outputNumber value="{!v.CampaignRecord.Celine_TotalInvited__c}"/> </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="tot_pot_sales">
                        <div class="slds-truncate" > Total Direct Sales </div>
                      </td>                    
                      <td data-label="tot_pot_sales_amount">
                        <div class="slds-truncate" > <ui:outputNumber value="{!v.CampaignRecord.Celine_TotalDirectSales__c}"/></div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Clienteling_rate">
                         <div class="slds-truncate" title="Clienteling_rate">Total Units</div>
                      </td>                      
                      <td data-label="Clienteling_rate_val">
                          <div class="slds-truncate"> <ui:outputNumber value="{!v.CampaignRecord.Celine_Total__c}"/> </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                   </tr>                             
        </table>
    </div>
 <!-- </aura:iteration> --> 
    </lightning:card>
</div>
<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.recordError))}">
    <div class="recordError">
        {!v.recordError}</div>
</aura:if>
</aura:component>
Amidou CisseAmidou Cisse
Thanks gays, my problème is solved, it work.

User-added image

 
// Controller Apex


public with sharing class CampaignController {
    
    @AuraEnabled
    public static List<Campaign> getCampaign(Id CampaignId) {
        return [SELECT Id, cel_ext_id_campaign__c, Name, cel_category__c, cel_SubCatergory__c, IsActive, cel_Countries__c, BudgetedCost, StartDate, EndDate, cel_Format__c, cel_MenWomen__c,
                NumberSent, cel_Reason__c, NumberOfResponses,cel_Stores__c, cel_AmountTotal__c, cel_TotalConfirmed__c, cel_TotalDirectSales__c, cel_TotalInvited__c,
                cel_TotalPurchasing__c, cel_TotalSales__c, cel_TotalShowUp__c, cel_Total__c, cel_BudgetEuro__c, cel_SalesTargetResWDeposit__c, cel_SalesTargetResWODeposit__c,
                cel_TotalSLG__c, cel_TotalRTW__c, cel_TotalShoes__c, cel_TotalBags__c, cel_TotalACC__c
                FROM Campaign where Id=:CampaignId];
    }   
    @AuraEnabled
    public static Campaign saveCampaign(Campaign campaign) {
        upsert campaign;
        return campaign;
    }     
}
 
// Componant 1 


<aura:component controller="CampaignController" implements="lightning:isUrlAddressable,force:hasSObjectName,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">                                                           
	<aura:attribute name="recordId" type="String" />
    <aura:attribute name="campaigns" type="Campaign[]"/>     
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>  
        <lightning:layoutItem >
            <c:CEL_CampaignDetailList campaigns="{!v.campaigns}"/>
        </lightning:layoutItem>
</aura:component>
 
//componant 2


<aura:component controller="CampaignController" access="global" >
   <aura:attribute name="recordId" type="String" />
   <aura:attribute name="campaigns" type="Campaign[]"/>
	 <lightning:card title="">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.campaigns}" var="campaign">
                <c:CEL_CampaignItem campaign="{!campaign}"/>
            </aura:iteration>
        </p>
    </lightning:card>
</aura:component>
 
// Componant 3

<aura:component controller="CampaignController" access="global"> 
   <aura:attribute name="recordId" type="String" />
   <aura:attribute name="campaign" type="Campaign[]"/>
   
    <div class=" slds-grid slds-grid_vertical " style="height:auto width:auto;" >    
         <h1 style="font-weight: bold; color:white; text-align:center;"> Campaign Details </h1> 
        	<table class="slds-table slds-table_bordered slds-table_cell-buffer">            
                     <tr>                     
                      <td data-label="Category">
                        <div class="slds-truncate" title="Category">Category</div>
                      </td>
                      <td>
                        <div class="slds-truncate" > 
                            <lightning:formattedText value="{!v.campaign.cel_Category__c}" style="string"/>
                        </div>
                      </td>
                      <td data-label="Invited">
                        <div class="slds-truncate" title="Invited">Invited</div>
                      </td>
                      <td>
                        <div class="slds-truncate">                           
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalInvited__c}"/></div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td >
                        <div class="slds-truncate" title="tot_pot_sales">Total Direct Sales</div>
                      </td>                       
                      <td>
                        <div class="slds-truncate">
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalDirectSales__c}" style="currency"/>
                        </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Clienteling_rate">
                        <div class="slds-truncate" title="Clienteling_rate">Total Confirmed</div>
                      </td>                        
                      <td data-label="Clienteling_rate_val">
                        	<div class="slds-truncate" >
                               <lightning:formattedNumber value="{!v.campaign.cel_TotalConfirmed__c}"/>
                            </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                    </tr>              
                <!--*********************** -->
                    <tr>  
                      <td data-label="Sub Category">
                        <div class="slds-truncate" title="Bub Category">Sub Category</div>
                      </td>
                      <td>
                        <div class="slds-truncate" > 
                            <lightning:formattedText value="{!v.campaign.cel_SubCatergory__c}" style="string"/>
                        </div>
                      </td>
                      <td data-label="PERIOD">
                        <div class="slds-truncate" title="Period">Star date</div>
                      </td>
                      <td data-label="Period_Plage">
                        <div class="slds-truncate" title="Period_Plage">
                            <lightning:formattedDateTime value="{!v.campaign.StartDate}" style="Date"/>
                        </div>
                      </td> 
                      <td data-label="emp">
                      </td>
                      <td >
                        <div class="slds-truncate" title="Period">End date</div>
                      </td>
                      <td data-label="Period_Plage">
                        <div class="slds-truncate" title="Period_Plage">
                            <lightning:formattedDateTime value="{!v.campaign.EndDate}" style="Date"/>
                        </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Contacted">
                        <div class="slds-truncate" title="Contacted">Country</div>
                      </td>
                      <td data-label="Val_Contacted">
                        <div class="slds-truncate" title="Val_Contacted">
                         <lightning:formattedText value="{!v.campaign.cel_Countries__c}" style="string"/>
                        </div>
                      </td>    
                       <td data-label="Activation_rate_val">
                        	<div class="slds-truncate" title="Activation_rate_val"></div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                    </tr>                          
                 <!-- ************** -->
                    <tr>                  
                      <td>
                        <div class="slds-truncate">Budget(€)</div>
                      </td>
                      <td >
                        <div class="slds-truncate">
                        	<lightning:formattedNumber value="{!v.campaign.cel_BudgetEuro__c}" style="currency"/>
                        </div>
                      </td>                      
                      <td data-label="Resa_whith_deposit">
                        <div class="slds-truncate" title="tot_pot_sales">Sales Target Res W Deposit</div>
                      </td>          
                      <td data-label="Resa_whith_deposit_amount">
                        <div class="slds-truncate" title="Resa_whith_deposit_amount">
                        	<lightning:formattedNumber value="{!v.campaign.cel_SalesTargetResWDeposit__c}" style="currency"/>  
                        </div>
                      </td>
                        <td data-label="Resa_whith_deposit_amount_percent">
                        <div class="slds-truncate" title="Resa_whith_deposit_amount_percent"></div>
                      </td>
                        <td data-label="Cross_selling_rate">
                        <div class="slds-truncate" title="Cross_selling_rate">Sales Target Res W/O Deposit</div>
                      </td>
                         <td data-label="Cross_selling_rate_val">
                        	<div class="slds-truncate" title="Cross_selling_rate_val">
                             	<lightning:formattedNumber value="{!v.campaign.cel_SalesTargetResWODeposit__c}" style="currency"/>  
                            </div>
                      	</td>
                       <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                        
                       <td data-label="Total_SLG">
                        <div class="slds-truncate" title="Total SLG">Total SLG</div>
                      </td>
                      <td>
                        <div class="slds-truncate">                           
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalSLG__c}" style="currency"/></div>
                      </td>
                    </tr>                              
                 <!-- *************** -->
                    <tr>
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up">Total show-up</div>
                      </td>
                      <td data-label="Val_Show_up">
                        <div class="slds-truncate" title="Val_Show_up">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalShowUp__c}"/>
                       </div>
                      </td>
                      <td>
                        <div class="slds-truncate" >Total purchasing</div>
                      </td>                   
                      <td data-label="Resa_whithout_deposit_amount">
                        <div class="slds-truncate" >
                          	 <lightning:formattedNumber value="{!v.campaign.cel_TotalPurchasing__c}" style="currency"/>
                        </div>
                      </td>
                      <td >
                        <div class="slds-truncate" ></div>
                      </td>
                      <td data-label="Target_achieved">
                        <div class="slds-truncate" title="Target_achieved">Store(s)</div>
                      </td>                        
                      <td data-label="Target_achieved_val">
                       	<div class="slds-truncate" >                           
                        	<lightning:formattedText value="{!v.campaign.cel_Stores__c}" style="string"/>
                        </div>
                      </td> 
                        
                      <td data-label="Target_achieved_val_euro">
                        <div class="slds-truncate" title="Target_achieved_val_euro"></div>
                      </td>
                        
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up">Total RTW</div>
                      </td>
                      <td data-label="TotalRTw">
                        <div class="slds-truncate" title="TotalRTW">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalRTW__c}"/>
                       </div>
                      </td>  
                        
                      <td data-label="Target_achieved_val_euro">
                        <div class="slds-truncate" title="Target_achieved_val_euro"></div>
                      </td>
                    </tr>
          
                 <!-- Store -->
                 <tr >                    
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up"> total Shoes</div>
                      </td>
                      <td data-label="TotalShoes">
                       <div class="slds-truncate" title="TotalShoes">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalShoes__c}"/>
                       </div>
                      </td>                                      
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up"> total Bags</div>
                      </td>
                      <td data-label="TotalBags">
                       <div class="slds-truncate" title="TotalBags">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalBags__c}"/>
                       </div>
                      </td> 
                      <td data-label="Val_Purchasing_percent">
                        <div class="slds-truncate" title="Val_Purchasing_percent"></div>
                      </td>
                      <td data-label="TotalACC">
                        <div class="slds-truncate" title="TotalACC">Total ACC</div>
                      </td> 
                      <td data-label="Total ACC">
                        <div class="slds-truncate" title="otal ACC">
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalACC__c}" style="currency"/>
                        </div>
                      </td>
                        <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Men/Women">
                        <div class="slds-truncate" title="Men/Women">Men/Women</div>
                      </td>                        
                      <td data-label="Men/Women">
                       	<div class="slds-truncate" >                           
                        	<lightning:formattedText value="{!v.campaign.cel_MenWomen__c}" style="string"/>
                        </div>
                      </td>    
                 </tr>
        </table>
    </div>
</aura:component>
 
// Controller JS 


({
    doInit: function(component, event, helper) {
      var action = component.get("c.getCampaign");
          action.setParams({ CampaignId : component.get("v.recordId") }); 
          action.setCallback(this, function(response){
      var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.campaigns", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
    },
    
     clickActive: function(component, event, helper) {
        var campaign = component.get("v.recordId");
        campaign.setParams({ "campaign": campaign });
        campaign.fire();
    }
})
 
// Controller Js helper

({ 
   doInit: function(component, event, helper) {
      var action = component.get("c.recordId");         
          action.setParams({recordId : component.get("v.recordId")});            
          action.setCallback(this, function(response) {
      var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.recordId", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
    },  
    clickActive: function(component, event, helper) {
        var campaign = component.get("v.recordId");
        campaign.setParams({ "campaign": campaign });
        campaign.fire();
    }
})

 
This was selected as the best answer
Team Codekiat.comTeam Codekiat.com
datatable implementation with lightning web components 
https://www.codekiat.com/2019/08/salesforce-lightning-datatable-example-with-lwc-lightning-web-component.html

--
​​​​​​​Naveen K N