+ Start a Discussion
prathibha krprathibha kr 

scrollable table in lightning 

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">
                    <tr class="slds-text-title_caps">
                        <th scope="col">
                            <div class="slds-truncate slds-cell-fixed" title="Opportunity Name">Opportunity Name</div>
                        <th scope="col">
                            <div class="slds-truncate slds-cell-fixed" title="Account Name">Account Name</div>
                        <th scope="col">
                            <div class="slds-truncate slds-cell-fixed" title="Close Date">Close Date</div>
                        <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                        <td data-label="Account Name">
                            <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                        <td data-label="Close Date">
                            <div class="slds-truncate" title="4/14/2015">4/14/2015</div>

Refer this URL:



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

Thank You
Ajay Dubedi