Using SLDS Expandable Section inside the table row.

Telegram logo Join our Telegram Channel
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,

Expandable Section in Lightning table

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);
     }
    }
})
No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at rahul@forcetrails.com