{"id":5970,"date":"2017-03-31T05:40:37","date_gmt":"2017-03-31T05:40:37","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5970"},"modified":"2017-04-06T19:34:10","modified_gmt":"2017-04-06T19:34:10","slug":"generic-and-responsive-table-component-in-salesforce-lightning","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/generic-and-responsive-table-component-in-salesforce-lightning\/","title":{"rendered":"Generic and Responsive Table Component in Salesforce Lightning"},"content":{"rendered":"

Almost one year ago, I wrote this<\/a> 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<\/strong> in Lightning could be a lot more easier. So, lets see easier and efficient approach to create a Responsive and Generic Table component<\/strong> in Lightning.<\/p>\n

First and foremost, we need to provide data in below JSON format to\u00a0Lightning component,\u00a0<\/strong>everything else would be taken care by component itself.<\/p>\n

\"JSON<\/a>
JSON format for responsive data grid Lightning component<\/figcaption><\/figure>\n

As shown in above image, JSON will have two arrays, headers and rows. Headers will have below four properties<\/p>\n

    \n
  1. Title<\/li>\n
  2. isSortable (will not be used in this post, but for future use)<\/li>\n
  3. dataType<\/li>\n
  4. cssClass<\/li>\n<\/ol>\n

    Rows will have collections of columns. Obviously column count should match with total count of headers. Each column will have below two properties<\/p>\n

      \n
    1. val<\/li>\n
    2. cssClass<\/li>\n<\/ol>\n

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

      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<\/a>. Lets jump to code now.<\/p>\n

      ResponsiveGrid.cmp<\/strong><\/span><\/p>\n

      \r\n<aura:component >\r\n\t<aura:attribute name="gridData" type="Object"\/>    \r\n    <aura:handler name="init" value="{!this}" action="{!c.doInit}"\/>   \r\n    \r\n<div class="slds">\r\n<table class="slds-table slds-table--bordered">    \t\r\n<thead>\r\n<tr class="slds-text-heading--label">            \t\r\n                 <aura:iteration items="{!v.gridData.headers}" var="col">                     \r\n<th class="{!col.cssClass}"> {!col.title} <\/th>  \r\n                <\/aura:iteration>                \r\n            <\/tr>        \t \r\n        <\/thead>\r\n<tbody>\r\n            <!-- 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 -->\r\n            <aura:iteration items="{!v.gridData.rows}" var="row">\r\n                \r\n<tr class="slds-hint-parent"> \r\n                \t<aura:iteration items="{!row.vals}" var="col" indexVar="idx">                         \r\n<td class="{!col.cssClass}">{!col.val}<\/td> \r\n                    <\/aura:iteration>\r\n                <\/tr>\r\n             <\/aura:iteration>              \r\n        <\/tbody>    \r\n    \t<\/table>\r\n    <\/div>\r\n<\/aura:component>\r\n<\/pre>\n
      ResponsiveGridController.js<\/strong><\/span><\/p>\n
      \r\n({\r\n\tdoInit : function(component, event, helper) {\r\n\t\thelper.doInit(component, event, helper);\r\n\t}\r\n})\r\n<\/pre>\n
      ResponsiveGridHelper.js<\/strong><\/span><\/p>\n
      \r\n({\r\n\tdoInit : function(component, event, helper) {\r\n        var jsonData = JSON.parse(helper.getSampleJSON());\r\n        console.log(jsonData); \r\n        component.set("v.gridData",jsonData);\r\n\t},\r\n    getSampleJSON : function(){\r\n        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"}]}';\r\n    }\r\n})\r\n<\/pre>\n
      ResponsiveGrid.css<\/strong><\/span><\/p>\n
      \r\n@media(max-width:700px){\r\n    .THIS .responsiveHide{\r\n        display : none !important;\r\n    }\r\n}\r\n<\/pre>\n
      DemoApp.app<\/strong><\/span><\/p>\n
      \r\n<aura:application >\r\n\t<ltng:require styles="\/resource\/SLDS\/assets\/styles\/salesforce-lightning-design-system.min.css" \/>\r\n    <c:ResponsiveGrid \/>\r\n<\/aura:application>\r\n<\/pre>\n
      Above Lightning application is created to test responsive datagrid component. We have used ltng:require<\/strong> tag to import Salesforce Lightning design System (SLDS)<\/strong>.<\/p>\n
      Output:<\/strong><\/span><\/p>\n
      \"Generic<\/a>
      Generic and Responsive Table – Lightning Component<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
      Complete Source code to create generic and responsive Table component in Salesforce Lightning<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[311],"class_list":["post-5970","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-lightning-component"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":5389,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/responsive-datagrid-component-in-lightning-basics\/","url_meta":{"origin":5970,"position":0},"title":"Responsive Datagrid component in Lightning – Basics","author":"Jitendra","date":"March 15, 2016","format":false,"excerpt":"This blog post explains simple use case of Nested Lightning Component. It goes through example on how to interact and combine nested components to be used in parent Lightning component.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Using Nested Lightning component to create responsive DataGrid","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":5970,"position":1},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4461,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","url_meta":{"origin":5970,"position":2},"title":"Getting started with basics of Lightning Component","author":"Jitendra","date":"May 19, 2015","format":false,"excerpt":"As you might already know\u00a0that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn't want to stay behind. If we see trend, all major platform has introduced component based design like\u2026","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Getting started with Lightning component Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Getting-started-with-Lightning-component-Output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6598,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/read-query-parameter-in-lightning-component\/","url_meta":{"origin":5970,"position":3},"title":"Read Query Parameter in Lightning Component","author":"Jitendra","date":"September 3, 2018","format":false,"excerpt":"Launch Lightning Component using formula field and also read query parameter in Salesforce Lightning Component","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4493,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-collapsible-panel-component-in-lightning\/","url_meta":{"origin":5970,"position":4},"title":"Salesforce  Lightning Component – expand and collapsable panel example","author":"Jitendra","date":"May 22, 2015","format":false,"excerpt":"How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Lightning CollapsiblePanel Component - Expanded","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":5970,"position":5},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5970"}],"version-history":[{"count":4,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5970\/revisions"}],"predecessor-version":[{"id":5979,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5970\/revisions\/5979"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}