0

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>
3

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.