title: Custom edit and delete components on row DataGrid MUI v5 component hovered
body: <p>I'm using Material UI or <a href="https://mui.com/" rel="noreferrer">MUI v5</a> components for the UI library in my React Js app.</p>
  <p>I'm creating a custom edit and delete row inside the <code>DataGrid</code>/<code>DataGridPro</code> component.</p>
  <p>The specification is to show edit and delete icons for the hovered row but not by adding a new column (not adding an action column). I found the example for a private dashboard here.
  <a href="https://i.stack.imgur.com/9Wk3p.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9Wk3p.png" alt="enter image description here" /></a></p>
  <p>So if the user decreases the width of the browser, the edit and delete icons wouldn't be hidden instead it would hide the row as seen in the image below.
  <a href="https://i.stack.imgur.com/lopHF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lopHF.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/Ey1wE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ey1wE.png" alt="enter image description here" /></a></p>
  <p>I made it here <a href="https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/demo.js" rel="noreferrer">https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/demo.js</a> but I found <strong>some drawbacks</strong> below:</p>
  <h3>1. The <code>Popper</code> component is rendered on top of the <code>DataGrid</code> component</h3>
  <p>When our mouse cursor hovered the row that was not fully shown, the <code>Popper</code> component was shown like these images below.</p>
  <p><a href="https://i.stack.imgur.com/WLsVV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WLsVV.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/yjwoo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yjwoo.png" alt="enter image description here" /></a></p>
  <p>I've tried to add the <code>disablePortal={true}</code> prop to the Popper component but it would make the <code>Popper</code> component rendered outside the row like this image below.
  <a href="https://i.stack.imgur.com/bLLVg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bLLVg.png" alt="enter image description here" /></a></p>
  <p>I also have tried to change the <code>zIndex</code> prop for the column header (became 1000), the row (became 10), and the pagination container (became 1000) of the <code>DataGrid</code> component also changed the <code>zIndex</code> prop of the <code>Popper</code> component (became 100) but still the <code>Popper</code> component was rendered on top of the <code>DataGrid</code> component like this image below.
  <a href="https://i.stack.imgur.com/KhOts.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KhOts.png" alt="enter image description here" /></a></p>
  <p><strong>Question 1: What should I do to make the <code>Popper</code> component rendered on the top of the row but still inside the <code>DataGrid</code> component like this image below?</strong>
  <a href="https://i.stack.imgur.com/TRjOQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TRjOQ.png" alt="enter image description here" /></a></p>
  <h3>2. The <code>Popper</code> component was not sticking to the <code>DataGrid</code> component</h3>
  <p>If I add a few new columns, the <code>Popper</code> component was sticking on the end of the row like this image below. This was the condition I want.</p>
  <p><a href="https://i.stack.imgur.com/0dcrJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0dcrJ.png" alt="enter image description here" /></a></p>
  <p>If we scroll our mouse to the start of the row, the <code>Popper</code> component was not sticking to the end of the row like this image below. This was not the condition I want.
  <a href="https://i.stack.imgur.com/1dgRI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1dgRI.png" alt="enter image description here" /></a></p>
  <p><strong>Question 2: What should I do to make the Popper component stick to the end of the row regardless of scrolling horizontally our mouse like this image below?</strong>
  <a href="https://i.stack.imgur.com/ihAAs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ihAAs.png" alt="enter image description here" /></a></p>
  <p>Here is the demo <a href="https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/Demo2.jsx" rel="noreferrer">https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/Demo2.jsx</a></p>
  <p>Or is there any better way to achieve this case? </p>