[question] How to disable shadow in pinned columns when horizontal scroll is at the beginning or at the end of the row?

[AnvarAka1]

Order ID 💳

47534

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

When I scroll horizontally completely to the left, I want to remove the shadows from the left pinned columns. When I scroll horizontally completely to the right, I want to remove the shadows from the right pinned columns.

That said, I can add event listener to the scroll event by getting the element by plain js DOM-selection, and then use conditionally css classes, but I am curious whether there is better method to do that, for instance, using components prop in datagrid for pinned column and using datagrid props to make function callback on scroll position change.

If there is such kind of method, that would be super helpful, as my method is not elegant to use with datagrid.

Your environment 🌎

No response

[m4theushw]

Currently, we don't have any method or API to fully support this use case. But we have an rowsScroll event that is fired every time that the container is scrolled, ether horizontally or vertically. You can check if left=0 to detect when the user has scrolled completely to the left. But to detect scrolling completely to the right it's a bit more complex. You'll need to obtain the content width first by checking the DOM. It's not a good developer experience and we want to improve that, but it's planned for v6.