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

/* 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

<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

({

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

100

101

102

103

104

105

106

107

108

109

110

111

<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"/>

<aura:if isTrue="{!v.isOpen}">

<span class="slds-assistive-text">Close</span>

</button>

<h2 id="header99" class="slds-text-heading--medium">Manage Table Columns</h2>

</div>

<lightning:checkboxGroup aura:id="mygroup"

name="checkboxGroup"

label="Manage Cloumn"

options="{! v.options }"

value="{! v.selectedValues }"

</div>

</div>

</aura:if>

<lightning:buttonIcon size="large" onclick="{!c.openModel}" iconName="utility:matrix" variant="bare" title="manage table columns" alternativeText="Settings" iconClass="dark"/>

</div>

<thead>

<div class="slds-truncate" title="Account Name">Account Name</div>

</th>

<c:auraIfContains list="{!v.selectedValues}" element="Type">

</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">

</c:auraIfContains>

</tr>

</thead>

<tbody>

<aura:iteration items="{!v.searchResult}" var="acc">

<tr>

<c:auraIfContains list="{!v.selectedValues}" element="Type">

</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">

</c:auraIfContains>

</tr>

</aura:iteration>

</tbody>

</table>

</div>

</aura:component>

check code comments.

dataTableWithDynamicColController.js

({

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

<aura:application extends="force:slds">

<c:dataTableWithDynamicCol/>

</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

Add Delete Row Dynamic In Lightning Component : Sample Code

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 🙂

(Visited 10,716 times, 1 visits today)