3

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}"
                                         data="{!v.lineItemData}"
                                         keyField="id"
                                         hideCheckboxColumn="true"
                                         class="slds-table slds-table_striped slds-table_bordered slds-table_col-bordered"/></div>

enter image description here

2
  • Can you please try using <div class="slds-truncate slds-cell-fixed" in your code May 21, 2019 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, 2019 at 12:15

2 Answers 2

3

It can be achieved by css:

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

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; }

1
  • Hello, I'm trying to achieve the same thing as you. I used the position sticky but it's not working for me. You mentioned to remove the overflow property. Can you explain How? In advance thank you Dec 9, 2020 at 17:15

You must log in to answer this question.