Custom related list with tree grid

PHOTO EMBED

Tue Aug 27 2024 18:38:31 GMT+0000 (Coordinated Universal Time)

Saved by @gbritgs

<!-- sldsValidatorIgnore -->
<template>
      <div class="related-list-style-div"></div>
      <div class="slds-card_boundary">
            <div class="slds-page-header related-list-header">
                  <div class="slds-page-header__row">
                        <div class="slds-page-header__col-title" style="margin: auto;">
                              <div class="slds-media">
                                    <div class="slds-media__figure">
                                          <lightning-icon icon-name="standard:quotes" size="small"
                                                title="large size"></lightning-icon>
                                    </div>
                                    <div class="slds-media__body">
                                          <div class="slds-page-header__name">
                                                <div class="slds-page-header__name-title">
                                                      <h1>
                                                            <span
                                                                  class="slds-page-header__title slds-truncate related-list-title">
                                                                  Grupo de Cotações ({qntQuotes})
                                                            </span>
                                                      </h1>
                                                </div>
                                          </div>
                                    </div>
                              </div>
                        </div>
                        <div class="slds-page-header__col-actions">
                              <div class="slds-page-header__controls">
                                    <!-- <div if:true={showClipWrapButton} class="slds-page-header__control">
                                          <button class="slds-button slds-button_icon slds-button_icon-more"
                                                aria-haspopup="true" aria-expanded="false" title="Clip/Wrap Text"
                                                onclick={handleClipWrap}>
                                                <lightning-icon if:true={wrapText} icon-name="utility:right_align"
                                                      alternative-text="Wrap Text" size="xx-small"></lightning-icon>
                                                <lightning-icon if:false={wrapText}
                                                      icon-name="utility:center_align_text" alternative-text="Clip Text"
                                                      size="xx-small"></lightning-icon>
                                                <span class="slds-assistive-text">Clip/Wrap Text</span>
                                          </button>
                                    </div> -->

                                    <div class="slds-page-header__control">
                                          <button class="slds-button slds-button_icon slds-button_icon-border-filled"
                                                title="Refresh List" onclick={handleRefreshList}>
                                                <lightning-icon icon-name="utility:refresh"
                                                      alternative-text="Refresh List" size="xx-small"></lightning-icon>
                                                <span class="slds-assistive-text">Refresh List</span>
                                          </button>
                                    </div>

                                    <!-- <template if:true={showNewButton}>
                                          <div class="slds-page-header__control">
                                                <ul class="slds-button-group-list">
                                                      <li>
                                                            <lightning-button variant="neutral" label="New"
                                                                  onclick={navigateToNewRecordPage}></lightning-button>
                                                      </li>
                                                </ul>
                                          </div>
                                    </template> -->

                              </div>
                        </div>
                  </div>
            </div>

            <div class="related-list-body">
                  <lightning-tree-grid columns={gridColumns} data={gridData} key-field="id" hide-checkbox-column>
                  </lightning-tree-grid>
            </div>
      </div>
</template>
content_copyCOPY