about Table web component row hover issue

[LucyGit]

Hi,
I use the React Table web component. I want the row background color will change upon hovering. I found I need change style under the shadow DOM. It seems hard to do that. Does someone know a better way to implement the hover behavior for React Table web component

[MarcusNotheis]

Hey @LucyGit,

you are referring to the <Table /> component, right?
The easiest way of adding on hover effect for the rows is setting the mode prop to SingleSelect or MultiSelect:
https://sap.github.io/ui5-webcomponents-react/iframe.html?args=mode:SingleSelect&id=data-display-table--default-story&viewMode=story

Or do you have a use case where you want to have the hover effect for the rows without the possibility to click on a column?
In this case, you would need to make use of the CSS Parts of the Row:

In your css:

.tableRowWithHover::part(row):hover {
  background-color: var(--sapList_Hover_Background);
}

in your component:

<Table>
  <TableRow className="tableRowWithHover">
   {/* your cells */}
 </TableRow>
</Table>