SLDS table with fixed header

  • I'm implementing SLDS table in lightning component where you load more data on vertical scroll and it would be nice to have headers fixed. The code that I'm using is pretty much as in the slds docs:

    <div class="scrollable">
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">                
            <thead>
                <tr class="slds-text-title_caps">
                    ...
                </tr>
            </thead>     
            <tbody aura:id="tBody">
    
                ...
    
            </tbody>
        </table>
    <div>
    

    But I was not able to find any good solution for fixed headers as there looks to be nothing about it in slds defined classes, also was trying to implement this using custom css like this one https://jsfiddle.net/dPixie/byB9d/3/ where you have relative wrapper and absolute divs but was not able to adjust it for slds probably because slds has a lot of styles defined.

    Also you can't just make tbody scrollable because for this you`ll need to change it's display to block which will also ruin the slds styling:(

    Anyone knows a good solution for that(ideally without javascript)?

    I'm also looking for something of that sort. Hopefully `lightning:dataTable` with the real datatable like functionality will be up by Winter '18 as I just saw in a roadmap somewhere. As of now, if you want fixed header, then you probably would have to split the table into two separate table and implement the fixed header functionality. (In the mean time I would suggest you to go with datatable as it's Locker Service compatible, you have a `fixedHeader` property in-built in it.)

    @SE_User sorry but I'm not sure about what datatable are you talking about? I'm creating this in a lightning component, forgot to mention this.

    lightningdatatable is something similar to like `lightning:tabset` which would be coming in Winter '18 release as per their roadmap.Hopefully, there would be native SF functionalities like sorting, fixed header and all.. which is Locker Service compatible. (There's an in-built fixedHeader feature for jQuery datatable)

  • The SLDS table header row can be fixed using standard classes. There are two classes that are important slds-table–header-fixed_container and slds-cell-fixed and i created a working example on github please refer this link for sample code Github link

    The detailed explanation is on link SLDS framework data-table with fixed header without javascript

    Edited to provide code and explanation: The slds-table--header-fixed_container class is not documented in SLDS framework, it provides some padding to the table container and relative position. The slds-cell-fixed class is used inside th element it provides absolute position to table header and also responsible for giving top:0 within that container.

    The sample code is

    <div class="slds-table--header-fixed_container" style="height:450px;">
        <div class="slds-scrollable_y" style="height:100%;">
                <table class="slds-table slds-table_bordered slds-table--header-fixed">
                    <thead>
                        <tr class="slds-text-title_caps">
                            <th scope="col">
                                <div class="slds-truncate slds-cell-fixed" title="Opportunity Name">Opportunity Name</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate slds-cell-fixed" title="Account Name">Account Name</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate slds-cell-fixed" title="Close Date">Close Date</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                        <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                         <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                        <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                         <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                        <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                         <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                        <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                         <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                        <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                         <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                        <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                         <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                        <tr>
                          <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                          </th>
                          <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                          </td>
                          <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                          </td>
    
                        </tr>
                        <tr>
                            <th scope="row" data-label="Opportunity Name">
                                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
    
                        </tr>
                        <tr>
                            <th scope="row" data-label="Opportunity Name">
                                <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
    
                        </tr>
                        <tr>
                            <th scope="row" data-label="Opportunity Name">
                                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
    
                        </tr>
                        <tr>
                            <th scope="row" data-label="Opportunity Name">
                                <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
    
                        </tr>
                         <tr>
                            <th scope="row" data-label="Opportunity Name">
                                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row" data-label="Opportunity Name">
                                <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
                        </tr>
                         <tr>
                            <th scope="row" data-label="Opportunity Name">
                                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row" data-label="Opportunity Name">
                                <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
    
    
        </div>
    </div>
    

    Hope this will help @glls

    Please provide a resume of your detailed explanation, as links are bound to break/expire. As is, this does not provide an answer. Thanks!

    Code details updated..... @glls

    This is great. But it is not working if I specify column widths. May be I am doing something wrong..

    @kanwalpreetsingh I have tried the above code with multiple columns but the horizontal scroll not working can you help me to solve this?

    How to align table head center?

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used