[SalesForce] 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)?

Best Answer

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

Related Topic