0

I am trying to get the list of accounts and child object contact in the datatable ( HTML table).

I'm looking to achieve the nested table in LWC:

ForEx:

Account Name   Phone
Test                   2323232
      ContactFirstName   LastName   Phone
            laae        reee     131321312

Displaying the data table like above.( Like a tree grid)

Parent Record I have displayed in the table. But not sure how to read the child array of object record and iterate the values in table. Please Any one help me on this. Thanks in advance.

HTML

 <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">Name</div>
                                </th>
                                <th class="slds-size_3-of-10" scope="col">
                                    <div class="slds-truncate" title="Account Name">Phone</div>
                                </th>

                            </tr>
                        </thead>
                        <template for:each={studentdata} for:item="stu" for:index="index">
                            <tbody key={stu.key}>
                                <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.Name}</div>
                                        </div>
                                    </td>
                                    <td class="slds-size_3-of-10" data-label="Prospecting">
                                        <div title="Prospecting">
                                            <div class="slds-truncate" title="LastName">{stu.Phone}</div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>

                           <template for:each={studentdata} for:item="cont" for:index="index">
                            <table class="slds-table slds-table_cell-buffer slds-table_bordered" key={cont.Id}>
                                <thead>
                                    <tr class="">
                                        <th class="slds-size_3-of-10" scope="col">
                                            <div class="slds-truncate" title="Account Name">FirstName</div>
                                        </th>
                                        <th class="slds-size_3-of-10" scope="col">
                                            <div class="slds-truncate" title="Account Name">LastName</div>
                                        </th>
                                        <th class="slds-size_3-of-10" scope="col">
                                            <div class="slds-truncate" title="Account Name">Phone</div>
                                        </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="slds-hint-parent">
                                            <td class="slds-size_3-of-10" data-label="Prospecting">
                                                <div title="Prospecting">
                                                    <div class="slds-truncate" title="FirstName">{cont.FirstName}</div>
                                                </div>
                                            </td>
                                            <td class="slds-size_3-of-10" data-label="Prospecting">
                                                <div title="Prospecting">
                                                    <div class="slds-truncate" title="FirstName">{cont.LastName}</div>
                                                </div>
                                            </td>
                                            <td class="slds-size_3-of-10" data-label="Prospecting">
                                                <div title="Prospecting">
                                                    <div class="slds-truncate" title="FirstName">{cont.Phone}</div>
                                                </div>
                                            </td>
                                            </tr>
                                        </tbody>
                                </table>
                           </template>
                        </template>
                    </table>

Js:

  @track studenterror;
 @track studentdata;
 @wire(getStudentdetails, { enrollmentName: "$recordId" })
 getstudents(response1) {
this.wiredStudentDataRefresh = response1;
const studentData = response1.data;
const studentError = response1.error;

if (studentData) {
  console.log(studentData);
  let accountList = JSON.parse(JSON.stringify(studentData));
  console.log(accountList);

  this.studentdata = studentData;
} else if (studentError) {
  this.studenterror = studentError;
}
}

Controller:

return [SELECT Id, Name , Phone, (Select Id ,FirstName, LastName, Phone from Contacts) from Account];
1

You have additional issues that need to be addressed, but basically you need to iterate over the Contacts within the first iteration:

<table class="slds-table slds-table_cell-buffer slds-table_bordered">
  <thead>
    ...
  </thead>
  <tbody>
    <template for:each="{studentdata}" for:item="stu" for:index="index">
      <tr key={stu.Id} class="slds-hint-parent">
        ...
      </tr>
      <template for:each="{stu.Contacts}" for:item="cont">
        <tr key={cont.Id} class="slds-hint-parent">
          ...
        </tr>
      </template>
    </template>
  </tbody>
</table>
| improve this answer | |

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.