1

enter image description hereYou can see it is fine now but the column is name is hardly visible`

    <!--Creating Case Header for table and Sorting Logic-->
    <div class="slds-hide" aura:id="CaseTable">
        <div class="slds-media__body ">
            <table class="slds-table slds-table_cell-buffer slds-max-medium-table_stacked-horizontal slds-table_bordered"
                   role="grid" id="caseTable">
                <thead>
                    <tr class="slds-text-title_caps slds-box slds-theme_shade">
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortLineNumber}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Line Number">Line Number</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'LineNumber') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'LineNumber') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortStatus}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Status">Status</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'Status') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'Status') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortSubStatus}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Sub Status">Sub Status</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'SubStatus') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'SubStatus') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortJobType}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Job Type">Job Type</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'JobType') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'JobType') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortSerialReceived}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Serial#/Received Serial#">Serial#/Received Serial#</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'SerialReceived') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'SerialReceived') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortProduct}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Product">Product</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'Product') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'Product') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortReceivedPart}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Received Part#">Received Part#</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ReceivedPart') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ReceivedPart') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortReceivedDate}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Received Date">Received Date</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ReceivedDate') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ReceivedDate') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortExpectedSerial}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Expected Serial#">Expected Serial#</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ExpectedSerial') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ExpectedSerial') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortExpectedPart}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Expected Part#">Expected Part#</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ExpectedPart') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ExpectedPart ') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortGLCode}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="GL Code">GL Code</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'GLCode') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'GLCode') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortShipToCountry}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="ShipTo Country">ShipTo Country</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ShipToCountry') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ShipToCountry') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                    </tr>
                </thead>

                <!--Querying the data and showing in Table-->
                <tbody>
                    <aura:iteration items="{!v.caseDetails}" var="caseDetail">
                        <tr scope="row" class="slds-hint-parent">
                            <td scope="row" role="gridcell" data-label="Line Number"
                                class="slds-cell-wrap slds-size_2-of-24">     
                                    <div title="Line Number">{!caseDetail.LN_NUM__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Status"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Status">{!caseDetail.LINE_STATUS__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Sub Status"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Sub Status">{!caseDetail.FSREPAIR_SUB_STATUS__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Job Type"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Job Type">{!caseDetail.JOB_TYPE__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Received Serial"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Received Serial">{!caseDetail.RECEIVED_SERIAL_NUM__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Product"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Product">{!caseDetail.PRODUCT__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Received Part#"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Received Part#">{!caseDetail.RECEIVED_PART_NUM__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Received Date"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Received Date">
                                    <lightning:formattedDateTime aura:id="thresholdRunOn"
                                                                 value="{!caseDetail.RECEIVED_DATE__c}"
                                                                 month="short"
                                                                 day="numeric"
                                                                 year="numeric"
                                                                 hour="2-digit"
                                                                 minute="2-digit"
                                                                 second="2-digit"
                                                                 hour12="true"
                                                                 timeZone="{!$Locale.timezone}"/>
                                </div> 
                            </td>
                            <td scope="row" role="gridcell" data-label="Expected Serial#"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Expected Serail#">{!caseDetail.EXPECTED_SERIAL_NUM__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Expected Part#"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Expected Part#">{!caseDetail.EXPECTED_PART_NUM__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="GL Code"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="GL Code">{!caseDetail.FRR_CODE__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="ShipTo Country"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="ShipTo Country">{!caseDetail.SHIP_TO_COUNTRY__c}</div>
                            </td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div>
        <!--Creating Pagination at the end-->
        <lightning:layout multipleRows="false" horizontalAlign="space" verticalAlign="end" aura:id="pagination">
            <lightning:layoutItem padding="around-large" size="12" flexibility="auto" smallDeviceSize="12"
                                  largeDeviceSize="4" mediumDeviceSize="4">
                <c:Pagination currentPageNumber="{!v.pageNumber}" maxPageNumber="{!v.maxPage}"/>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</div>
`I created a slds table to display the list of data but it is moving out of boundary when I increase browser zoom.

enter image description here

5
  • What would you like the table to do? Should it show a scroll bar or would you like it to change the width of the columns?
    – Kasper
    Jul 19, 2019 at 21:20
  • Change the width of the column Jul 19, 2019 at 21:24
  • Do the columns change width at all or do they stay the same width continuously? It may help if you include some code snippets so other people can see what you've done.
    – Kasper
    Jul 19, 2019 at 21:30
  • Same width. Let me paste my code Jul 19, 2019 at 21:32
  • There is pagination component as well in the last. Jul 19, 2019 at 21:35

2 Answers 2

2

I think fixed layout will solve your problem. Change the classes of table to below

slds-table slds-table_cell-buffer slds-table_fixed-layout slds-max-medium-table_stacked-horizontal slds-table_bordered 

slds-max-medium-table_stacked-horizontal class will make the row cells align vertically (instead of horizontal) in shorter width like mobile.

slds-table_fixed-layout will maintain the width of table to be same as available view width and the width of each column will be same (so better to use slds-truncate or slds-cell-wrap depending on requirement)

7
  • Thanks, It does solve that problem but the column name is hardly visible. How can we display the column names properly. Please check the snapshot attached. Jul 20, 2019 at 6:43
  • you can get horizontal scroll by increasing its initial width. Check here: salesforcesas.home.blog/2019/06/23/custom-table-in-lwc Jul 20, 2019 at 9:04
  • I am able to do this but using the below post since scrolling is not required: sfdcsireesha.blogspot.com/2017/11/… but is it possible to wrap header text that will completely solve my issue? @salesforcesas Jul 21, 2019 at 9:01
  • I am able to wrap header as well so please ignore my previous comment.I am posting the solution now. Jul 21, 2019 at 10:36
  • U will require 2 clicks for that to work. Not sure if you observed that. First click gets the position info. From second mouse down it starts working. Jul 22, 2019 at 2:34
0

enter image description here

    <!--Creating Case Header for table and Sorting Logic-->
    <div class="slds-hide" aura:id="CaseTable">
        <div class="slds-media__body ">
            <table class="slds-table slds-table_cell-buffer slds-table_fixed-layout slds-max-medium-table_stacked-horizontal slds-table_bordered"
                   id="caseTable">
                <thead>
                    <tr class="slds-text-title_caps slds-box slds-theme_shade" scope="col">
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortLineNumber}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="Line Number">Line Number</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'LineNumber') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'LineNumber') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortStatus}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="Status">Status</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'Status') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'Status') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortSubStatus}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="Sub Status">Sub Status</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'SubStatus') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'SubStatus') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortJobType}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="Job Type">Job Type</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'JobType') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'JobType') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortSerialReceived}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="Serial#/Received Serial#">Serial#/Received Serial#</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'SerialReceived') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'SerialReceived') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortProduct}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="Product">Product</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'Product') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'Product') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortReceivedPart}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="Received Part#">Received Part#</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ReceivedPart') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ReceivedPart') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortReceivedDate}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="Received Date">Received Date</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ReceivedDate') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ReceivedDate') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortExpectedSerial}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="Expected Serial#">Expected Serial#</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ExpectedSerial') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ExpectedSerial') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortExpectedPart}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="Expected Part#">Expected Part#</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ExpectedPart') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ExpectedPart ') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortGLCode}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="GL Code">GL Code</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'GLCode') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'GLCode') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                        <th class="slds-cell-wrap slds-size_2-of-24" scope="col" onclick="{!c.sortShipToCountry}">
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span title="ShipTo Country">ShipTo Country</span>  
                                <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ShipToCountry') }">&nbsp;  &#9660; </aura:if>  
                                <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ShipToCountry') }"> &nbsp;  &#9650; </aura:if>                        
                            </a>
                        </th>
                    </tr>
                </thead>

                <!--Querying the data and showing in Table-->
                <tbody>
                    <aura:iteration items="{!v.caseDetails}" var="caseDetail">
                        <tr scope="row" class="slds-hint-parent">
                            <td scope="row" role="gridcell" data-label="Line Number"
                                class="slds-cell-wrap slds-size_2-of-24">     
                                    <div title="Line Number">{!caseDetail.LN_NUM__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Status"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Status">{!caseDetail.LINE_STATUS__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Sub Status"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Sub Status">{!caseDetail.FSREPAIR_SUB_STATUS__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Job Type"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Job Type">{!caseDetail.JOB_TYPE__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Received Serial"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Received Serial">{!caseDetail.RECEIVED_SERIAL_NUM__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Product"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Product">{!caseDetail.PRODUCT__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Received Part#"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Received Part#">{!caseDetail.RECEIVED_PART_NUM__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Received Date"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Received Date">
                                    <lightning:formattedDateTime aura:id="thresholdRunOn"
                                                                 value="{!caseDetail.RECEIVED_DATE__c}"
                                                                 month="short"
                                                                 day="numeric"
                                                                 year="numeric"
                                                                 hour="2-digit"
                                                                 minute="2-digit"
                                                                 second="2-digit"
                                                                 hour12="true"
                                                                 timeZone="{!$Locale.timezone}"/>
                                </div> 
                            </td>
                            <td scope="row" role="gridcell" data-label="Expected Serial#"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Expected Serail#">{!caseDetail.EXPECTED_SERIAL_NUM__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="Expected Part#"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="Expected Part#">{!caseDetail.EXPECTED_PART_NUM__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="GL Code"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="GL Code">{!caseDetail.FRR_CODE__c}</div>
                            </td>
                            <td scope="row" role="gridcell" data-label="ShipTo Country"
                                class="slds-cell-wrap slds-size_2-of-24">
                                <div title="ShipTo Country">{!caseDetail.SHIP_TO_COUNTRY__c}</div>
                            </td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div>
        <!--Creating Pagination at the end-->
        <lightning:layout multipleRows="false" horizontalAlign="space" verticalAlign="end" aura:id="pagination">
            <lightning:layoutItem padding="around-large" size="12" flexibility="auto" smallDeviceSize="12"
                                  largeDeviceSize="4" mediumDeviceSize="4">
                <c:Pagination currentPageNumber="{!v.pageNumber}" maxPageNumber="{!v.maxPage}"/>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</div>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .