I have integrated a table from material-ui into my project, similar to the image shown below:
My issue is that when I hover over a specific row in the table, the background color changes to dark. However, some rows may contain sub-rows and I want these sub-rows to also change to a darker background color when hovered over.
Currently, my design structure only allows for the selected table cell to change its background color when hovered, rather than all sub-row's background colors getting darker as well.
I have attempted wrapping the sub-table cells of sub-rows into their own table row or cell using div elements, but this approach did not work. Is there a better way to achieve the desired behavior?
import { Table,TableHead,TableRow,TableCell,TableBody,Divider,makeStyles} from '@material-ui/core'
export default Table = () => {
const subRow=[{a:'test1',b:1},{a:'test2',b:2}]
const tableClasses = useStyles()
return(
<Table>
<TableHead>
<TableRow>
<TableCell />
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>WER</TableCell>
<TableCell>234</TableCell>
<TableCell>
{subRow.map((e, index) => {
return (
<div className={tableClasses.subRow}>
<div> {e.a} </div>
{index < subCells.length - 1 && <Divider />}
</div>
);
})}
</TableCell>
<TableCell>
{subRow.map((e, index) => {
return (
<div className={tableClasses.subRow}>
<div> {e.a} </div>
{index < subCells.length - 1 && <Divider />}
</div>
);
})}
</TableCell>
</TableRow>
</TableBody>
</Table>;
)
const useStyles = makeStyles(() => ({
subRow:{
'&:hover':{
backgroundColor: 'red'
}},
}))
}