API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 19th, 2019
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.06 KB | None | 0 0
raw download clone embed print report
  1. <!--Creating Case Header for table and Sorting Logic-->
  2. <div class="slds-hide" aura:id="CaseTable">
  3. <div class="slds-media__body ">
  4. <table class="slds-table slds-table_cell-buffer slds-max-medium-table_stacked-horizontal slds-table_bordered"
  5. role="grid" id="caseTable">
  6. <thead>
  7. <tr class="slds-text-title_caps slds-box slds-theme_shade">
  8. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortLineNumber}">
  9. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  10. <span class="slds-assistive-text">Sort</span>
  11. <span class="slds-truncate" title="Line Number">Line Number</span>
  12. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'LineNumber') }">&nbsp; &#9660; </aura:if>
  13. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'LineNumber') }"> &nbsp; &#9650; </aura:if>
  14. </a>
  15. </th>
  16. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortStatus}">
  17. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  18. <span class="slds-assistive-text">Sort</span>
  19. <span class="slds-truncate" title="Status">Status</span>
  20. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'Status') }">&nbsp; &#9660; </aura:if>
  21. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'Status') }"> &nbsp; &#9650; </aura:if>
  22. </a>
  23. </th>
  24. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortSubStatus}">
  25. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  26. <span class="slds-assistive-text">Sort</span>
  27. <span class="slds-truncate" title="Sub Status">Sub Status</span>
  28. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'SubStatus') }">&nbsp; &#9660; </aura:if>
  29. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'SubStatus') }"> &nbsp; &#9650; </aura:if>
  30. </a>
  31. </th>
  32. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortJobType}">
  33. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  34. <span class="slds-assistive-text">Sort</span>
  35. <span class="slds-truncate" title="Job Type">Job Type</span>
  36. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'JobType') }">&nbsp; &#9660; </aura:if>
  37. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'JobType') }"> &nbsp; &#9650; </aura:if>
  38. </a>
  39. </th>
  40. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortSerialReceived}">
  41. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  42. <span class="slds-assistive-text">Sort</span>
  43. <span class="slds-truncate" title="Serial#/Received Serial#">Serial#/Received Serial#</span>
  44. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'SerialReceived') }">&nbsp; &#9660; </aura:if>
  45. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'SerialReceived') }"> &nbsp; &#9650; </aura:if>
  46. </a>
  47. </th>
  48. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortProduct}">
  49. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  50. <span class="slds-assistive-text">Sort</span>
  51. <span class="slds-truncate" title="Product">Product</span>
  52. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'Product') }">&nbsp; &#9660; </aura:if>
  53. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'Product') }"> &nbsp; &#9650; </aura:if>
  54. </a>
  55. </th>
  56. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortReceivedPart}">
  57. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  58. <span class="slds-assistive-text">Sort</span>
  59. <span class="slds-truncate" title="Received Part#">Received Part#</span>
  60. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ReceivedPart') }">&nbsp; &#9660; </aura:if>
  61. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ReceivedPart') }"> &nbsp; &#9650; </aura:if>
  62. </a>
  63. </th>
  64. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortReceivedDate}">
  65. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  66. <span class="slds-assistive-text">Sort</span>
  67. <span class="slds-truncate" title="Received Date">Received Date</span>
  68. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ReceivedDate') }">&nbsp; &#9660; </aura:if>
  69. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ReceivedDate') }"> &nbsp; &#9650; </aura:if>
  70. </a>
  71. </th>
  72. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortExpectedSerial}">
  73. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  74. <span class="slds-assistive-text">Sort</span>
  75. <span class="slds-truncate" title="Expected Serial#">Expected Serial#</span>
  76. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ExpectedSerial') }">&nbsp; &#9660; </aura:if>
  77. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ExpectedSerial') }"> &nbsp; &#9650; </aura:if>
  78. </a>
  79. </th>
  80. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortExpectedPart}">
  81. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  82. <span class="slds-assistive-text">Sort</span>
  83. <span class="slds-truncate" title="Expected Part#">Expected Part#</span>
  84. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ExpectedPart') }">&nbsp; &#9660; </aura:if>
  85. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ExpectedPart ') }"> &nbsp; &#9650; </aura:if>
  86. </a>
  87. </th>
  88. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortGLCode}">
  89. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  90. <span class="slds-assistive-text">Sort</span>
  91. <span class="slds-truncate" title="GL Code">GL Code</span>
  92. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'GLCode') }">&nbsp; &#9660; </aura:if>
  93. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'GLCode') }"> &nbsp; &#9650; </aura:if>
  94. </a>
  95. </th>
  96. <th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortShipToCountry}">
  97. <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
  98. <span class="slds-assistive-text">Sort</span>
  99. <span class="slds-truncate" title="ShipTo Country">ShipTo Country</span>
  100. <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ShipToCountry') }">&nbsp; &#9660; </aura:if>
  101. <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ShipToCountry') }"> &nbsp; &#9650; </aura:if>
  102. </a>
  103. </th>
  104. </tr>
  105. </thead>
  106.  
  107. <!--Querying the data and showing in Table-->
  108. <tbody>
  109. <aura:iteration items="{!v.caseDetails}" var="caseDetail">
  110. <tr scope="row" class="slds-hint-parent">
  111. <td scope="row" role="gridcell" data-label="Line Number"
  112. class="slds-cell-wrap slds-size_2-of-24">
  113. <div title="Line Number">{!caseDetail.LN_NUM__c}</div>
  114. </td>
  115. <td scope="row" role="gridcell" data-label="Status"
  116. class="slds-cell-wrap slds-size_2-of-24">
  117. <div title="Status">{!caseDetail.LINE_STATUS__c}</div>
  118. </td>
  119. <td scope="row" role="gridcell" data-label="Sub Status"
  120. class="slds-cell-wrap slds-size_2-of-24">
  121. <div title="Sub Status">{!caseDetail.FSREPAIR_SUB_STATUS__c}</div>
  122. </td>
  123. <td scope="row" role="gridcell" data-label="Job Type"
  124. class="slds-cell-wrap slds-size_2-of-24">
  125. <div title="Job Type">{!caseDetail.JOB_TYPE__c}</div>
  126. </td>
  127. <td scope="row" role="gridcell" data-label="Received Serial"
  128. class="slds-cell-wrap slds-size_2-of-24">
  129. <div title="Received Serial">{!caseDetail.RECEIVED_SERIAL_NUM__c}</div>
  130. </td>
  131. <td scope="row" role="gridcell" data-label="Product"
  132. class="slds-cell-wrap slds-size_2-of-24">
  133. <div title="Product">{!caseDetail.PRODUCT__c}</div>
  134. </td>
  135. <td scope="row" role="gridcell" data-label="Received Part#"
  136. class="slds-cell-wrap slds-size_2-of-24">
  137. <div title="Received Part#">{!caseDetail.RECEIVED_PART_NUM__c}</div>
  138. </td>
  139. <td scope="row" role="gridcell" data-label="Received Date"
  140. class="slds-cell-wrap slds-size_2-of-24">
  141. <div title="Received Date">
  142. <lightning:formattedDateTime aura:id="thresholdRunOn"
  143. value="{!caseDetail.RECEIVED_DATE__c}"
  144. month="short"
  145. day="numeric"
  146. year="numeric"
  147. hour="2-digit"
  148. minute="2-digit"
  149. second="2-digit"
  150. hour12="true"
  151. timeZone="{!$Locale.timezone}"/>
  152. </div>
  153. </td>
  154. <td scope="row" role="gridcell" data-label="Expected Serial#"
  155. class="slds-cell-wrap slds-size_2-of-24">
  156. <div title="Expected Serail#">{!caseDetail.EXPECTED_SERIAL_NUM__c}</div>
  157. </td>
  158. <td scope="row" role="gridcell" data-label="Expected Part#"
  159. class="slds-cell-wrap slds-size_2-of-24">
  160. <div title="Expected Part#">{!caseDetail.EXPECTED_PART_NUM__c}</div>
  161. </td>
  162. <td scope="row" role="gridcell" data-label="GL Code"
  163. class="slds-cell-wrap slds-size_2-of-24">
  164. <div title="GL Code">{!caseDetail.FRR_CODE__c}</div>
  165. </td>
  166. <td scope="row" role="gridcell" data-label="ShipTo Country"
  167. class="slds-cell-wrap slds-size_2-of-24">
  168. <div title="ShipTo Country">{!caseDetail.SHIP_TO_COUNTRY__c}</div>
  169. </td>
  170. </tr>
  171. </aura:iteration>
  172. </tbody>
  173. </table>
  174. </div>
  175. <!--Creating Pagination at the end-->
  176. <lightning:layout multipleRows="false" horizontalAlign="space" verticalAlign="end" aura:id="pagination">
  177. <lightning:layoutItem padding="around-large" size="12" flexibility="auto" smallDeviceSize="12"
  178. largeDeviceSize="4" mediumDeviceSize="4">
  179. <c:Pagination currentPageNumber="{!v.pageNumber}" maxPageNumber="{!v.maxPage}"/>
  180. </lightning:layoutItem>
  181. </lightning:layout>
  182. </div>
  183. </div>
  184. `I created a slds table to display the list of data but it is moving out of boundary when I increase browser zoom.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!