LWC - How to expand only clicked value on a table

Question

I have a table of values of a custom object, like this :

When I click the first line (Value1, Value 11 or Value 111) I want to expand ONLY the first line to show values related to this line that are the value of another object (I have a Master-Details RelationShip between this two objects).

Result :

Thank you in advance,

Answer 1

You can try adding an attribute to the data to store _isOpen. From there, you can set all of the _isOpen values to false and set the proper one to true when clicked.This solution will probably require you to deep copy the data when you pull it though.

html:

<template>
    <table>
    <template for:each={accounts} for:item="account" for:index="idx">
        <tr key={account.id} onclick={handleClick} data-index={idx}><td>{account.name}</td></tr>
        <template if:true={account._isOpen}>
            <tr key={account.id}><td>More</td></tr>
        </template>
    </template>
    </table>
</template>

javascript:

handleClick(evt){
        this.accounts.map(account=>{
            account._isOpen = false;
        });
        this.accounts[parseInt(evt.currentTarget.dataset.index, 10)]._isOpen = true;
    }

You may also just want to consider making a new component to use for the children.

Answer 2

You can use a lightning-tree-grid to have a table with auto-expanding capabilities.

Answer 3

The lightning tree grid does not give place for customization. In my case I used the lightning grid system to build a table with Lightning Accordion. It could give more work by the other hand it will be more customizable:

<div class="slds-grid">
    <div class="slds-col">
        
        <!-- HEADER -->
        <div class="slds-grid">
            <div class="slds-col slds-size_3-of-12"><b>Header 1</b></div>
            <div class="slds-col slds-size_1-of-12"><b>Header 2</b></div>
            <div class="slds-col slds-size_1-of-12"><b>Header 3</b></div>
            
        </div>

        <!-- DATA TABLE -->
        <div class="slds-grid">
            <div class="slds-col slds-size_1-of-3">
                <lightning-accordion class="example-accordion" onsectiontoggle={handleToggleSection} active-section-name="B">
                    <lightning-accordion-section name="A" label="DATA 1"> 
                        <p>This is the content area for section A.</p>
                        <p>.</p>
                        <p>.</p>
                        <p>.</p>
                        <p>The section height expands to fit your content.</p>
                    </lightning-accordion-section>
                </lightning-accordion>
            </div>
            <div class="slds-col slds-size_1-of-12">DATA 2</div>
            <div class="slds-col slds-size_1-of-12">DATA 3</div>

        </div>


    </div>
</div>