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>
Improve this question

1 Answer 1

Reset to default
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>
Improve this answer
4
  • Can we able to add New table in the Row ? Commented Mar 14, 2020 at 3:07
  • yes, I have provided the sample code as well, does it solve your purpose? Commented Mar 14, 2020 at 5:24
  • It's iterating the data in <td>, but expecting to iterate the child object in tr with th Commented Mar 14, 2020 at 5:47
  • 1
    I have updated my answer to display programs as a row as second option Commented Mar 14, 2020 at 7:22

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.