Apex Code Development You need to sign in to do that
Don't have an account?
salesforceapex Fix the DataTable header in lightning Design system?
Hi I created a VF page using SLDS, and created an table using slds-Data-Table. My datatable volume is large and I need to have the header fixed. I tried searching for solution and not able to get succeeded. Could anyone please help if you come across this scenario.
I don't think there is an SLDS class specifically that enables scrolling if you have large amounts of data, however an easy way to enable this using standard CSS is to do the following:
<style> .scrollable { height: 400px; <!-- Don't need this if it's okay for height to be dynamic --> overflow-y:auto; } </style> <div class="slds-page-header"> <p class="slds-text-heading--label">Contacts</p> <h1>My Contacts</h1> </div> <div class="scrollable"> <!-- The rest of the page goes here --> </div>EDIT: As @techbusinessman wrote in a comment below, there is now a standard utility class for making a div scrollable. The documentation can be found here:- https://www.lightningdesignsystem.com/components/utilities/scrollable/#overview
The code would now be as follows:<div class="slds-page-header"> <p class="slds-text-heading--label">Contacts</p> <h1>My Contacts</h1> </div> <div class="slds-scrollable"> <!-- The rest of the page goes here --> </div>Hope this helps.Please mark this as solved if it's resolved so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.
Thanks,
Nagendra
I believe I can't use your suggestion, because I have a datatable populated from a wrapper class. Even the column header is dynamically written from the wrapper values. If I create two div using two different datatables then I can't bring back the two tables aligned in the same fashion(I mean column alignment with the next table). Do you think we can align both the tables?
I have created two seperate tables one for header and one for body. This way you can apply scroll to the body and achieve the functionality.
<aura:application extends="force:slds"> <table class="slds-table slds-table_bordered slds-table_cell-buffer"> <thead> <tr class="slds-text-title_caps"> <th scope="col" class="colSize"> <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div> </th> <th scope="col" class="colSize"> <div class="slds-truncate" title="Account Name">Account Name</div> </th> <th scope="col" class="colSize"> <div class="slds-truncate" title="Close Date">Close Date</div> </th> </tr> </thead> </table> <div class="scroll"> <table class="slds-table slds-table_bordered slds-table_cell-buffer"> <tbody> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> <tr> <td scope="row" data-label="Opportunity Name" class="colSize"> <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div> </td> <td data-label="Account Name" class="colSize"> <div class="slds-truncate" title="Cloudhub">Cloudhub</div> </td> <td data-label="Close Date" class="colSize"> <div class="slds-truncate" title="4/14/2015">4/14/2015</div> </td> </tr> </tbody> </table> </div> </aura:application>CSS
.THIS.scroll { height: 200px; max-height: 200px; overflow-x: auto; overflow-y: auto; } .THIS .colSize{ width: 33.33%; }Let me know if this solves your problem.