1

Simple question but I'm sure there's a much easier way.

So I iterate through a list and right now they're each on their own row. But how would I put the values into columns of, for example 3?

For example if we have 9 values, it'd look like this:

x x x

x x x

x x x

and if we had 5 values, it'd look like this:

x x x

x x

5
  • Do you want to change the form of the items being displayed?
    – vm53
    Nov 27, 2019 at 16:00
  • No just that it goes to a new row every 3rd item
    – Peter Luo
    Nov 27, 2019 at 16:14
  • You can use the lightning:layout and lightning:layoutItem to accomplish that
    – vm53
    Nov 27, 2019 at 16:20
  • Is there any way to do it with table?
    – Peter Luo
    Nov 27, 2019 at 16:22
  • I don't know that a table would be an effective way to display it. A table shows tabular data, each row represents an item and the columns are used to track attributes on the item (fields), by using a table you're breaking that and ruining the user experience in my opinion.
    – vm53
    Nov 27, 2019 at 16:53

1 Answer 1

2

you can achieve by tweak u r styles, i just used slds-grid slds-wrap and slds-size--1-of-3 slds-p-horizontal_x-small

cmp

<aura:attribute name="nineItems" type="List" default="['1','2','3','4','5','6','7','8','9']" />
<aura:attribute name="fiveItems" type="List" default="['1','2','3','4','5']" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:card title="Nine Items">
    <div class="slds-grid slds-wrap">
    <aura:iteration items="{!v.nineItems}" var="item" indexVar="index">
        <div class="slds-size--1-of-3 slds-p-horizontal_x-small">{!item}</div>

    </aura:iteration>    
</div>
</lightning:card>
<lightning:card title="Five Items">
    <div class="slds-grid slds-wrap">
    <aura:iteration items="{!v.fiveItems}" var="item" indexVar="index">
        <div class="slds-size--1-of-3 slds-p-horizontal_x-small">{!item}</div>

    </aura:iteration>    
</div>
</lightning:card>

please upvote/accept if solution works, and let me know if had any issue with this solution enter image description here

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.