0

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.

3

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:

Vertical align with max height

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>

Eight columns

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>

Eight columns with scrollbar

  • 1
    +1 for class="slds-grid_vertical max-5"> and Nice explanation ... – vignesh Jun 3 '18 at 19:32
  • @sfdcfox, wow thanks for the info it's very helpful. So it will not work on records with different height? Currently I have a records using Map<String, List<Object>> so the height will be different per record. – Kevin Jun 3 '18 at 19:34
  • @Kevin Not unless you can make them all the same height somehow; you'll need to map your data into nested lists instead, as the other examples show. – sfdcfox Jun 3 '18 at 19:42

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.