parentPagination.html

<!-- 
/**
*     Pagination Example using Offset
* @category  Lightning Web component
* @author    Veeranjaneyulu k
* @Date  11-oct-2019
**/
-->
<template>
   <lightning-card>
      <div>
         <template if:true={wiredOpport.data}>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
               <thead>
                  <tr class="slds-line-height_reset">
                     <th class="" id="h" scope="col">
                        <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
                     </th>
                     <th class="" id="e" scope="col">
                        <div class="slds-truncate" title="Account Name">Account Name</div>
                     </th>
                     <th class="" id="l" scope="col">
                        <div class="slds-truncate" title="Close Date">Close Date</div>
                     </th>
                     <th class="" id="o" scope="col">
                        <div class="slds-truncate" title="Amount">Amount</div>
                     </th>
                     <th class="" id="s" scope="col">
                        <div class="slds-truncate" title="Type">Type</div>
                     </th>
                     <th class="" id="a" scope="col">
                        <div class="slds-truncate" title="ExpectedRevenue">ExpectedRevenue</div>
                     </th>
                     <th class="" id="w" scope="col">
                        <div class="slds-truncate" title="Probability">Probability</div>
                     </th>
                  </tr>
               </thead>
               <tbody>
                  <template for:each={wiredOpport.data.funds} for:item="eachOpp">
                     <tr key={eachOpp.id}>
                        <td headers="h" data-label="Opportunity Name" key={eachOpp.id}>
                           <a href="javascript:void(0);" tabindex="-1"> {eachOpp.Name}</a>
                        </td>
                        <td headers="e" data-label="Account Name" key={eachOpp.id}>
                           <div class="slds-truncate" title="Account Name">
                              {eachOpp.Account.Name}
                           </div>
                        </td>
                        <td headers="l" data-label="Close Date" key={eachOpp.id}>
                           {eachOpp.CloseDate}
                        </td>
                        <td headers="o" data-label="Amount" key={eachOpp.id}>
                           <div class="slds-truncate" title="Amount">
                              {eachOpp.Amount}
                           </div>
                        </td>
                        <td headers="s" data-label="Type" key={eachOpp.id}>
                           <div class="slds-truncate" title="Type">
                              {eachOpp.Type}
                           </div>
                        </td>
                        <td headers="a" data-label="ExpectedRevenue" key={eachOpp.id}>
                           <div class="slds-truncate" title="ExpectedRevenue">
                              {eachOpp.ExpectedRevenue}
                           </div>
                        </td>
                        <td headers="w" data-label="Probability" key={eachOpp.id}>
                           <div class="slds-truncate" title="Probability">
                              {eachOpp.Probability}
                           </div>
                        </td>
                     </tr>
                  </template>
               </tbody>
            </table>
            <div class="slds-align_absolute-center">
               <div class="slds-m-right_x-large slds-m-top_large">
                  <lightning-button-icon icon-name="utility:left" variant="border-filled"
                     onclick={handlePagePrevious}></lightning-button-icon>
               </div>
               <div class="slds-m-top_large">
                  <lightning-button-icon icon-name="utility:right" variant="border-filled"
                     onclick={handlePageNext}></lightning-button-icon>
               </div>
            </div>
         </template>
      </div>
   </lightning-card>
</template>