On Row Hover event / action

[kscottthomas]

I am trying to display a popup message when a user hovers over certain rows. Is that supported in any way? I have exhausted all of my ideas.

Thank you in advance!!! Scott

[KevinVandy]

Are you using a custom cell render? Maybe something like:

import Tooltip from '@mui/material/Tooltip';

const columns = useMemo(
  () => [
    {
      accessorKey: 'salary',
      header: 'Salary',
      Cell: ({ cell }) => (
        <Tooltip title="tooltip info">${cell.getValue().toLocaleString()}</Tooltip>
      ),
    },
//...
  [],
);

[kscottthomas]

No actually I am not... I guess that would be a solution adding it to all the cells so it would behave like it was being called from the row. Would that be correct in my assumption? Or is there a custom row render?

[KevinVandy]

Usually you don't want to add extra markup that is not the standard <td> or <tr> semantic table tags in-between or around rows for accessibility reasons, so MRT does not have custom row renders available.

If you only want to code it once, you can also use the defaultColumn prop, I think. Though if you need callback prop arguments for cell, row, or column that might not work.

[kscottthomas]

Thank for your help, you pushed me into another direction that seems like a great solution.
renderRowActions={(row, index) => ( <Box> { row.row.original.Notes !== '' || row.row.original.LetterResult === '3' ? <Tooltip arrow placement='right' title={ <React.Fragment> {row.row.original.LetterResult === '3' ? <Typography color="inherit">Letter not delivered</Typography> : null} {row.row.original.Notes !== '' ? <Typography fontSize='10px' color="inherit">Notes: {row.row.original.Notes}</Typography> :null} </React.Fragment> }><InfoIcon onClick={() => console.info(row)} /></Tooltip> : null } </Box> )}

[KevinVandy]

Nice, if you do it that way, you don't have to use renderRowActions. You could also define a new column with a columnDefType: 'display' and it would achieve the same thing. Things like the header string would be defined like any other column and customizable.

More about that here at the bottom of these docs: https://www.material-react-table.com/docs/guides/display-columns#create-your-own-display-columns

[kscottthomas]

Good to know! Thanks again.