I am trying to use the built-in lightning-datatable LWC component. My data has a lot of columns, therefore the horizontal scroll bar appears on my table. When I edit a cell, however, the Cancel and Save buttons pop up, and they cover the scroll bar. But I need the scroll bar to remain so I can edit off-screen columns. I am not doing anything special with the datatable, i.e. this bug seems to come from out-of-box performance and not a side effect of my code.
I looked through the HTML/CSS, and part of the problem is that the class
slds-is-absolute is assigned to the div containing the cancel and save buttons. When I change this to 'slds-is-relative', the scroll bar is no longer hidden and I can use it. With
slds-is-relative, however, there is a weird gap of space between the last row in the datatable and the scroll bar. I'm not sure how much that matters, though, because it seems like the
<lightning-datatable> is surrounded by a shadow dom. Therefore editing any internal HTML and CSS is difficult.
What can I do to make sure the scroll bar is visible after editing?
I posted this question when my org was on Summer '20. Now we are on Winter '21 and still have this issue.
Hackish fix: A possible solution, inspired by this questions, is to wrap the datatable in a scrollable div. This will allow you to scroll and edit while the save/cancel buttons are displayed. Only downside is you have to scroll the entire webpage, not just the table. While this works in the meantime I'd like to see if there is a workaround that fixes the actual lightning-datatable's scrolling.