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.

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: