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

I have two lightning components. One which gets account's basic information on load and iterates over it and another displays the each account's basic information in a row.

Here's the code:
viewAccountsList.cmp

<aura:iteration items="{!v.accountsList}" var="account" indexVar="i">
    <c:accountListItem account="{!account}" />
</aura:iteration>

accountListItem.cmp

<table class="slds-table slds-table_bordered">
    <thead>
         <th scope="col">
             <div class="slds-truncate slds-text-heading_small" title="Account Name">Account Name</div>
          </th>
          <th scope="col">
              <div class="slds-truncate slds-text-heading_small" title="Account Status">Account Status</div>
           </th>
           <th 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" title="Account Name">
                        {!v.account.name}
            </div>
        </td>
        <td data-label="Account Status">
             <div class="slds-truncate" title="Account Status">{!v.account.status}</div>
        </td>
        <td data-label="Account Balance">
            <div class="slds-truncate" title="Account Balance">{!v.account.balance}</div>
         </td>
    </tbody>
</table>

My problem is, if I write the table tag in accountListItem.cmp along with <thead> and write just the <tbody> in accountListItem.cmp the table does not align properly. The above code as it is iterating for all accounts, creates headers for all but it aligns well.

I was hoping if someone has any pointers or has solved this before.

Thank you in advance,

Best Answer

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>

Related Solutions

[SalesForce] Lightning Component – Sort table columns

Question: Are you using the new Community Templates? Spring16+ ?

If so, I'm curious what the need for a custom component is - You can connect the case object to the community - and using standard salesforce. On the Account related list for cases you can sort on any column and it will carry over to the community.

Let me know which version you are using.... Best, Kev

[SalesForce] Lightning component: Child rows in data table

Is it possible to achieve this without using JQuery?

Yes. If you can do something with JQuery, you can do it without JQuery. It's all JavaScript. As an addendum, anything you can do in JQuery you can do without JQuery and get better performance.

In the interest of keeping things brief, I'm not going to write out a full copy of your code with modifications, but a smaller, more generalized example that demonstrates how to do what you're trying to do.

<aura:application >
    <aura:attribute name="rows" type="Object[]" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <table>
        <tbody>
            <aura:iteration items="{!v.rows}" var="row" indexVar="rowIndex">
                <tr>
                    <td data-index="{!rowIndex}" onclick="{!c.toggle}">
                        {!row.Name}
                    </td>
                </tr>
                <aura:if isTrue="{!row.expanded}">
                    <aura:iteration items="{!row.children}" var="child">
                        <tr>
                            {!child.Name}
                        </tr>
                    </aura:iteration>
                </aura:if>
            </aura:iteration>
        </tbody>
    </table>
</aura:application>

({
    init: function(cmp, evt) {
        cmp.set("v.rows", [
            {Name: "A",
            expanded: false,
            children: [
            { Name: "A1" },
            { Name: "A2" }
            ]},
            {Name: "B",
            expanded: false,
            children: [
            { Name: "B1" },
            { Name: "B2" }
            ]},
            {Name: "C",
            expanded: false,
            children: [
            { Name: "C1" },
            { Name: "C2" }
            ]}
                ]);
    },
    toggle: function(cmp, evt) {
        var rows = cmp.get("v.rows");
        rows[evt.target.dataset.index].expanded = !rows[evt.target.dataset.index].expanded;
        cmp.set("v.rows", rows);
    }
})

As you can see from this code, it's a trivial matter to simply render the extra rows when the "expanded" attribute has been toggled. You should be able to modify this example to suit your needs.

I've purposefully left out all styling and fluff to get to the heart of the matter, which I think this app demonstrates easily. Most likely, you'll just need to add an "expanded" attribute to your data's information, and then toggle it as appropriate.

There's lots of other things you could do with this as well, such as querying the database, making a callout, or whatever else it is you want/need to do to get the data.

Best Answer

Related Solutions

[SalesForce] Lightning Component – Sort table columns

[SalesForce] Lightning component: Child rows in data table

Related Topic