0

Below is my HTML Table, which is iterating the parent and Child record and displaying the data in to the table as below

enter image description here

In Child Record, For each rows header is rendering (Yes I'm Iterating the header too) But still not sure how to achieve the constant header and iterate the Child record. Please help me on this.

<template for:each={studentdata} for:item="stu" for:index="index">
                    <div class="slds-p-top_large" key={stu.Id}>
                    <table class="slds-table slds-table_cell-buffer slds-table_bordered" >
                        <thead>
                            <tr class="">
                                <th class="slds-size_3-of-10" scope="col">
                                    <div class="slds-truncate" title="Account Name">First Name</div>
                                </th>
                                <th class="slds-size_3-of-10" scope="col">
                                    <div class="slds-truncate" title="Account Name">Last Name</div>
                                </th>
                                <th class="slds-size_3-of-10" scope="col">
                                    <div class="slds-truncate" title="Account Name">Gender</div>
                                </th>
                                <th class="slds-size_3-of-10" scope="col">
                                    <div class="slds-truncate" title="Account Name">Date of Birth</div>
                                </th>
                                <th class="slds-size_3-of-10" scope="col">
                                    <div class="slds-truncate" title="Account Name">Grade</div>
                                </th>
                            </tr>
                        </thead>
                   <!--   <template for:each={studentdata} for:item="stu" for:index="index">-->  
                            <tbody key={stu.Id}>
                                <tr class="slds-hint-parent">
                                    <td class="slds-size_3-of-10" data-label="Prospecting">
                                        <div title="Prospecting">
                                            <div class="slds-truncate" title="FirstName">{stu.FirstName}</div>
                                        </div>
                                    </td>
                                    <td class="slds-size_3-of-10" data-label="Prospecting">
                                        <div title="Prospecting">
                                            <div class="slds-truncate" title="LastName">{stu.LastName}</div>
                                        </div>
                                    </td>
                                    <td class="slds-size_3-of-10" data-label="Prospecting">
                                        <div title="Prospecting">
                                            <div class="slds-truncate" title="Gender">{stu.Gender__c}</div>
                                        </div>
                                    </td>
                                    <td class="slds-size_3-of-10" data-label="Prospecting">
                                        <div title="Prospecting">
                                            <div class="slds-truncate" title="BirthDate">{stu.Birthdate}</div>
                                        </div>
                                    </td>
                                    <td class="slds-size_3-of-10" data-label="Prospecting">
                                        <div title="Prospecting">
                                            <div class="slds-truncate" title="Grade">{stu.Grade__c}</div>
                                        </div>
                                    </td>
                                    <td class="slds-size_3-of-10" data-label="Prospecting">                                             
                                        <lightning-button-icon  key ={stu.Id} key-field="Id" icon-name="utility:add"  name= "add_program" variant="brand"  title="Add Student"
                                        onclick={handleRowAction}>
                                    </lightning-button-icon>

                                    </td>
                                </tr>                               


                        </tbody>
                    <!--    </template>-->

                    </table>

                    <template for:each={stu.Students_Programs__r} for:item="sutprog" for:index="index">                            
                        <div key={sutprog.Id} class="slds-p-top_large" >
                             <table class="slds-table slds-table_cell-buffer slds-table_bordered"> 
                                 <thead>
                                     <tr>
                                         <th class="slds-size_1-of-5" scope="col"  >
                                             <div class="slds-truncate" title="Account Name">Program Name
                                             </div>
                                         </th>
                                         <th class="slds-size_1-of-5" scope="col" > 
                                             <div class="slds-truncate" title="Account Name">Start Date</div>
                                         </th>
                                         <th class="slds-size_1-of-5" scope="col"  >
                                             <div class="slds-truncate" title="Account Name">End Date</div>
                                         </th>
                                         <th class="slds-size_1-of-5" scope="col"  >
                                             <div class="slds-truncate" title="Account Name">Price</div>
                                         </th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     <tr class="slds-hint-parent">
                                         <td class="slds-size_1-of-5" data-label="Prospecting">
                                             <div title="Prospecting">
                                                 <div class="slds-truncate" title="FirstName">
                                                     {sutprog.Program_Name__c}</div>
                                             </div>
                                         </td>
                                         <td class="slds-size_1-of-5" data-label="Prospecting">
                                             <div title="Prospecting">
                                                 <div class="slds-truncate" title="FirstName">
                                                      dddd</div>
                                             </div>
                                         </td>
                                         <td class="slds-size_1-of-5" data-label="Prospecting">
                                             <div title="Prospecting">
                                                 <div class="slds-truncate" title="FirstName">
                                                      dssd</div>
                                             </div>
                                         </td>
                                         <td class="slds-size_1-of-5" data-label="Prospecting">
                                             <div title="Prospecting">
                                                 <div class="slds-truncate" title="FirstName">
                                                    $100</div>
                                             </div>
                                         </td>
                                     </tr>
                                 </tbody>
                             </table>

                         </div>  
                     </template>  
                </div>
                </template>
1

You can add the sub-table inside the main table as a column like this enter image description here

Sample Code:

<template>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="">
                <th class="slds-size_3-of-10" scope="col">
                    <div class="slds-truncate" title="Account Name">First Name</div>
                </th>
                <th class="slds-size_3-of-10" scope="col">
                    <div class="slds-truncate" title="Last Name">Last Name</div>
                </th>
                <th class="slds-size_3-of-10" scope="col">
                    <div class="slds-truncate" title="Gender">Gender</div>
                </th>
                <th class="slds-size_3-of-10" scope="col">
                    <div class="slds-truncate" title="Date of Birth">Date of Birth</div>
                </th>
                <th class="slds-size_3-of-10" scope="col">
                    <div class="slds-truncate" title="Grade">Grade</div>
                </th>
                <th class="slds-size_3-of-10 slds-text-align_center" scope="col">
                    <div class="slds-truncate" title="Programs">Programs</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <template for:each={studentdata} for:item="stu" for:index="index">
                <tr key={stu.Id} class="slds-hint-parent">
                    <td class="slds-size_3-of-10" data-label="Prospecting">
                        <div title="Prospecting">
                            <div class="slds-truncate" title="FirstName">{stu.FirstName}</div>
                        </div>
                    </td>
                    <td class="slds-size_3-of-10" data-label="Prospecting">
                        <div title="Prospecting">
                            <div class="slds-truncate" title="LastName">{stu.LastName}</div>
                        </div>
                    </td>
                    <td class="slds-size_3-of-10" data-label="Prospecting">
                        <div title="Prospecting">
                            <div class="slds-truncate" title="Gender">{stu.Gender__c}</div>
                        </div>
                    </td>
                    <td class="slds-size_3-of-10" data-label="Prospecting">
                        <div title="Prospecting">
                            <div class="slds-truncate" title="BirthDate">{stu.Birthdate}</div>
                        </div>
                    </td>
                    <td class="slds-size_3-of-10" data-label="Prospecting">
                        <div title="Prospecting">
                            <div class="slds-truncate" title="Grade">{stu.Grade__c}</div>
                        </div>
                    </td>
                    <td>

                        <template for:each={stu.Students_Programs__r} for:item="sutprog" for:index="index">
                            <div key={sutprog.Id} class="slds-p-top_large">
                                <table>
                                    <thead>
                                        <tr>
                                            <th class="slds-size_1-of-5" scope="col">
                                                <div class="slds-truncate" title="Account Name">Program Name
                                                </div>
                                            </th>
                                            <th class="slds-size_1-of-5" scope="col">
                                                <div class="slds-truncate" title="Account Name">Start Date</div>
                                            </th>
                                            <th class="slds-size_1-of-5" scope="col">
                                                <div class="slds-truncate" title="Account Name">End Date</div>
                                            </th>
                                            <th class="slds-size_1-of-5" scope="col">
                                                <div class="slds-truncate" title="Account Name">Price</div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="slds-hint-parent">
                                            <td class="slds-size_1-of-5" data-label="Prospecting">
                                                <div title="Prospecting">
                                                    <div class="slds-truncate" title="FirstName">
                                                        {sutprog.Program_Name__c}</div>
                                                </div>
                                            </td>
                                            <td class="slds-size_1-of-5" data-label="Prospecting">
                                                <div title="Prospecting">
                                                    <div class="slds-truncate" title="FirstName">
                                                        dddd</div>
                                                </div>
                                            </td>
                                            <td class="slds-size_1-of-5" data-label="Prospecting">
                                                <div title="Prospecting">
                                                    <div class="slds-truncate" title="FirstName">
                                                        dssd</div>
                                                </div>
                                            </td>
                                            <td class="slds-size_1-of-5" data-label="Prospecting">
                                                <div title="Prospecting">
                                                    <div class="slds-truncate" title="FirstName">
                                                        $100</div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </template>
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
</template>

The second option is to display the programs as a row: enter image description here

HTML

<template>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="">
                <th class="slds-size_3-of-10" scope="col">
                    <div class="slds-truncate" title="Account Name">First Name</div>
                </th>
                <th class="slds-size_3-of-10" scope="col">
                    <div class="slds-truncate" title="Last Name">Last Name</div>
                </th>
                <th class="slds-size_3-of-10" scope="col">
                    <div class="slds-truncate" title="Gender">Gender</div>
                </th>
                <th class="slds-size_3-of-10" scope="col">
                    <div class="slds-truncate" title="Date of Birth">Date of Birth</div>
                </th>
                <th class="slds-size_3-of-10" scope="col">
                    <div class="slds-truncate" title="Grade">Grade</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <template for:each={studentdata} for:item="stu" for:index="index">
                <tr key={stu.Id} class="slds-hint-parent">
                    <td class="slds-size_3-of-10" data-label="Prospecting">
                        <div title="Prospecting">
                            <div class="slds-truncate" title="FirstName">{stu.FirstName}</div>
                        </div>
                    </td>
                    <td class="slds-size_3-of-10" data-label="Prospecting">
                        <div title="Prospecting">
                            <div class="slds-truncate" title="LastName">{stu.LastName}</div>
                        </div>
                    </td>
                    <td class="slds-size_3-of-10" data-label="Prospecting">
                        <div title="Prospecting">
                            <div class="slds-truncate" title="Gender">{stu.Gender__c}</div>
                        </div>
                    </td>
                    <td class="slds-size_3-of-10" data-label="Prospecting">
                        <div title="Prospecting">
                            <div class="slds-truncate" title="BirthDate">{stu.Birthdate}</div>
                        </div>
                    </td>
                    <td class="slds-size_3-of-10" data-label="Prospecting">
                        <div title="Prospecting">
                            <div class="slds-truncate" title="Grade">{stu.Grade__c}</div>
                        </div>
                    </td>
                </tr>
                <tr key={stu.Id} class="subheader">
                    <th class="slds-size_1-of-5" scope="col">
                        <div class="slds-truncate" title="Account Name">Program Name
                        </div>
                    </th>
                    <th class="slds-size_1-of-5" scope="col">
                        <div class="slds-truncate" title="Account Name">Start Date</div>
                    </th>
                    <th class="slds-size_1-of-5" scope="col">
                        <div class="slds-truncate" title="Account Name">End Date</div>
                    </th>
                    <th class="slds-size_1-of-5" scope="col">
                        <div class="slds-truncate" title="Account Name">Price</div>
                    </th>
                </tr>

                <template for:each={stu.Students_Programs__r} for:item="sutprog" for:index="index">
                    <tr key={stu.Id}>
                        <td key={sutprog.Program_Name__c} class="slds-size_1-of-5" data-label="Prospecting">
                            <div title="Prospecting">
                                <div class="slds-truncate" title="FirstName">
                                    {sutprog.Program_Name__c}</div>
                            </div>
                        </td>
                        <td key={sutprog.Program_Name__c} class="slds-size_1-of-5" data-label="Prospecting">
                            <div title="Prospecting">
                                <div class="slds-truncate" title="FirstName">
                                    dddd</div>
                            </div>
                        </td>
                        <td key={sutprog.Program_Name__c} class="slds-size_1-of-5" data-label="Prospecting">
                            <div title="Prospecting">
                                <div class="slds-truncate" title="FirstName">
                                    dssd</div>
                            </div>
                        </td>
                        <td key={sutprog.Program_Name__c} class="slds-size_1-of-5" data-label="Prospecting">
                            <div title="Prospecting">
                                <div class="slds-truncate" title="FirstName">
                                    $100</div>
                            </div>
                        </td>
                    </tr>
                </template>
            </template>
        </tbody>
    </table>
</template>
4
  • Can we able to add New table in the Row ? Mar 14 '20 at 3:07
  • yes, I have provided the sample code as well, does it solve your purpose? Mar 14 '20 at 5:24
  • It's iterating the data in <td>, but expecting to iterate the child object in tr with th Mar 14 '20 at 5:47
  • 1
    I have updated my answer to display programs as a row as second option Mar 14 '20 at 7:22

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.