function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
xing gao 9xing gao 9 

How to implement scrollable data table in lightning?

I need to implement a scrollable data table in my current project. The way I am doing it right now is to create two tables, one only contains header, and the other one only contains body.But this methods brings in problem with alignment. I see that in lightning standard page, there are scrollable tables, so wanna ask is there a standard way doing this that won't bring about any problems?
SonamSonam (Salesforce Developers) 
You can make use of scrollable property on the data table you have created in lightning as explained in https://www.lightningdesignsystem.com/components/utilities/scrollable/

For vertical  scroll you can use: 
<div class="slds-scrollable--y">Scrollable Content Here</div>
Jon WhiteJon White
This will cause the header scroll as well...the header should be fixed.
priyanshu nemapriyanshu nema
Hi,
There is two standard classes to fix this issue that are  slds-table–header-fixed_container and slds-cell-fixed ,I have used this it's working for me , if you want only table body scrollable and header is fixed use this code.

<div class="slds-table--header-fixed_container" style="height:150px;">
            <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="Name">Name</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate slds-cell-fixed" title="Total Number">Total Number</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate slds-cell-fixed" title="Total Disbursement">Total Disbursement</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate slds-cell-fixed" title="Balance">Balance</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <aura:iteration items="{!v.listOfRow}" var="option">
                            <tr>
                                <td data-label="Scholarship">
                                    <div class="slds-truncate cls1" title="Name" >{!option.Name}</div>
                                </td>
                                <td data-label="No. Of Disbursement">
                                    <div class="slds-truncate" title="Total Number">{!option.Number}</div>
                                </td>
                                <td data-label="Total Disbursement">
                                    <div class="slds-truncate" title="Total Disbursement">$ {!option.Total}</div>
                                </td>
                                <td data-label="Balance">
                                    <div class="slds-truncate" title="balance">$ {!option.balance}</div>
                                </td>
                            </tr>
                        </aura:iteration>
                    </tbody>
                </table>
            </div>
        </div>