Data Table With Show/Hide Columns Dynamically In Lightning Component
Hey Guys,
Today in this post we are going to learn , how to display custom data table with column selection functionality, or how we can show/hide data table columns dynamically in salesforce lightning component.
Step 1 : Create Apex Controller : dataTableCtrl.apxc
From Developer Console >> File >> New >> Apex Class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* sfdcmonkey.com || Date 01/31/2018 || API Version 41.0 */ public class tableWithManageCtrl { @AuraEnabled public static List < account > fetchAccount() { List < Account > returnList = new List < Account > (); for (Account acc: [select id, Name, Type, Industry, Phone, Fax from account LIMIT 10]) { returnList.add(acc); } return returnList; } } |
Step 2 : Create Child Lightning Component : auraIfContains.cmp
The purpose to create this child component is, create a Alternate/Workaround for contains() function in ‘aura:if’ Condition in Lightning Component.
check following post on this step 2 workaround :
Alternate/Workaround for contains() function in aura:if Condition in Lightning Component
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<aura:component > <aura:handler name="init" value="{!this}" access="global" action="{!c.doInit}" /> <aura:attribute name="list" type="string[]" /> <aura:attribute name="element" type="String" /> <aura:attribute name="condition" type="Boolean" /> <aura:handler name="change" value="{!v.list}" action="{!c.doInit}"/> <aura:if isTrue="{!v.condition}"> {!v.body} </aura:if> </aura:component> |
auraIfContainsController.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
({ doInit: function(component, event, helper) { var getList = component.get('v.list'); var getElement = component.get('v.element'); var getElementIndex = getList.indexOf(getElement); if(getElementIndex != -1){ component.set('v.condition',true); }else{ component.set('v.condition',false); } }, }) |
Step 3 : Create Parent Lightning Component : dataTableWithDynamicCol.cmp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<!-- sfdcmonkey.com || Date 01/31/2017 || API Version 41.0 || Parent Component--> <aura:component controller="tableWithManageCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:handler name="init" value="this" action="{!c.doInit}"/> <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/> <aura:attribute name="options" type="List" default="[ {'label': 'Type', 'value': 'Type'}, {'label': 'Industry', 'value': 'Industry'}, {'label': 'Phone', 'value': 'Phone'}, {'label': 'Fax', 'value': 'Fax'}, ]"/> <aura:attribute name="selectedValues" type="List" default="Name"/> <aura:attribute name="isOpen" type="boolean" default="false"/> <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] --> <aura:if isTrue="{!v.isOpen}"> <!--###### MODAL BOX Start From Here ######--> <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open "> <div class="slds-modal__container"> <!-- ###### MODAL BOX HEADER Part Start From Here ######--> <div class="slds-modal__header"> <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModel}"> X <span class="slds-assistive-text">Close</span> </button> <h2 id="header99" class="slds-text-heading--medium">Manage Table Columns</h2> </div> <!--###### MODAL BOX BODY Part Start From Here ######--> <div class="slds-modal__content slds-p-around--medium"> <div class="slds-p-around_medium"> <lightning:checkboxGroup aura:id="mygroup" name="checkboxGroup" label="Manage Cloumn" options="{! v.options }" value="{! v.selectedValues }" /> </div> </div> <!--###### MODAL BOX FOOTER Part Start From Here ######--> <div class="slds-modal__footer"> <button class="slds-button slds-button--neutral" onclick="{!c.closeModel}" >Done</button> </div> </div> </div> <div class="slds-backdrop slds-backdrop--open"></div> <!--###### MODAL BOX Part END Here ######--> </aura:if> <div class="slds-m-around--large"> <!--###### lightning button icon for show/hide columns popup ######--> <div class="slds-clearfix"> <div class="slds-float_right"> <lightning:buttonIcon size="large" onclick="{!c.openModel}" iconName="utility:matrix" variant="bare" title="manage table columns" alternativeText="Settings" iconClass="dark"/> </div> </div> <br/><br/> <!--###### lightning data table start ######--> <table class="slds-table slds-table_bordered slds-table_cell-buffer"> <thead> <tr class="slds-text-title_caps"> <th scope="col"> <div class="slds-truncate" title="Account Name">Account Name</div> </th> <!--###### the value of element attribute in child component must be same as checkboxGroup value ######--> <c:auraIfContains list="{!v.selectedValues}" element="Type"> <th scope="col"><div class="slds-truncate" title="Type">Type</div></th> </c:auraIfContains> <c:auraIfContains list="{!v.selectedValues}" element="Industry"> <th scope="col"><div class="slds-truncate" title="Industry">Industry</div></th> </c:auraIfContains> <c:auraIfContains list="{!v.selectedValues}" element="Phone"> <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th> </c:auraIfContains> <c:auraIfContains list="{!v.selectedValues}" element="Fax"> <th scope="col"><div class="slds-truncate" title="Fax">Fax</div></th> </c:auraIfContains> </tr> </thead> <tbody> <!--### display all records of searchResult attribute by aura:iteration ###--> <aura:iteration items="{!v.searchResult}" var="acc"> <tr> <td><div class="slds-truncate">{!acc.Name}</div></td> <c:auraIfContains list="{!v.selectedValues}" element="Type"> <td><div class="slds-truncate">{!acc.Type}</div></td> </c:auraIfContains> <c:auraIfContains list="{!v.selectedValues}" element="Industry"> <td><div class="slds-truncate">{!acc.Industry}</div></td> </c:auraIfContains> <c:auraIfContains list="{!v.selectedValues}" element="Phone"> <td><div class="slds-truncate">{!acc.Phone}</div></td> </c:auraIfContains> <c:auraIfContains list="{!v.selectedValues}" element="Fax"> <td><div class="slds-truncate">{!acc.Fax}</div></td> </c:auraIfContains> </tr> </aura:iteration> </tbody> </table> </div> </aura:component> |
- check code comments.
dataTableWithDynamicColController.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
({ doInit: function(component, event, helper) { var action = component.get("c.fetchAccount"); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { var storeResponse = response.getReturnValue(); // set searchResult list with return value from server. component.set("v.searchResult", storeResponse); } }); $A.enqueueAction(action); }, openModel: function(component, event, helper) { // for Display Model,set the "isOpen" attribute to "true" component.set("v.isOpen", true); }, closeModel: function(component, event, helper) { // for Hide/Close Model,set the "isOpen" attribute to "Fasle" component.set("v.isOpen", false); }, }) |
Step 4 : Create Lightning Application for Testing: demo.app
From Developer Console >> File >> New >> Lightning Application
|
1 2 3 4 5 6 7 8 |
<aura:application extends="force:slds"> <c:dataTableWithDynamicCol/> <!-- here c: is org. default namespace prefix--> </aura:application> |
Output :
Check also :
Delete Multiple Records Using Checkbox In Lightning Component
How to Fetch Picklist value from sObject and Set in ui:inputSelect
Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.
if you have any suggestions or issue with it, you can share your thoughts in comment box.
Happy Learning 🙂
2 comments
Hi,
How to add a clickable link in the column. Can you help me on that ?