The requirement is to have datatable and each row act as accordian(Tree Grid) but the child record will be the additional details (more of record-form). I am trying tree grid, Table, lightning layout etc ..however I am not sure which direct should I proceed with. Any pointer will be helpful.
Something similar to picture shown
Nested / multi level lighting:datable
I am trying something like this . How to create collapsible/expandable rows in a table based on user action in lightning
Is it doable?
<template>
<div class="slds-box slds-theme_default">
<lightning-layout multiple-rows="true">
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
<thead>
<tr>
<th class="" scope="col">
<div class="slds-truncate" title="Account Name">Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Account Industry">Industry</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Account Type">Type</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Account Number">Account Number</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Site">Site</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={accounts} for:item="acc">
<lightning-layout-item size="5">
<lightning-button-icon value={acc} onclick={toggle}
iconName={item.expanded?'utility:chevrondown':'utility:chevronright'}></ligntning-button-icon>
<template if:true="{item.expanded}">
<c-childform></c-childform>
</template>
<tr key={acc.Id}>
<td>{acc.Name}</td>
<td>{acc.Industry}</td>
<td>{acc.Type}</td>
<td>{acc.AccountNumber}</td>
<td>{acc.Site}</td>
</tr>
</lightning-layout-item>
</template>
</tbody>
</table>
</lightning-layout>
</div>
</template>