Table Component sticky column keyboard navigation problem

[paroxyzm]

Hello there!

I'm trying to build a scrollable Table component with the first column position set to sticky.
I have some trouble figuring out how to address some issues with focused cells, and thought maybe you'd be able to point me in the right direction. Please see an example which depicts the problem.
Steps to reproduce:

• navigate using your keyboard, by pressing Arrow right a few times until the second column is not visible.
• try to navigate back (<-) to the second column

What you'll see is that the second column (red background) is hiding behind the first one - this is expected - but unfortunately the user is unable to read the name of the column, and is likely to be confused. To see the second column the user needs to resort to the mouse, which to keyboard users, might be inconvenient.

My initial thought to solve this issue was to introduce a "listener" for focus event only for the second column, and then - scroll the table accordingly. This, however, doesn't seem like a clean solution, not to mention the "jumpy" behavior.

A slightly cleaner solution, but with the same drawbacks, would be to expose additional prop from Cell component, say onFocusReceived. What do you think about it - is it a good approach? I'm willing to contribute this if the consensus is to proceed with this approach.

Is there any other way I'm missing to resole this problem?
I'm more than happy to hear back from you!

I found this topic which seems to be related

[crazko]

You can achieve what you want with scroll-padding CSS property set on the scrollable container. Or scroll-margin on children depending on the final implementation.

In your example, try to add scroll-padding-left: 100px to the div with overflow: scroll set. The value 100px must be the same as the sticky column width.

In a more complex example you'd need to calculate the value for every column width change and sum them up in case of more sticky columns. This can be done from both sides - left/start and right/end separately.