show hide columns fImage data table

Data Table With Show/Hide Columns Dynamically In Lightning Component

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.

data-table-with-manage-colums

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-manage-colums

 

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 6,021 times, 13 visits today)

2 comments

Leave a Reply