+ Start a Discussion
Prateek jain 76Prateek jain 76 

Need to create dynamic table in lightning

Hi All , 

I have requirment where i need to display the dynamic table in lightning based on the Object , fileds paased from the Components and display it in vf page.

Please see the code that i am trying here:
===Application====
<aura:application access="GLOBAL" extends="ltng:outApp"    >
 <c:PMD_LightningHomepage object="Opportunity" fields="Id" limit="5" tableId="table1"/>
      <aura:dependency resource="c:PMD_LightningHomepage "  /> 
 </aura:application>

===Component==

<aura:component controller="controller" implements="force:appHostable,flexipage:availableForAllPageTypes">
    <ltng:require styles="/resource/SDLC212/assets/styles/salesforce-lightning-design-system-vf.min.css" />
    <aura:attribute name="object" type="String" />
    <aura:attribute name="limit" type="String" default="5" />
    <aura:attribute type="sObject[]" name="latestRecords" />
    <aura:attribute name="fields" type="String[]" default="Id,Name" />
    <aura:attribute name="tableId" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
        <head>
        </head>    
        <body> 
            <div class="wrapperscoop">                
                <div class="slds-card__header slds-grid">
                    <div class="slds-media slds-mcate">
                        <div class="slds-media__figure">                           
                        </div>
                        <div class="slds-media__body">
                            <h2 class="slds-text-heading--small slds-truncate">Recently Viewed</h2>
                        </div>
                    </div>                   
                </div>
                <div class="slds-card__body">                    
                    <section class="slds-card__body">
                        <div class="slds-scrollable--x">
                            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
                                <thead>
                                    <tr class="slds-no-hover">
                                        <aura:iteration items="{!v.fields}" var="field" >
                                            <th class="slds-text-heading--label slds-size--1-of-6" scope="col">{!field}</th>
                                        </aura:iteration>
                                    </tr>
                                </thead>
                                <tbody id="{!v.tableId}">
                              </tbody>
                                    
                            </table>
                        </div>
                    </section>
                </div>
            </div>            
        </body>
    </html>
</aura:component>

===Js-controller=====
({
    doInit  : function(component, event, helper) {
        var action = component.get("c.getRecords");
        var fields = component.get("v.fields");  
        var tableId = component.get("v.tableId"); 
        action.setParams({
            ObjectName : component.get("v.object"),
            limits : component.get("v.limit"),
            //alert('Check1' + fields);
            fieldstoget : fields.join()
        });
        
        action.setCallback(this,function(response){
            var delayMillis = 1000;
            var state = response.getState();
            if(state === 'SUCCESS'){
                component.set("v.latestRecords",response.getReturnValue());
                var retRecords = response.getReturnValue();
                retRecords.forEach(function(s) {
                    var tableRow = document.createElement('tr');
                    fields.forEach(function(field){ 
                        var tableData = document.createElement('td');
                        var tableDataNode = document.createTextNode(s[field]);
                        tableData.appendChild(tableDataNode);
                        tableRow.appendChild(tableData);
                    });
                    // alert(tableId);
                    //alert('tableval' + document.getElementById(tableId) );
                    setTimeout(function() {
                       
                        alert(document.getElementById(component.get("{!v.tableId}")));
                   document.getElementById(component.get("{!v.tableId}")).appendChild(tableRow);
                 }, delayMillis);
                    
                });
            }else if (state === "ERROR") {
                console.log('Error');
            }          
        });
       $A.enqueueAction(action);
        
    }
})

But when i try calling it from Vf page its not able to take the div id and reads it null and hence shows below error , can anybody help me on this,thanks..

Error:
This page has an error. You might just need to refresh it. Error in $A.getCallback() [Cannot read property 'appendChild' of null] Callback failed: apex://PMD_DispRecordsController/ACTION$getRecords Failing descriptor: {markup://c:PMD_LightningHomepage}

Please suggest .

Note : This coponnent Works fine when i do not call it from Vf page i.e preview it directly.



 
Abhishek Sagar 1Abhishek Sagar 1
I have also created a dynamic table component. All you need to do is pass object name, columns and filter criteria. Sorting is also implememnted and its mobile compatible. I can share the code if you like.
Prateek Jain 52Prateek Jain 52
Hi Abhishek, 

Will that code work on vf as well?? I realy appricate your help here i fyou can send me the code at prateek_jain61@yahoo.com.

Awaiting your reply on this, thanks
Abhishek Sagar 1Abhishek Sagar 1
I am not sure if this will work on VF as well. Are you displaying any other details on vf other than table itself?
Prateek Jain 52Prateek Jain 52
Hi Abhishek, Can you please Send it to prateek_jain61@yahoo.com so that i can have a look, thanks
Abinash Barik 9Abinash Barik 9
Hi Abhishek, Can you please Send it to abinashdiscover@gmail.com. thanks.
Joel Dcruz 1Joel Dcruz 1
HI please send me this code! jmickdcruz@gmail.com
yogesh mulchandaniyogesh mulchandani
hi abhishek, please send me the code. yogesh.mulchandani29@gmail.com
Chema PerezChema Perez
Hi, can you also send it to akindofcode@gmail.com Thanks!
Vikrant Kumar 14Vikrant Kumar 14

Hi, can you please send the code to vicky77kr@gmail.com

Thanks

Gaurang Joshi 4Gaurang Joshi 4
Hi Abhishek, can you please share the code to gaurangjoshi90@gmail.com. I have created a dynamic table, but I need to add filter criteria. Thank You!
Yves Asselin 11Yves Asselin 11
Hi Abhishek, can you please share the code to this page or send it to my email... yvesasselin@videotrton.ca
Thank you!
PappuPappu
Hi Abhishek, can you please share the code to this page or send it to my email sethurha4691@gmail.com
Thank you!
Aravindh V 8Aravindh V 8
Hi Abishek, Can you share the code with aravindhv04@gmail.com? If anyone else has please share.
Kalpesh Shah 12Kalpesh Shah 12
Hi Abhishek,

I too am looking for the same solution. Can you share your code with me? kpshome@gmail.com

Thank you.
Anil GangarajaiahAnil Gangarajaiah
Hi Abhishek,

I am working on the same requirement, have to add filter on the rows, it would be great help if u send me the code to this mail anil.gangarajaiah11@gmail.com
Deepthi t 6Deepthi t 6
Hi Abhishek, can you please send it me. tdeepthi1989@gmail.com
neelesh khandelwalneelesh khandelwal
Hi Abhishek, can you please send it me. neeleshkhandelwal95@gmail.com
Andrew Willardson 3Andrew Willardson 3
If anyone else encounters this and it doesn't work for them (in aura),
I needed double qoutes on the element create to get it to work:

var tableRow = document.createElement("tr");