[Feature Request]: Optional prop to remove hover shadowing in DataTable component

[sydrosa]

Summary

With DataTable component being able to render so many different types of data/information/components in it's table cells, I'd suggest being able to remove the hover shadow on each row for styling purposes. This may involve both design and development.

Justification

Currently, there is no business reason for this request.

I believe that this may make development easier as the CSS overrides to achieve this behavior were a bit difficult (the hover state is on both the row and cell).

In a prototype I'm currently working with, a column inside the data table has cells which are full of <Code> snippet components. When you hover over the row/cell, the snippet remains with the white background, since the "Copy" action button inside of it also has a background transition hover state (the same color as the row/cell's hover state). I can imagine many other scenarios where you're rendering a component in the cell, which does not work nicely with the hover state.

Desired UX and success metrics

This I'm less sure about, since this enhancement can be achieved with CSS overrides. I imagine that removing a hover state out of the box for devs who are rendering components in each cell will increase correct implementation.

Required functionality

An optional prop (defaulted as true) that will remove the hover class on both the row and cell in DataTable component.

Specific timeline issues / requests

None currently. Just wanted to see if this was possible :)

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[theiliad]

@sydrosa thanks for opening this issue 👋🏻

You should be able to achieve this by overriding the CSS.

We won't be adding the functionality into the library just yet as we think that we might be losing usability.

[theiliad]

Feel free to reopen with additional comments 🙂