function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
NyshaaNyshaa 

Display multiple table in a single lightning table

I have created a lightning component
I am displaying my data in a Lightning data table format
User-added imageNow, I want to create 3 tables to display these 3 records seperately.
i.e I want a table to show the details of Service Name A , And similary for Service Name B & C 
At the end of all the three tables I want to show the Sum of Total Cost & Effort.

How can I create 3 data table in a single component to display  3 records seperately

Apex Controller:

public with sharing class ASDcompanyapex
{
    @AuraEnabled
    public static List<Service_Line__c> getServiceLine(string recordId) 
    {
        List<Service_Line__c> ServiceLineList =[Select Name, Status__c, Line_Type__c, Total_Effort_Taken__c,Total_Line_Cost__c  from Service_Line__c where Service_Request__c =: recordId];
        system.debug(ServiceLineList);
            
            return ServiceLineList;
            
        
    }
}
Component: 
<aura:component controller="ASDcompanyapex"  implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" access="global">
    
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute type="Service_Line__c" name="ServiceLineList"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="data" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.servicelist}"/>
    
    
    <lightning:datatable data="{! v.data }"
                         columns="{! v.mycolumns }"
                         keyField="id"
                         hideCheckboxColumn="true"/>

</aura:component>

Controller: 
({
    servicelist : function(component, event, helper) {
        var rid = component.get("v.recordId");
        
        helper.fetchServiceLineHelper(component, event, helper);
    }
})

Helper: 
({
    fetchServiceLineHelper : function(component, event, helper) {
        debugger;
        var action = component.get("c.getServiceLine");
        var rec = component.get("v.recordId");
        action.setParams({
            "recordId": rec
        });
        action.setCallback(this, function(response){
            debugger;
            var state = response.getState();
            
            debugger;
            if (state === "SUCCESS") {
                
                component.set('v.mycolumns', [
                    {label: 'Service Line Name', fieldName: 'Name'},
                    {label: 'Status', fieldName: 'Status__c'},
                    {label: 'Line Type', fieldName: 'Line_Type__c'},
                    {label: 'Total Effort', fieldName: 'Total_Effort_Taken__c', type: 'number', cellAttributes: { alignment: 'left' }},
                    {label: 'Total Line Cost', fieldName: 'Total_Line_Cost__c', type: 'currency'},
                    
                ]);
                    
                    debugger;
                    var res = response.getReturnValue();
                    component.set("v.data" , res);
                    debugger;
                    
                    
                    }
                    
                    
                    });
                    $A.enqueueAction(action);
                    }
                    })
Gaurav SadhwaniGaurav Sadhwani
Hi Nyshaa,
To create individual datatable for each record, you need to make map<Id, List<sObject>> and iterate over this map and pass list<sObject> to datatable, as data attribute accpets list. Something like this:

APEX: 
@AuraEnabled
    public static Map<Id, List<Contact>> getContactMap() {
        Map<Id, List<Contact>> contactMap = new Map<Id, List<Contact>>();
        For (Contact con : [Select Id, Name, Phone, Email From Contact Limit 5]) {
            contactMap.put(con.Id, new List<Contact>{con});
        }
        return contactMap;
    }
CMP: 
<aura:component controller="MultipleDatatableClass">
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="data" type="object" />

    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <div class="slds-m-around_xx-large">
        <div class="slds-box slds-theme_default">
            <aura:iteration items="{!v.data}" var="element">
                <br/> <br/>
                <lightning:datatable data="{!element.value}"
                                     columns="{!v.columns }"
                                     keyField="Id"
                                     hideCheckboxColumn="true"/>
            </aura:iteration>
            
        </div>
    </div>
</aura:component>
CONTROLLER: 
({
   init: function (cmp, event, helper) {
        helper.handleAction(cmp, event, helper);
    }
});
HELPER: 
({
	handleAction : function(component, event, helper) {
        component.set('v.columns', [
            {label: 'Id', fieldName: 'Id', type: 'Id'},
            {label: 'Name', fieldName: 'Name', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'},
        ]);

        var action = component.get("c.getContactMap");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS") {
              	var result = response.getReturnValue();
                var arrayMapKeys = [];
                for(var key in result){
                    arrayMapKeys.push({key: key, value: result[key]});
                }
                component.set("v.data", arrayMapKeys);
            }
        });
        $A.enqueueAction(action);
	}
})
Hope this helps!
Arti Dhamale 1Arti Dhamale 1

@Nyshaa Did you get the answer? I am also having similar requirement, could you please share if you were able to figure out the solution?