in lightning component of aura iteration I want to limit of records to be displayed at 5 items per column

Question

Please help me on how to display 5 records per column on aura iteration in lightning component. Let's say I have 10 records from Account object I want to display 5 records per column dynamically so the number of column will depend on the total number of records to be displayed but I want it to be 5 items per column.

Answer 1

You can do this via lightning:layout, lightning:layoutItem, and a minor bit of CSS:

App

<aura:application extends="force:slds">
    <aura:attribute name="values" type="List" default="[1,2,3,4,5,6,7,8,9,10,11,12]" />

    <lightning:layout multipleRows="true" class="slds-grid_vertical max-5">
        <aura:iteration items="{!v.values}" var="value">
            <lightning:layoutItem size="4">
                {!value}
            </lightning:layoutItem>
        </aura:iteration>
    </lightning:layout>

</aura:application>

---

CSS

.THIS.max-5 {
    max-height: 8.2em;
}

Output:

Note that the value "4" is derived from "4-of-12" (meaning three columns). It's up to you to dynamically determine how many columns you'll need (maximum of 12), and come up with the appropriate max-height value. Each element in the iterator must be the same height for this to work as well.

Otherwise, if you need something more variable, you'll have to break up your items into multiple lists (a list of lists), and render them that way:

<aura:application extends="force:slds">
    <aura:attribute name="columns" type="List" default="[[1,2,3,4,5],[6,7,8,9,10],[11,12]]" />
    <aura:attribute name="colSize" type="Integer" default="4" />
    <lightning:layout>
        <aura:iteration items="{!v.columns}" var="column">
            <lightning:layoutItem size="{!v.colSize}">
                <lightning:layout multipleRows="true">
                    <aura:iteration items="{!column}" var="cell">
                        <lightning:layoutItem size="12">
                            {!cell}
                        </lightning:layoutItem>
                    </aura:iteration>
                </lightning:layout>
            </lightning:layoutItem>
        </aura:iteration>
    </lightning:layout>
</aura:application>

Output is the same as the original, but the underlying DOM structure is different.

Since it's a ratio, you have to determine the correct size, which would be as follows:

 Columns | Size
---------+-----------------
 1       | 12
 2       | 6
 3       | 4
 4       | 3
 5       | 2 (One blank column)
 6       | 2
 7       | 1 (Five blank columns)
 8       | 1 (Four blank columns)
 9       | 1 (Three blank columns)
 10      | 1 (Two blank columns)
 11      | 1 (One blank column)
 12      | 1

Use the horizontalAlign feature to align the cells evenly across the space; this is useful for columns 5, 7, 8, 9, 10, and 11.

Example of eight columns:

<aura:application extends="force:slds">
    <aura:attribute name="columns" type="List" default="[[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[16,17,18,19,20],[21,22,23,24,25],[26,27,28,29,30],[31,32,33,34,35],[36,37,38,39,40]]" />
    <aura:attribute name="colSize" type="Integer" default="1" />
    <lightning:layout horizontalAlign="spread">
        <aura:iteration items="{!v.columns}" var="column">
            <lightning:layoutItem size="{!v.colSize}">
                <lightning:layout multipleRows="true">
                    <aura:iteration items="{!column}" var="cell">
                        <lightning:layoutItem size="12">
                            {!cell}
                        </lightning:layoutItem>
                    </aura:iteration>
                </lightning:layout>
            </lightning:layoutItem>
        </aura:iteration>
    </lightning:layout>
</aura:application>

---

Edit:

If the columns are getting too small for your liking, you can also specify a fixed size and use ui:scrollerWrapper (not mobile-friendly):

<aura:application extends="force:slds">
    <aura:attribute name="columns" type="List" default="[[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[16,17,18,19,20],[21,22,23,24,25],[26,27,28,29,30],[31,32,33,34,35],[36,37,38,39,40]]" />
    <aura:attribute name="colSize" type="Integer" default="4" />
    <ui:scrollerWrapper>
        <lightning:layout horizontalAlign="spread">
            <aura:iteration items="{!v.columns}" var="column">
                <lightning:layoutItem size="{!v.colSize}">
                    <lightning:layout multipleRows="true">
                        <aura:iteration items="{!column}" var="cell">
                            <lightning:layoutItem size="12">
                                {!cell}
                            </lightning:layoutItem>
                        </aura:iteration>
                    </lightning:layout>
                </lightning:layoutItem>
            </aura:iteration>
        </lightning:layout>
    </ui:scrollerWrapper>
</aura:application>

---