0

My use case is to implement specific dataTable cell popOver on click. Below is the code. Using lightning:overlayLibrary base component to show popOver. It is showing popOver but only on the first row of the table body.

customTable.cmp

   <aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global" >
   <aura:attribute name="spinner" type="boolean" default="false"></aura:attribute>
   <aura:attribute name="cardTitle" type="string" default=""></aura:attribute>
   <aura:attribute name="data" type="object" ></aura:attribute>
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <lightning:overlayLibrary aura:id="overlayLib"></lightning:overlayLibrary>
   <lightning:card iconName="utility:fulfillment_order">
      <aura:set attribute="title">
         <aura:if isTrue="{!v.cardTitle}">
            <lightning:formattedRichText value="{!v.cardTitle}"/>
         </aura:if>
      </aura:set>
      <aura:set attribute="body">
         <aura:if isTrue="{!v.spinner}">
            <lightning:spinner variant="brand" title="Loading....." alternativeText="Loading....."
               size="small">
            </lightning:spinner>
         </aura:if>
         <aura:if isTrue="{! not(empty(v.data))}">
            <table class="slds-table slds-table_bordered slds-table_striped slds-no-row-hover">
               <thead>
                  <tr class="slds-text-title_caps">
                     <th scope="col">
                        <div class="slds-truncate" title="Test1">createdDate</div>
                     </th>
                     <th scope="col">
                        <div class="slds-truncate" title="Test2">Name</div>
                     </th>
                     <th scope="col">
                        <div class="slds-truncate" title="Test3">productName</div>
                     </th>
                     <th scope="col">
                        <div class="slds-truncate" title="Test4">status</div>
                     </th>
                  </tr>
               </thead>
               <tbody>
                  <aura:iteration items="{!v.data}" var="item" indexVar="index">
                     <aura:if isTrue="{!item}">
                        <tr>
                           <td>
                              <aura:if isTrue="{!item.createdDate}">
                                 <lightning:formattedDateTime value="{!item.createdDate}" year="numeric"
                                    month="2-digit" day="2-digit">
                                 </lightning:formattedDateTime>
                              </aura:if>
                           </td>
                           <td>
                              <div class="mypopover" onclick="{!c.handleShowPopover1}" data-selected-Index="{!index}">
                                 {!item.Name}
                              </div>
                           </td>
                           <td>
                              <div class="slds-truncate">
                                 {!item.productName}
                              </div>
                           </td>
                           <td>
                              <div class="slds-truncate">
                                 {!item.status}
                              </div>
                           </td>
                        </tr>
                     </aura:if>
                  </aura:iteration>
               </tbody>
            </table>
         </aura:if>
      </aura:set>
   </lightning:card>
</aura:component>

customTableController.js

({
  doInit: function(component, event, helper) {
    helper.doInitHelper(component);
  },

  handleShowPopover1: function(component,event) {
    try {
      var target = event.target;
      var dataEle = target.getAttribute("data-selected-Index");
      $A.createComponent(
        "c:popOver",
        {
          rowIndex: dataEle
        },
        function(content, status) {
          console.log("status ~~~~~~~~>  " + status);
          if (status === "SUCCESS") {
            component
              .find("overlayLib")
              .showCustomPopover({
                body: content,
                referenceSelector: ".mypopover",
                cssClass: "slds-popover_walkthrough"
              })
              .then(function(overlay) {
                setTimeout(function() {
                  //close the popover after 3 seconds
                  overlay.close();
                }, 3000);
              });
          }
        }
      );
    } catch (Err) {
      console.log("Error ~~~~~> " + Err);
    }
  }
});

customTableHelper.js

({
  doInitHelper: function(component) {
    // turn on spinner
    var result = '[{"Id":"0","Name":"name1","createdDate":"2019-08-29T07:24:06.000Z","productName":"productName1"},{"Id":"1","Name":"name2","createdDate":"2019-08-29T12:29:03.000Z","productName":"productName2"},{"Id":"2","Name":"name3","createdDate":"2019-08-29T07:24:06.000Z","productName":"productName3"},{"Id":"3","Name":"name4","createdDate":"2019-08-29T12:29:03.000Z","productName":"productName4"},{"Id":"4","Name":"name5","createdDate":"2019-08-29T07:24:06.000Z","productName":"productName5"},{"Id":"5","Name":"name6","createdDate":"2019-08-29T12:29:03.000Z","productName":"productName6"}]';
    component.set("v.spinner", true);
    component.set(
      "v.data",
      JSON.parse(result)
    );
    this.setCardTitle(component, JSON.parse(result));
    // turn off spinner
    component.set("v.spinner", false);
  },

  setCardTitle: function(component, result) {
    component.set(
      "v.cardTitle",
      "<b>dummyCardTitle (" +
        ($A.util.isEmpty(result) ? 0 : result.length) +
        ")</b>"
    );
  }
});

popOver.cmp

<aura:component>
    <aura:attribute name="rowIndex" type="string" default=""/>
   <!--Declare Attribute-->
   <lightning:overlayLibrary aura:id="overlayLib"/>
   <!--Component Start--> 
    <div class="slds-popover__body">
      <div class="slds-media">
         <div class="slds-media__body">
             <p>rowIndex:{!v.rowIndex}</p>
         </div>
      </div>
   </div>
   <!--Component End-->
</aura:component>

Popover on the row 1

Popover on the row 2

Popover on the row 3

0

Since you are loading it in aura:iteration and you are not using overflow:hidden, you implement the slds-popover directly:

COMPONENT:

<td>
    <div class="mypopover slds-is-relative" data-selected-Index="{!index}">
        {!item.Name}
        <section class="slds-popover slds-nubbin_left"
                 role="dialog">
            <div class="slds-popover__body" id="dialog-body-id-77">
                <p><c:POC_PopOver rowIndex="{!index}" /></p>
            </div>
        </section>
    </div>
</td>

CSS:

.THIS .slds-popover {
    display:none;
}

.THIS .mypopover:hover .slds-popover {
    top: -0.7rem;
    left: 9rem;
    position: absolute;
    white-space: normal;
    display: block;
}

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.