show menu on Row hover

[rohitkkrana1]

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

1. 2. 3. 4.

Your Environment

Tech	Version
Material-UI
MUI-datatables
React
browser
etc

[patorjk]

Take a look at the setRowProps option. It allows you to set attributes and methods on the row (TR) tag. You could create an onMouseOver method that showed the menu.

[rohitkkrana1]

Take a look at the setRowProps option. It allows you to set attributes and methods on the row (TR) tag. You could create an onMouseOver method that showed the menu.

thanks buddy

[oamjadi]

@patorjk Thank you for this tip. So using that option I am able to fire a hover event for the row, now my question how can I rerender the row with buttons. For example, I thought one solution would be to create a method that setRowHoverState = true, but then how could I use that state value to conditionally render the buttons I need.

One way that I know how to target the particular row is with the rowIndex, okay and then I think I need to use customRowRender that should do it.

But how exactly does customRowRender work? What is the data parameter that it takes and who is providing that argument. What is an example of that parameter, because I was thinking of seeing if the current row that is rendering is equal to the row in my state then conditionally render buttons. But Im not sure if customRowRender would override the rendering settings for all rows or just the row that I want.

[sidlingappa]

@ospireon I have also faced same issue but i have used "Supported customizable components" in my case i have used Checkbox, selectableRows: 'single',setRowProps

const CustomActionbox = (props) => {
    let newProps = Object.assign({}, props);
    newProps.color = props['data-description'] === 'row-select' ? 'secondary' : 'primary';
    if (props['data-description'] === 'row-select') {
      return (
               <div id={"Action-"+props.id} style={actionStyle.icon}

                            <MenuItem> <MailIcon></MailIcon>
                              <EditIcon></EditIcon>
                              <BlockIcon></BlockIcon></MenuItem></div>
                            }
        />
      );
    } else {
      return (<Checkbox {...newProps} />);
    }
  };

setRowProps to have onMouseEnter & onMouseLeave

setRowProps:(row, dataIndex, rowIndex) => {
                return {
                  onMouseEnter: (e)=>handleRowHover(e,rowIndex),
                  onMouseLeave:(e) => handleRowHoverLeave(e, rowIndex)
                  ,
                 // style: { border: '3px solid blue' },
                };
              },

handleRowHover , handleRowHoverLeave example

const handleRowHover = (event,rowIndex) => {
  let row = document.getElementById("Action-MUIDataTableSelectCell-"+rowIndex);
  row.style.display= "block";
}
const handleRowHoverLeave = (event,rowIndex) => {
  let row = document.getElementById("Action-MUIDataTableSelectCell-"+rowIndex);
  row.style.display= "none";
}

Setting new CustomCheckbox in MUIDataTable

 components={{
              Checkbox: CustomActionbox,
            }

            }