3

thanks as always, you dudes are the wind beneath my wings.

What I have: A <table> that initializes with 2 columns, and a button that adds an additional column with each click (table is built using <aura:iteration>). The table takes up the entire width of its parent <lightning:Card> container, and the initial columns take up the width of the table. As new columns are added, all columns auto-resize to equal widths so they always take up the width of the table.

Example: 2 columns ('header' column and initial added column) Several columns take up the same width as just 2

What I want: Instead of columns dynamically resizing themselves, I'd like each column to be a fixed width, filling up the table width as added, with a horizontal scroll bar appearing once the columns exceed the table width

Code:

You can see my failed attempt at using <ui:scrollerWrapper> and slds-scrollable_x. At one point I added a style="width:250px" to the <th> elements in the table body - this set the column widths fixed until they filled the table - then they started resizing again.

<ui:scrollerWrapper>
            <div class="slds-scrollable_x">
                <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                    <thead>
                        <tr class="slds-line-height_reset">
                            <th class="slds-text-title_caps" scope="col">
                                <div class="slds-truncate" title="Entity Name">Entity</div>
                            </th>
                            <aura:iteration items="{!v.tablePeriods}" var="period" indexVar="colNum"> 
                                <th class="slds-text-title_caps" scope="col">
                                    <lightning:input aura:id ="periodLabel" placeholder="Enter Period Label..." value="{!period.label}"/>
                                </th>
                            </aura:iteration>
                        </tr>
                    </thead>
                    <tbody>
                        <aura:iteration items="{!v.tableRows}" var="row" indexVar="rowNum">
                            <tr class="slds-hint-parent">
                                <th data-label="Entity Name" scope="row">
                                    <div class="slds-truncate">
                                        {!row.entityName}
                                    </div>
                                </th>
                                <aura:iteration items="{!v.tablePeriods}" var="p" indexVar="colNum">
                                    <th>
                                        <lightning:select aura:id="selectList">
                                            <option value="">choose one...</option>                                      
                                            <aura:iteration items="{!row.options}" var="option">               
                                                <option value="{!option.label}" selected="{!option.selected}" >{!option.label}</option>                                                                                        
                                            </aura:iteration>
                                        </lightning:select>
                                    </th>
                                </aura:iteration>
                            </tr>
                        </aura:iteration>
                    </tbody>
                </table>
            </div>
        </ui:scrollerWrapper>
4

Table elements always expand to take up all available space. Instead, you'll want to use normal div elements. I'm not going to try and build a perfectly working example, but you'll want to start off like this:

<div class="slds-scrollable_x">
  <div ...> <!-- set table styles here -->
    <lightning:layout>
      <aura:iteration ...>
        <lightning:layoutItem size="4">
          ...
        </lightning:layoutItem>
     </aura:iteration>
   </div>
   <aura:iteration ...>
     <lightning:layout>
       <aura:iteration ...>
         <lightning:layoutItem size="4">
           ...
         </lightning:layoutItem>
       </aura:iteration>
     </lightning:layout>
   </aura:iteration>
 </div>
</div>

This will produce the effect you're looking for without the use of a table element.


Edit: Here's a really simple example app that demonstrates the logic I'm describing.

<aura:application extends="force:slds">
    <aura:attribute name="columns" type="Integer" default="1" />
    <aura:attribute name="rows" type="List" default="[['Column 1']]" />
    <lightning:slider label="Columns" step="1" value="{!v.columns}" onchange="{! c.handleChange }"/>

    <div class="slds-scrollable_x">
        <aura:iteration items="{!v.rows}" var="row">
            <lightning:layout>
                <aura:iteration items="{!row}" var="col">
                    <lightning:layoutItem size="2">
                        {!col}
                    </lightning:layoutItem>
                </aura:iteration>
            </lightning:layout>
        </aura:iteration>
    </div>
</aura:application>

({
    handleChange: function(component, event, helper) {
        var data = [];
        var cols = component.get("v.columns");
        var row = [];
        while(row.length < cols) {
            row.push("Column "+(row.length+1));
        }
        while(data.length < 10) {
            data.push(row);
        }
        component.set("v.rows", data);
    }
})
| improve this answer | |
  • Oh wow thanks for spelling out the example a bit further. I didn't think to bypass the table element altogether.. so if I use SLDS table classes on <lightning:layout>, should I expect it to be visually similar and maintain things like borders and the header row background color? Or would I have to write custom CSS to replicate it? – smohyee Oct 23 '18 at 21:32
  • Alternatively, if it's true that table columns will resize to the width of the table, would it be reasonable to solve by updating a table width attribute dynamically as new columns are added? I'm thinking some kind of tag on the <th> to set column width, with a fixed table width that is updated in the same method that adds columns. – smohyee Oct 23 '18 at 21:34
  • @smohyee honestly, I'm not familiar enough with slds table styles to definitively answer the first question, but I suspect you'd have to write your own CSS at least a bit. As for the second, yes, you should be able to resize the table dynamically. The table element always spreads all of its columns across the width of the table, so if you adjust the table's width, you'll get the effect you're looking for. – sfdcfox Oct 23 '18 at 21:40

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.