DYNAMIC REUSABLE LIGHTNING TABLE COMPONENT wITH DESIGN BUNDLE

I have created a lightning component with a design bundle, Design bundle gives us the functionality to change the value of the design attribute and make it reusable.

Create a component with a Design bundle

Component:

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

<aura:attribute name="ObjValue" type="String" />

<aura:attribute name="fieldValue" type="String" />

<aura:attribute name="searchValue" type="String" />

<aura:attribute name="listOfValue" type="object" />

<lightning:input label="Enter value" value="{!v.searchValue}" placeholder="Enter any search Name "/>

<br/>

<lightning:button label="Search" onclick="{!c.invoke}" /><br/><br/>

<table class="slds-table slds-table_bordered slds-table–header-fixed">

<aura:iteration var="a" items="{!v.listOfValue.FieldList}">

<th><b>{!a}</b></th>

</aura:iteration>

<aura:iteration var ="rec" items="{!v.listOfValue.detailList}" >

<tr class="slds-text-title–caps">

<aura:iteration var="c" items="{!v.listOfValue.FieldList}">

<c:AccConLead_Child fieldname="{!c}" record="{!rec}" />

</aura:iteration>

</tr>

</aura:iteration>

</table>

</aura:component>

================================

Controller

({

invoke : function(component, event, helper) {

var obj= component.get("v.ObjValue");

var fld= component.get("v.fieldValue");

var search= component.get("v.searchValue");

var action = component.get("c.showlist");

action.setParams(

{

'obj':obj,

'fields' :fld,

'svalue' :search

}

);

action.setCallback(this, function(response)

{

var state= response.getState();

var result= response.getReturnValue();

// alert('result: '+JSON.stringify(result));

component.set("v.listOfValue",result);

});

$A.enqueueAction(action);

}

})

===============================================================

Design Component

<design:component label="Test Design bundle">

<design:attribute name="ObjValue" label="Object" description="Enter object name" />

<design:attribute name="fieldValue" label="Fields" description="Enter Fields name with comma seprated " />

</design:component>

==========================================================

Child Component

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

<aura:attribute name="fieldname" type="String" />

<aura:attribute name="fieldValue" type="String" />

<aura:attribute name="record" type="Object" />

<aura:handler name="init" value="{!this}" action="{!c.doinit}" />

<td>

{!v.fieldValue}

</td>

</aura:component>

===============================================================

Child component controller

({

doinit : function(component, event, helper) {

var fieldname = component.get('v.fieldname');

component.set('v.fieldValue', component.getReference('v.record.' + fieldname));

}

})

=============================================================

In the lightning builder canvas, you can put your desired object name and desire fields name which you want to show on the data table, and save the component.