0

I am working on an aura lightning component that contains an html table and I'm using <aura:iteration /> around the table column <td></td> tag that will iterate over a list of strings and build out the table with the appropriate number of columns based on the number of strings in the list. All of this works fine.

My question is about the table columns expanding beyond the the size of the browser window. Are there options to prevent the table columns expanding beyond the size of the browser window and implementing a way to display the rest of the table using some type of css, slds or maybe jquery would have some way of displaying the rest of the table columns without expanding beyond the browser window size. Is that possible?

Here is my aura component:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="TimelineController" access="global" >
    <aura:attribute name="recordId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="steps" type="List" />
    
    <table class="slds-table slds-table_cell-buffer slds-table_fixed-layout slds-table_bordered slds-table_col-bordered">        
        <thead>
            <tr class="slds-line-height_reset slds-text-title--caps">
                <aura:iteration items="{!v.steps}" var="step">
                    <th scope="col">
                        <div class="slds-truncate" title="{!step}">{!step}</div>
                    </th>
                </aura:iteration>
            </tr>
        </thead>
        <tbody>        
            <tr class="slds-hint-parent">
                <aura:iteration items="{!v.steps}" var="step">
                    <td>
                        <div class="slds-truncate">Image goes here...</div>
                    </td>
                </aura:iteration>
            </tr> 
        </tbody>
    </table>
    
</aura:component>

The table is building out a timeline and there can be a variable number of steps in the timeline. The headers which I've tried to reduce using some styling as well as adjusting the actual text that is pulled dynamically from an object in Salesforce, but it still expands beyond the browser window. So, I'm looking for any options to create a good UI experience.

1
  • I recreated your component and it stays withing the window... what context are you using this table in? – Caspar Harmer May 15 at 0:05
1

Yes, it is possible to set a max width to columns, and furthermore to the table itself in order to avoid expanding beyond the viewport size.

the slds blueprints for the data table give out a file hints on setting widths using the style attribute, but you can achieve the same in a css file with the proper scoping.

Additionally, you can use the slds-max-medium-table_stacked to add responsiveness to the table, this is specially useful for mobile devices, where you have limited space.

2
  • thanks for pointing me in the right direction @glls I tried using the example for the divider with a fixed layout and it does prevent expanding beyond the viewport size. For headers that are too large, it shows the ellipsis. What does the slds-max-medium-table_stacked do? I tried adding that in, but I don't see any changes? Perhaps I'm not using it correctly or placed it wrong? – Dman100 May 14 at 20:26
  • it is used for stacking the rows into cards on mobile devises – glls May 15 at 14:03

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.