+ Start a Discussion
prathibha krprathibha kr 

scrollable table in lightning 

Hi,
how to make a fixed header scrollable table in lightning 
Ajay K DubediAjay K Dubedi
Hi Prathibha,

The tweak is to use standard hidden classes like slds-table–header-fixed_container to create the table. 
The second important class is slds-cell-fixed which is applied to div inside the element. These classes are the part of Lightning Design System.

Please create the lightning component and try this code.

<aura:component >
    <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>
                    
                </tbody>
            </table>
  
        </div>
    </div>
</aura:component>

Refer this URL:

https://www.lightningdesignsystem.com/components/data-tables/

https://salesforce.stackexchange.com/questions/183660/slds-table-with-fixed-header

Please let me know if you have any query.
Please mark it as best Answer if you find it helpful.

Thank You
Ajay Dubedi