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. Welcome to the future! Financing made easy with Prof. Mrs. DOROTHY LOAN INVESTMENTS

    Hello, Have you been looking for financing options for your new business plans, Are you seeking for a loan to expand your existing business, Do you find yourself in a bit of trouble with unpaid bills and you don’t know which way to go or where to turn to? Have you been turned down by your banks? MRS. DOROTHY JEAN INVESTMENTS says YES when your banks say NO. Contact us as we offer financial services at a low and affordable interest rate of 2% for long and short term loans. Interested applicants should contact us for further loan acquisition procedures via profdorothyinvestments@gmail.com

    We invest in all profitable projects with cryptocurrencies. I'm here to share an amazing life changing opportunity with you. its called Bitcoin / Forex trading options, Are you interested in earning a consistent income through binary/forex trade? or crypto currency trading. An investment of $100 or $200 can get you a return of $2,840 in 7 days of trading and you get to do this from the comfort of your home/work. It goes on and on The higher the investment, the higher the profits. Your investment is safe and secured and payouts assured 100%. if you wish to know more about investing in Cryptocurrency and earn daily, weekly OR Monthly in trading on bitcoin or any cryptocurrency and want a successful trade without losing Contact MRS.DOROTHY JEAN INVESTMENTS profdorothyinvestments@gmail.com

    categories of investment

    Cryptocurrency
    Loan Offer
    Mining Plan
    Business Finance Plan
    Binary option Trade Plan
    Forex trade Plan
    Stocks market Trade Plan
    Return on investment (ROI) Plan
    Gold and Silver Trade Plan
    Oil and Gas Trade Plan
    Diamond Trade Plan
    Agriculture Trade Plan
    Real Estate Trade Plan

    YOURS IN SERVICE
    Mrs. Dorothy Pilkenton Jean
    Financial Advisor on Bank Instruments,
    Private Banking and Client Services
    Email Address: profdorothyinvestments@gmail.com
    Operation: We provide Financial Service Such As Bank Instrument
    From AA Rate Banks, Cash Loan,BG,SBLC,BOND,PPP,MTN,TRADING,FUNDING MONETIZING etc.

    ReplyDelete