Generic and Responsive Table Component in Salesforce Lightning

Almost one year ago, I wrote this article to demonstrate how to create a responsive datagrid component in Lightning. Recently, when I went back to the post, I realized that responsive table component in Lightning could be a lot more easier. So, lets see easier and efficient approach to create a Responsive and Generic Table component in Lightning.

First and foremost, we need to provide data in below JSON format to Lightning component, everything else would be taken care by component itself.

JSON format for responsive datagrid Lightning component
JSON format for responsive data grid Lightning component

As shown in above image, JSON will have two arrays, headers and rows. Headers will have below four properties

  1. Title
  2. isSortable (will not be used in this post, but for future use)
  3. dataType
  4. cssClass

Rows will have collections of columns. Obviously column count should match with total count of headers. Each column will have below two properties

  1. val
  2. cssClass

In aura:iterator component, we cannot use indexvar to refer other list. If this was possible, then instead of defining cssClass for every column, we could have easily read it from headers.

In this blog post, we will prepare test JSON in helper Javascript bundle only, however in actual application, this JSON would be returned from Apex / Server side controller. Lets jump to code now.

ResponsiveGrid.cmp

<aura:component >
	<aura:attribute name="gridData" type="Object"/>    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>   
    
<div class="slds">
<table class="slds-table slds-table--bordered">    	
<thead>
<tr class="slds-text-heading--label">            	
                 <aura:iteration items="{!v.gridData.headers}" var="col">                     
<th class="{!col.cssClass}"> {!col.title} </th>  
                </aura:iteration>                
            </tr>        	 
        </thead>
<tbody>
            <!-- Limitation - we cannot use indexvar of iterator control to refer header json information else, instead of defining css class for each column, we could have used it from header only -->
            <aura:iteration items="{!v.gridData.rows}" var="row">
                
<tr class="slds-hint-parent"> 
                	<aura:iteration items="{!row.vals}" var="col" indexVar="idx">                         
<td class="{!col.cssClass}">{!col.val}</td> 
                    </aura:iteration>
                </tr>
             </aura:iteration>              
        </tbody>    
    	</table>
    </div>
</aura:component>

ResponsiveGridController.js

({
	doInit : function(component, event, helper) {
		helper.doInit(component, event, helper);
	}
})

ResponsiveGridHelper.js

({
	doInit : function(component, event, helper) {
        var jsonData = JSON.parse(helper.getSampleJSON());
        console.log(jsonData); 
        component.set("v.gridData",jsonData);
	},
    getSampleJSON : function(){
        return '{"rows":[{"vals":[{"val":"Salesforce","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@Salesforce.com","cssClass":""},{"val":"8602229632","cssClass":"responsiveHide"}]},{"vals":[{"val":"Microsoft","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@microsoft.com","cssClass":""},{"val":"8602283222","cssClass":"responsiveHide"}]},{"vals":[{"val":"SAP","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@SAP.com","cssClass":""},{"val":"8600942222","cssClass":"responsiveHide"}]},{"vals":[{"val":"Google","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@Google.com","cssClass":""},{"val":"8602479222","cssClass":"responsiveHide"}]}],"headers":[{"title":"Client Name","isSortable":false,"dataType":"","cssClass":""},{"title":"Address","isSortable":false,"dataType":"","cssClass":""},{"title":"Email","isSortable":false,"dataType":"","cssClass":""},{"title":"Mobile","isSortable":false,"dataType":"","cssClass":"responsiveHide"}]}';
    }
})

ResponsiveGrid.css

@media(max-width:700px){
    .THIS .responsiveHide{
        display : none !important;
    }
}

DemoApp.app

<aura:application >
	<ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system.min.css" />
    <c:ResponsiveGrid />
</aura:application>

Above Lightning application is created to test responsive datagrid component. We have used ltng:require tag to import Salesforce Lightning design System (SLDS).

Output:

Generic and Responsive Table - Lightning Component
Generic and Responsive Table – Lightning Component

Posted

in

by


Related Posts

Comments

4 responses to “Generic and Responsive Table Component in Salesforce Lightning”

  1. Diwanshu Avatar
    Diwanshu

    Hi i m looking out for custom account hierarchy cmp in lightning that can be called any where which is exactly replica of standard account hierarchy with expand and collapse functionality.
    I am facing issues with expand collapse .

  2. durga Avatar
    durga

    here i got filled integrity exception in helper class that is Failed to save tabelJsonHelper.js: 0Ad7F000000xtZD: org.auraframework.util.json.JsonStreamReader$JsonParseException: End of stream unexpectedly reached.: Source

  3. amirbensalem Avatar

    Hi, i try this tuto but the slds design didnt display in my component

  4. suvarna Avatar
    suvarna

    –>display accounts in grid view using lightning.
    Thanks.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading