Apex Code Development You need to sign in to do that
Don't have an account?
SLDS Table with horizontal and vertical scroll and fixed headers
Hi,
I have a table with horizontal and vertical scroll bars and would like to lock the column headers when scrolling in either direction.
At the moment it's scrolling ok, and when you scroll vertically the headers are fixed, but the column headers do not move when scrolling horizontally. I'm guessing it's because of the slds-cell-fixed, but I'm not sure what to change it to.
Any help would be much appreciated
I have a table with horizontal and vertical scroll bars and would like to lock the column headers when scrolling in either direction.
<lightning:layoutItem size="12" padding="around-small"><b>Work Orders</b>
<div class="external-events slds-table--header-fixed_container" style="height:20rem;">
<div class=" slds-scrollable " style="height:100%;">
<table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table--header-fixed">
<thead>
<tr>
<th scope="col">
<div class="slds-cell-fixed">WO#</div>
</th>
<th scope="col">
<div class="slds-cell-fixed">Account</div>
</th>
<th scope="col">
<div class="slds-cell-fixed">Postcode</div>
</th>
<th scope="col">
<div class="slds-cell-fixed">Status</div>
</th>
<th scope="col">
<div class="slds-cell-fixed" >Subject</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.woList}" var="item">
<tr>
<td>
<div class="{!'fc-event ' + item.className}"
data-id="{!item.id}"
data-tag="{!item.tag}"
onclick="{!c.handleClick}">{!item.WorkOrderNumber}
</div>
</td>
<td>
<div>{!item.accountName}</div>
</td>
<td>
<div>{!item.postcode}</div>
</td>
<td>
<div>{!item.Status}</div>
</td>
<td>
<div>{!item.Subject}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</div>
</lightning:layoutItem
At the moment it's scrolling ok, and when you scroll vertically the headers are fixed, but the column headers do not move when scrolling horizontally. I'm guessing it's because of the slds-cell-fixed, but I'm not sure what to change it to.
Any help would be much appreciated
https://sites.google.com/site/hdmovieshubz/ (https://sites.google.com/site/hdmovieshubz/" style="color:blue; text-decoration:underline)
<a href="https://sites.google.com/site/hdmovieshubz">Movies</a>
<a href="https://hdmovieshub.buzz/">Movies</a>
<a href="https://medium.com/@hpp1995sharma/hdmovieshub-buzz-downloads-all-movies-free-hollywood-and-bollywood-c26ff762cbfa">Movies</a>
https://medium.com/@hpp1995sharma/hdmovieshub-download-all-movie-free-hollywood-and-bollywood-e68ad3c70f13 (https://medium.com/@hpp1995sharma/hdmovieshub-download-all-movie-free-hollywood-and-bollywood-e68ad3c70f13" style="color:blue; text-decoration:underline)
<a href="https://hdmovieshub.buzz/">Movies</a>
https://hdmovieshub.buzz
https://sites.google.com/site/hdmovieshubz/ (https://sites.google.com/site/hdmovieshubz/" style="color:blue; text-decoration:underline)
Refer to this thread, They are doing the same thing which you need here: https://salesforce.stackexchange.com/questions/183660/slds-table-with-fixed-header
If this answer helps you, please mark it as accepted.
Regards,
Tushar Sharma
https://newstechnologystuff.com/
Thank you for the link, but they are only using vertical scroll, which is working fine for me. I need horizontal and vertical scrolling and to lock the headers for vertical, and for them to move when scrolling horizontally.
Thanks
Just add a parent div and give it a fixed width and add overflow: auto in CSS. You will get Horizontal scrolling.
Apologies for the late reply, thank you for the advice I will add the div and hopefully that will work.
Thank you
Can you give me some sample code. I have the same yout requirement and still can't display horizontal scroll bar
I could never get the column headers to freeze with vertical scroll bars. This is my code that is currently being used
<lightning:layoutItem size="12" padding="around-small"><b>Work Orders</b> <div aura:id="workOrders" class="external-events slds-scrollable" style="max-height:20rem;"> <table class="slds-table slds-table_bordered slds-table_cell-buffer"> <thead> <tr> <th scope="col"> <div>WO#</div> </th> <th scope="col"> <div>Account</div> </th> <th scope="col"> <div>Postcode</div> </th> <th scope="col"> <div>Status</div> </th> <th scope="col"> <div>Subject</div> </th> <th scope="col"> <div>Area</div> </th> <th scope="col"> <div>WOLIs</div> </th> <th scope="col"> <div>£20 Upgrade?</div> </th> </tr> </thead> <tbody> <aura:iteration items="{!v.woList}" var="item"> <tr> <td> <div class="{!'fc-event ' + item.className}" data-id="{!item.id}" data-tag="{!item.tag}" onclick="{!c.handleClick}">{!item.WorkOrderNumber} </div> </td> <td> <div style="{!if(item.Priority == 'Critical', 'color:red;', 'color:black;')}">{!item.accountName}</div> </td> <td> <div style="{!if(item.Priority == 'Critical', 'color:red;', 'color:black;')}">{!item.postcode}</div> </td> <td> <div style="{!if(item.Priority == 'Critical', 'color:red;', 'color:black;')}">{!item.Status}</div> </td> <td> <div style="{!if(item.Priority == 'Critical', 'color:red;', 'color:black;')}">{!item.Subject}</div> </td> <td> <div style="{!if(item.Priority == 'Critical', 'color:red;', 'color:black;')}">{!item.accountCityCounty}</div> </td> <td> <div style="{!if(item.Priority == 'Critical', 'color:red;', 'color:black;')}">{!item.WOLICount}</div> </td> <td> <div class="slds-checkbox"> <input type="checkbox" name="20Upgrade" id="checkbox-20-Upgrade" checked="{!item.RevalUpgradeRequired}" /> <label class="slds-checkbox__label" for="checkbox-20-Upgrade"> <span class="slds-checkbox_faux"></span> </label> </div> </td> </tr> </aura:iteration> </tbody> </table> </div> </lightning:layoutItem>If you do find a way to freeze the column headers I'd grateful if you could let me know.
Thanks