0

here pass the Object and related query

and here the data shows in console log

I wanted to add the dynamic object query result in Lightning datatable in Aura Lightning ? Data comes in console log but how to add in lightning data table ? Please help me. Code:-

public class DesignAttClass {
 
    @AuraEnabled 
    public static sObject[] getRecords(String query) {
        return Database.query(query);    
    }
}

Controller:-

({
    getRecrdHelper : function(component, event, helper) {
        var action = component.get('c.getRecords');
        action.setParams({'query' : component.get('v.Query')});
        action.setCallback(this, function (res){
            if(res.getState() === 'SUCCESS'){
                console.log('Received = '+JSON.stringify(res.getReturnValue()));
                component.set('v.recordsData',res.getReturnValue());
                
            }else{
                console.log('Something went wrong...!!!!');
            }
        });
        $A.enqueueAction(action);
    }
})

Component:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="DesignAttClass" >

    <aura:attribute name="objectName" type="String" />
    <aura:attribute name="Query" type="String" />
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:attribute name="recordsData" type="List"/>
    <aura:attribute name="recordTableColList" type="List" />
    
    <lightning:card>
        <!--Lightning Data Table Start-->
        <lightning:datatable
                             keyField="id"
                             data="{! v.recordsData }"
                             columns="{! v.recordTableColList }"
                             hideCheckboxColumn="false"      
                             onrowselection ="{!c.selectedLeadRows}"
                             />
        <!--Lightning Data Table End-->
    </lightning:card>
    
</aura:component>

1 Answer 1

1

There are two aspect of it, Generating the columns dynamically as well as generating the tables rows values.

To generate the columns dynamically, You can do like this:

let dynamiccolumns = [];
for (let key in res.getReturnValue()[0]) {
    dynamiccolumns.push({
        fieldName: key,
        label: key,
        type: "text"
    });
}
//setting the columns dynamically
component.set('v.recordTableColList', dynamiccolumns);
//setting the data in table dynamically
component.set('v.recordsData', res.getReturnValue());

So your controller will look like this:-

({
    getRecrdHelper : function(component, event, helper) {
        var action = component.get('c.getRecords');
        action.setParams({'query' : component.get('v.Query')});
        action.setCallback(this, function (res){
            if(res.getState() === 'SUCCESS'){
                console.log('Received = '+JSON.stringify(res.getReturnValue()));
                let dynamiccolumns = [];
                for (let key in res.getReturnValue()[0]) {
                    dynamiccolumns.push({
                        fieldName: key,
                        label: key,
                        type: "text"
                    });
                }
                component.set('v.recordTableColList', dynamiccolumns);
                component.set('v.recordsData', res.getReturnValue());
            }else{
                console.log('Something went wrong...!!!!');
            }
        });
        $A.enqueueAction(action);
    }
})
3
  • Object.keys and Array.map would be more "javascript-y".
    – sfdcfox
    Commented Dec 16, 2022 at 15:09
  • true, let me change the code accordingly. Commented Dec 16, 2022 at 15:23
  • Thank you so much @sanketkumar.
    – Crazy XYZ
    Commented Dec 19, 2022 at 3:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .