[HELP] Row MouseEnter | MouseLeave show action buttons

[pradeepravi-cse]

I want to show a set of actions on mouse hover, like Gmail.

[Domino987]

So what did you try yet? You can use Component Overriding for the row and wrap it in a div to listen to mouseEnter events and modify it for that.

[pradeepravi-cse]

I did a small hack, for now, Made action columns static using CSS. But thats not the proper way to do

[theMattCode]

I kinda solved this by using JSS with pseudo and nested selectors. The jss-nested-plugin is required for this to work. It is available by default if you use material-ui. Here a short example to get a sense how it works in a functional component:

import { createStyles, makeStyles } from '@material-ui/core';
import MaterialTable, { MTableBodyRow } from 'material-table';

const styles = makeStyles(() =>
  createStyles({
    row: {
      '& button': {
        display: 'none'
      },
      '&:hover': {
        '& button': {
          display: 'block'
        }
      }
    }
  })
);
const MyTable = props => {
  const classes = styles();
  return <MaterialTable
    components={{
      Row: rowProps => <MTableBodyRow {...rowProps} className={classes.row} />
    }}
    ... more material table props
  />;
}

Hope that helps.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.