title: Embedding a Menu inside a TableCell with Material-UI
body: <p>I would like to implement <a href="https://material-ui.com/demos/menus/" rel="nofollow noreferrer">Google's Material UI Menu Item</a> inside of a <a href="https://material-ui.com/api/table-cell/" rel="nofollow noreferrer">TableCell</a>, as shown in their docs <a href="https://material.io/design/components/data-tables.html#tables-within-cards" rel="nofollow noreferrer">here</a>, as seen below:</p>
  
  <p><a href="https://i.stack.imgur.com/IffEM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IffEM.png" alt="enter image description here"></a></p>
  
  <p>Here is my current approach:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import {
    Grid,
    IconButton,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    Paper,
    Menu,
    MenuItem,
    Button,
  } from '@material-ui/core';
  import { ExpandLess, ExpandMore } from '@material-ui/icons';
  
  const styles = theme =&gt; ({});
  
  const Questions = ({ data, classes, openMenu, anchorEls, handleClose }) =&gt; {
    const CustomTableCell = withStyles(theme =&gt; ({
      head: {
        backgroundColor: theme.palette.common.black,
        color: theme.palette.common.white,
      },
      body: {
        fontSize: 14,
      },
    }))(TableCell);
  
    const formatData = rawData =&gt; Object.keys(rawData).map(key =&gt; rawData[key]);
  
    const n = { key: 'hi', rating: 55, text: 'wassup' };
  
    return (
      &lt;Grid container alignItems={'center'} direction={'column'} spacing={8}&gt;
        &lt;Paper className={classes.root}&gt;
          &lt;Button
            key="close"
            aria-label="Close"
            color="inherit"
            className={classes.close}
            onClick={e =&gt; openMenu('dude', e)}
          &gt;
            &lt;ExpandMore /&gt;
          &lt;/Button&gt;
          &lt;Menu
            id={`dude`}
            key="menu"
            anchorEl={anchorEls.dude}
            open={Boolean(anchorEls.dude)}
            onClose={e =&gt; handleClose('dude', e)}
          &gt;
            &lt;MenuItem onClick={e =&gt; handleClose('dude', e)}&gt;Delete&lt;/MenuItem&gt;
            &lt;MenuItem onClick={e =&gt; handleClose('dude', e)}&gt;Flag&lt;/MenuItem&gt;
            &lt;MenuItem onClick={e =&gt; handleClose('dude', e)}&gt;
              Mark Answered
            &lt;/MenuItem&gt;
          &lt;/Menu&gt;
          &lt;Table className={classes.table}&gt;
            &lt;TableHead&gt;
              &lt;TableRow&gt;
                &lt;CustomTableCell&gt;Question&lt;/CustomTableCell&gt;
                &lt;CustomTableCell numeric&gt;Rating&lt;/CustomTableCell&gt;
                &lt;CustomTableCell&gt;Upvote&lt;/CustomTableCell&gt;
                &lt;CustomTableCell&gt;Downvote&lt;/CustomTableCell&gt;
                &lt;CustomTableCell&gt;Options&lt;/CustomTableCell&gt;
              &lt;/TableRow&gt;
            &lt;/TableHead&gt;
            &lt;TableBody&gt;
              &lt;TableRow className={classes.row} key={n.key}&gt;
                &lt;CustomTableCell component="th" scope="row"&gt;
                  {n.text}
                &lt;/CustomTableCell&gt;
                &lt;CustomTableCell numeric&gt;{n.rating}&lt;/CustomTableCell&gt;
                &lt;CustomTableCell&gt;
                  &lt;IconButton
                    key="close"
                    aria-label="Close"
                    color="inherit"
                    className={classes.close}
                    onClick={() =&gt; ''}
                  &gt;
                    &lt;ExpandLess /&gt;
                  &lt;/IconButton&gt;
                &lt;/CustomTableCell&gt;
                &lt;CustomTableCell&gt;
                  &lt;IconButton
                    key="close"
                    aria-label="Close"
                    color="inherit"
                    className={classes.close}
                    onClick={() =&gt; ''}
                  &gt;
                    &lt;ExpandMore /&gt;
                  &lt;/IconButton&gt;
                &lt;/CustomTableCell&gt;
                &lt;CustomTableCell&gt;
                  &lt;Button
                    key="close"
                    aria-label="Close"
                    color="inherit"
                    className={classes.close}
                    onClick={e =&gt; openMenu(n.key, e)}
                  &gt;
                    &lt;ExpandMore /&gt;
                  &lt;/Button&gt;
                  &lt;Menu
                    id={`simple-menu-${n.key}`}
                    key="menu"
                    anchorEl={anchorEls[n.key]}
                    open={Boolean(anchorEls[n.key])}
                    onClose={e =&gt; handleClose(n.key, e)}
                  &gt;
                    &lt;MenuItem onClick={e =&gt; handleClose(n.key, e)}&gt;
                      Delete
                    &lt;/MenuItem&gt;
                    &lt;MenuItem onClick={e =&gt; handleClose(n.key, e)}&gt;dude&lt;/MenuItem&gt;
                    &lt;MenuItem onClick={e =&gt; handleClose(n.key, e)}&gt;choc&lt;/MenuItem&gt;
                  &lt;/Menu&gt;
                &lt;/CustomTableCell&gt;
              &lt;/TableRow&gt;
            &lt;/TableBody&gt;
          &lt;/Table&gt;
        &lt;/Paper&gt;
      &lt;/Grid&gt;
    );
  };
  
  Questions.propTypes = {
    data: PropTypes.object.isRequired,
    anchorEls: PropTypes.object.isRequired,
    classes: PropTypes.object.isRequired,
    openMenu: PropTypes.func.isRequired,
    handleClose: PropTypes.func.isRequired,
  };
  
  Questions.defaultProps = {};
  
  export default withStyles(styles)(Questions);
  </code></pre>
  
  <p>This is working, however the menu is not appearing in the correct place, even when passing in the related event <code>e</code>. I put in a dummy element before the table to test whether or not the table was affecting the menu, and found that the dummy worked just fine, as you can see in the screenshot below.
  <a href="https://i.stack.imgur.com/zrGKi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zrGKi.png" alt="working menu"></a></p>
  
  <p>And the improperly placed menu from the button in the table:</p>
  
  <p><a href="https://i.stack.imgur.com/0iDMW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0iDMW.png" alt="non-working menu"></a></p>
  
  <p>Any ideas on what could be happening? Obviously, the context and anchorEl isn't correctly identifying the location on the page, but not sure what to do to combat that.</p>