1

I need to put a div right below a lightning:datatable row. Is there a way ?

enter image description here

  • "collapsible row" is this you want? – rahul gawale Jan 8 at 12:21
  • @rahulgawale yeah, but opening a div – Danilo Fucuhara Jan 8 at 12:35
1

You need to use SLDS Expandable Section inside the slds-table with aura iteration, the sample code look like.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="selected" type="String" 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="1,2,3,4,5" var="item">
                    <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">

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

Note : alignments for columns in sections header need to be managed in case of dynamic data (see Column2 Column3 in image).

this should look like,

enter image description here

  • 1
    Perfect, thats exactly what i needed, thnks @rahul – Danilo Fucuhara Jan 9 at 13:41
  • @DaniloFucuhara Most Welcome, Happy Coding!! – rahul gawale Jan 9 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.