Using SLDS Expandable Section inside the table row.

Requirement: Want to make table row expandable/collapsible using SLDS in Lightning Components. But standard right now lightning:datatable does not support this out of the box.

Approach: Render table with aura:iteration, put expandable section inside the table row.

So the output would be something like this,

Source Code for the Lightning Component :

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

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" > <aura:attribute name="selected" type="Integer" default="-1"/> <div class=""> <table class="slds-table"> <thead> <!--not sure table header is required or not <tr class="slds-line-height_reset"> <th class="" scope="col"> <div class="slds-truncate" title="Opportunity Name">Column 1</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Opportunity Name">Column 2</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Opportunity Name">Column </div> </th> </tr> --> </thead> <tbody> <aura:iteration items="0,1,2,3,4,5" var="item" indexVar="index"> <tr class="slds-hint-parent"> <div class="{!if(item == v.selected,'slds-section slds-is-open', 'slds-section')}"> <h3 class="slds-section__title"> <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action" onclick="{!c.handleClick}" data-selected-Index="{!index}"> <lightning:icon class="slds-section__title-action-icon" iconName="utility:switch" alternativeText="open" /> <span class="slds-truncate" title="Section Title">Section {!item} </span> &nbsp; &nbsp; Column2 &nbsp;&nbsp; Column3 </button> </h3> <div aria-hidden="false" class="slds-section__content" id="expando-unique-id"> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p> </div> </div> </tr> </aura:iteration> </tbody> </table> </div> </aura:component>

Controller :

1 2 3 4 5 6 7 8 9 10 11

({ handleClick : function(component, event, helper) { var target = event.target; var dataEle = target.getAttribute("data-selected-Index"); if(dataEle == component.get("v.selected")){ component.set("v.selected",-1); } else { component.set("v.selected",dataEle); } } })