show hide columns fImage data table

Data Table With Show/Hide Columns Dynamically In Lightning Component

Lightning Component

Sharing is caring!

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.

data table with show hide Columns dynamic
Output:

 

Step 1 : Create Apex Controller : dataTableCtrl.apxc

From Developer Console >> File >> New >> Apex Class

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

auraIfContainsController.js

Step 3 : Create Parent Lightning Component  : dataTableWithDynamicCol.cmp

  • check code comments.
dataTableWithDynamicColController.js

Step 4 : Create Lightning Application for Testing: demo.app

From Developer Console >> File >> New >> Lightning Application

Output

data table with show hide Columns dynamic

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 🙂

Sharing is caring!

(Visited 898 times, 13 visits today)

Leave a Reply