additional styling on DataTableScrollArea element?

[hughfitzgerald]

I'm new to CSS, React, Mantine, etc. so I apologize if this is possible in the current implementation.

Is it possible to style the embedded ScrollArea element? I've used the "Additional styling" examples to style the root, table, header, pagination, etc. But I haven't figured out how to style the ScrollArea element.

In particular, I'm trying to set overflow to visible. I've got a HoverCard in one of the cells and I want the popup to extend past the borders of the table.

Any help you can provide would be appreciated. I love the DataTable component and its functionality is what caused me to choose Mantine for this project.

[hughfitzgerald]

Okay, I was able to do this by styling .mantine-ScrollArea-root but then this breaks the ScrollArea. I should've guessed.

Any advice on getting the HoverCard to work from a DataTable cell without getting clipped by the edges?

Thanks again for the great component.

[icflorescu]

You were right to anticipate that by setting overflow to visible on the ScrollArea would break its functionality.

Have a look at how CSS overflow property works to better understand how it works and why this is happening: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow.

That's why anything placed inside the ScrollArea will be "clipped".

I'n not sure how you implemented the HoverCard you've mentioned, but I think I'd try to do it with a Mantine Popover component and see if setting its withinPortal property (see here) to true helps.
I might be wrong, but if my understanding is correct, rendering within a portal means it would place the element somewhere outside the "normal" hierarchy tree (probably as a more "direct" document child), so it this case it won't reside within the ScrollArea and it won't get clipped.

Again, I'm not 100% sure and I might be wrong.

I'll try to do a test when I have a few spare minutes and get back here.

[hughfitzgerald]

Thank you! It turns out HoverCard itself has the same withinPortal property. To be honest, I think I saw it but I had no clue what it could mean. It works perfectly now.

[icflorescu]

I'm glad to learn it works!
And thanks for the sponsorship, btw :-)