I have created lightning datatable.

How to freeze first column only while scrolling horizontal (not vertical) in lightning datatable.( or css)

Source code :

<div class="slds-scrollable_y" style="height:100%;"> 
    <lightning:datatable columns="{!v.dataColumn}"
                                         class="slds-table slds-table_striped slds-table_bordered slds-table_col-bordered"/></div>

enter image description here

  • Can you please try using <div class="slds-truncate slds-cell-fixed" in your code – Ashwini Dengi May 21 at 9:41
  • Thanks for reply. this one "slds-cell-fixed" fixed all cells now, i want just fixed first column in table. like this example (embed.plnkr.co/vZJuio). – user68937 May 21 at 12:15

It can be achieved by css:

.THIS table tr td:first-child {
    z-index: 1
  • Thanks for reply, if i used position fixed means vertical scroll is affected. i fixed this using position sticky. – user68937 May 23 at 9:27
  • It can be anything you want. The main idea here to write the correct css selector. – Oleh Berehovskyi May 23 at 9:40
  • Yes got it thanks. – user68937 May 23 at 12:33

I have fixed this issue using position sticky.

in lightning datatable overflow property added for parent elements.

once remove those properties from class it will be working fine.

.THIS table tr td:first-child { position:sticky; top;0; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy