[SalesForce] Lightning Grid – Columns and Rows

Looking to create this type of Grid in Lightning Grid. However what currently happens is C and D get pushed below item B (which is a chatter feed so it is long)

Current Component (mine is more set up with C/D switched with A, but i think the concept remains the same)

<aura:component implements="lightning:homeTemplate" 
            description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<aura:attribute name="column4" type="Aura.Component[]" />

<div>
    <lightning:layout horizontalAlign="spread" pullToBoundary="small" 
multipleRows="true">
        <lightning:layoutItem size="4" flexibility="grow" 
                              padding="around-small">
            {!v.column1}
        </lightning:layoutItem>
        <lightning:layoutItem size="4" flexibility="grow" 
                              padding="around-small">         
            {!v.column2}
        </lightning:layoutItem>
        <lightning:layoutItem size="4" flexibility="grow" 
                              padding="around-small">
            {!v.column3}
        </lightning:layoutItem>
      </lightning:layout>


        <lightning:layoutItem size="8" flexibility="grow" 
                              padding="around-small">
            {!v.column4}
        </lightning:layoutItem>

   </div> 
</aura:component>

Any ideas on how to create this with Lightning Grid?

Best Answer

SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:

<aura:application extends="force:slds">
    <lightning:layout>
        <lightning:layoutItem size="8">
            <lightning:layout multipleRows="true">
                <lightning:layoutItem size="12">
                    Section A
                </lightning:layoutItem>
                <lightning:layoutItem size="6">
                    Section C
                </lightning:layoutItem>
                <lightning:layoutItem size="6">
                    Section D
                </lightning:layoutItem>
            </lightning:layout>
        </lightning:layoutItem>
        <lightning:layoutItem size="4">
            Section B
        </lightning:layoutItem>
    </lightning:layout>
</aura:application>

Related Solutions

[SalesForce] Aligning table rows and columns in two different components

You can use sizing to force a specific size, along with a fixed table layout. Here's an example that should result in exactly even-sized columns:

<aura:application extends="force:slds">
<table class="slds-table slds-table_fixed-layout slds-table_bordered">
    <thead>
        <th class="slds-size_1-of-3" scope="col">
            <div class="slds-truncate slds-text-heading_small" title="Account Name">Account Name</div>
        </th>
        <th class="slds-size_1-of-3" scope="col">
            <div class="slds-truncate slds-text-heading_small" title="Account Status">Account Status</div>
        </th>
        <th class="slds-size_1-of-3" scope="col">
            <div class="slds-truncate slds-text-heading_small" title="Account Balance">Account Balance</div>
        </th>
    </thead>
    <tbody>
        <td data-label="Account Name">
            <div class="slds-truncate">
            Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.
            Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.
            </div>
        </td>
        <td data-label="Account Status">
             <div class="slds-truncate" title="Account Status">Smaller value</div>
        </td>
        <td data-label="Account Balance">
            <div class="slds-truncate" title="Account Balance">Another small value</div>
         </td>
    </tbody>
</table>    
</aura:application>

[SalesForce] Preselect rows in lightning tree grid

Code Example seems to be not complete - as it is not really clear where the data comes from. But based on the existing lines i assume you are wiring the data to a property via an apex method.

You are defining the selectedRows at construction Time - getting Data from the Server is asynchronous which means it tries to match the key against empty data. As afterwards no changes occur nothing is selected. Expanded Rows works because its owned by the tree grid component and has functionality to keep the state in sync while the selected rows are just passed through to the data table component. So my assumption is that you should try to update the selectedRows attributes or just set it after the data is fetched initially (you have to wire to a function not a property)

To illustrate what i mean find the following updated playground: https://developer.salesforce.com/docs/component-library/tools/playground/xnsuAEs4I/2/edit

The first button does not work because the selectedRows Data is not mutated. The second button works because a mutation to the selectedRows happens

As Alternative you can also just add e.g. a rendering condition so that the tree grid is only loaded when the data is existing:

Same example: https://developer.salesforce.com/docs/component-library/tools/playground/xnsuAEs4I/3/edit

Now the first button is also working for the second table as at initialisation time the data is already there

Related Topic