Monday, February 12, 2018

How to freeze datatable header using slds standard classes

There is common scenario to freeze the table header and providing scrollbar to table body. This can be achieved by using standard slds classes no need to add custom CSS for that.

You have to use below mentioned slds classes:
  • slds-table--header-fixed_container : add this class on div by specifying the height for div
  • slds-table--header-fixed :add this class to table
  • slds-cell-fixed: add this class to <th> tag.


I have created a sample to display account list in data table inside slds card. Please find below sample code:


Hope this will help!!!

4 comments:

  1. I like this article on salesforce lightning tips and tricks. Thanks for sharing Salesforce Online Training

    ReplyDelete
  2. What if I have a lot of fields, only the visible field will stick. How can I achieve scrollable on x-axis? Thank you

    ReplyDelete