Apex Code Development You need to sign in to do that
Don't have an account?
How to place a table in new row?
I have created a table and its expanding in same row of other element and expanding page horizontally. I want the table to be rendered in new row.
Table component is placed on parent component.
Table component is placed on parent component.
<aura:component>
<table class="slds-table slds-table_cell-buffer slds-table_bordered" aria-labelledby="element-with-table-label other-element-with-table-label">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="count">#</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Product Name">PRODUCT NAME</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Item Cost">PER ITEM COST</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Quantity">QUANTITY</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Price">PRICE</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Contracts">CONTRACTS</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.tableItems}" var="tableItem">
<tr>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>
All Answers
try below code and get referance.below table is rendering fine in each row.
<aura:component> <aura:attribute name="tableItems" type="list" default="['test1','test2','test3','test4','test5']"/> <table class="slds-table slds-table_cell-buffer slds-table_bordered" aria-labelledby="element-with-table-label other-element-with-table-label"> <thead> <tr class="slds-line-height_reset"> <th class="" scope="col"> <div class="slds-truncate" title="count">#</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Product Name">PRODUCT NAME</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Item Cost">PER ITEM COST</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Quantity">QUANTITY</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Price">PRICE</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Contracts">CONTRACTS</div> </th> </tr> </thead> <tbody> <aura:iteration items="{!v.tableItems}" var="tableItem"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </aura:iteration> </tbody> </table> </aura:component>If this cmp is calling from parent cmp and you have been passing value from there then use below way.
<!--This is parent cmp--> <aura:component> <!--This is child cmp--> <c:childCmpName tableItems="{!v.attributeName}"/> </aura:component>Try above both code and let me know if it helps you and marking it as best answer.
Thank you