mui table сделать ховер по ячейкам
У меня есть таблица mui В ней есть сверху (как бы шапка таблицы) названия (для примера "headername1, headername2, headername3") Также слева есть колонка с другими названиями (leftName1,leftName2,leftName3,) на пересечении этих имен есть иконки, иноки там разные, как раз эти имена и сравниваются и в зависимости от входных данных я показываю красную иконку или зеленую или желтую, мне нужно сделать такой ховер, чтобы при наведении на иконку ховером выделялись и headername1 и leftName1, то есть не только сама иконка на которую навел, а еще и её названия в шапке и в боковом меню
<Table sx={{ minWidth: 650 }} size='small'>
<TableHead>
<TableRow>
{forHeader.map((el, key) => (
<TableCellStyled sx={{ writingMode: 'vertical-lr' }} key={key}>
{key !== 0 && (
<React.Fragment>
<CircleIconStyled color={el.color} />
<Typography variant='caption'>{el.value}</Typography>
</React.Fragment>
)}
</TableCellStyled>
))}
</TableRow>
</TableHead>
<TableBody>
{subArraysWithFirstElement.map((row, key) => (
<TableRow key={key}>
{(row as any).map((el, id) => {
if (id === 0) {
return (
// TODO: Rename
<TableCellStyledd key={id}>
<CircleIconStyled color={el.color} />
<Typography paddingLeft='4px' variant='caption'>
{el.value}
</Typography>
</TableCellStyledd>
);
}
return <TableCellIconStyled key={key}>{getIcon(el)}</TableCellIconStyled>;
})}
</TableRow>
))}
</TableBody>
</Table>
Может хотябы идеи будут какие-нибудь?
Ответы (1 шт):
Автор решения: Hrenmorzhovyi
→ Ссылка
сделал вот так, работает:
export const TableCellIconStyled = styled(TableCell, {
shouldForwardProp: (props) => props !== 'hoverColor',
})<TableCellIconStyledProps>(({ hoverColor, theme: { palette, spacing } }) => ({
height: spacing(5.5),
width: spacing(5.5),
maxWidth: spacing(5.5),
padding: 0,
borderBottom: 'none',
border: `1px solid ${palette.other.divider}`,
position: 'relative',
'&:hover::after': {
pointerEvents: 'none',
bottom: 44,
content: '""',
backgroundColor:
hoverColor === 'isFailure'
? palette.warning.outlinedHoverBackground
: hoverColor === 'isParallel'
? palette.action.selected
: hoverColor === 'isNotParallel'
? palette.error.outlinedHoverBackground
: 'none',
position: 'absolute',
height: '100vh',
width: '100%',
},
'&:hover::before': {
pointerEvents: 'none',
right: 0,
content: '""',
backgroundColor:
hoverColor === 'isFailure'
? palette.warning.outlinedHoverBackground
: hoverColor === 'isParallel'
? palette.action.selected
: hoverColor === 'isNotParallel'
? palette.error.outlinedHoverBackground
: 'none',
position: 'absolute',
height: '100%',
width: '100vw',
},
}));