+ Start a Discussion
louisa barrett 7louisa barrett 7 

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.
 
<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
Himanshu sharma 284Himanshu sharma 284

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
 
{tushar-sharma}{tushar-sharma}
Hi Louisa,

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/
louisa barrett 7louisa barrett 7
Hi Tushar,
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
{tushar-sharma}{tushar-sharma}
Hi Louisa,
Just add a parent div and give it a fixed width and add overflow: auto in CSS. You will get Horizontal scrolling.
louisa barrett 7louisa barrett 7
Hi,
Apologies for the late reply, thank you for the advice I will add the div and hopefully that will work.

Thank you
Ha Anh 45Ha Anh 45
Hi louisa,
Can you give me some sample code. I have the same yout requirement and still can't display horizontal scroll bar
louisa barrett 7louisa barrett 7
Hi,

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