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.