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!!!

12 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
  3. This comment has been removed by the author.

    ReplyDelete
  4. If I Put this table in grid the header content gets compressed and not wrapped. Do you have any idea how to do that

    ReplyDelete
  5. What if we are using ligthing datagable, not html table

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Do you need a software spy someone?How to read someone’s text messages without installing software on their Phone?
    You can visit here and use it.You can spy on other people’s chats, call logs, and multimedia files without letting them know

    ReplyDelete
  8. Visit Declare to get a beautiful wedding dresses of your dreams. Explore our exquisite selection of wedding dresses in a range of styles and designs. Get the ideal dress that fits your budget and style today to add even more unique touches to your big day.

    ReplyDelete
  9. Embrace the luxurious look of our beautiful Chiffon Collection. Find a variety of stylish and classic chiffon outfits that can completely transform your style. Get the ideal focus to your outfit by shopping now.

    ReplyDelete