How is the scroll shadow implemented? #594
-
Loving this datatable, especially the details. When the table is scrollable, shadow appears and if scroll to right, shadow on the right disappears and shadow on the left show. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Hello Toshinaki, thank you for your kind words and apologies for the delayed reply. It's CSS, mostly. The code is a bit complex, but here is the main idea: the table is wrapped inside a The relevant parts should be here and here. The gradient backgrounds are defined here. |
Beta Was this translation helpful? Give feedback.
Hello Toshinaki, thank you for your kind words and apologies for the delayed reply.
The details you mentioned were very important for me when I started the project and I took pride in making it as "pleasing to the eye" as possible, hence the shadows.
It's CSS, mostly. The code is a bit complex, but here is the main idea: the table is wrapped inside a
ScrollArea
component that also includes four absolutely-positioneddiv
elements, which have some CSS classes displaying gradients applied depending on the scroll status.The relevant parts should be here and here. The gradient backgrounds are defined here.