Personalized modify and remove elements on a row of the DataGrid material-ui version 5 component when hovered over

In my React Js app, I am utilizing Material UI components or MUI v5 as the UI library for my project.

Within the DataGrid/DataGridPro component, I am implementing a custom edit and delete row feature.

The requirement is to display edit and delete icons when hovering over a row without adding a new column specifically for actions. An example of this functionality can be seen on a private dashboard https://i.stack.imgur.com/9Wk3p.png

If the user reduces the browser width, instead of hiding the edit and delete icons, the row should be hidden as depicted in these images: https://i.stack.imgur.com/lopHF.png https://i.stack.imgur.com/Ey1wE.png

I have implemented it here https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/demo.js, but encountered some limitations:

1. The Popper component overlaps the DataGrid component

When hovering over rows that aren't fully visible, the Popper component appears on top of the DataGrid like shown in these images:

https://i.stack.imgur.com/WLsVV.png https://i.stack.imgur.com/yjwoo.png

Even setting disablePortal={true} didn't resolve the issue and rendered the Popper component outside the row as illustrated here: https://i.stack.imgur.com/bLLVg.png

Adjusting the zIndex values did not help either, with the Popper component still overlapping the DataGrid:

https://i.stack.imgur.com/KhOts.png

Question 1: How can I ensure the Popper component remains on top of the row within the DataGrid? https://i.stack.imgur.com/TRjOQ.png

2. The Popper component does not stick to the DataGrid component

Adding extra columns resulted in the Popper component sticking at the end of the row, which is desirable:

https://i.stack.imgur.com/0dcrJ.png

However, when scrolling to the beginning of the row, the Popper component did not stick to the end as intended:

https://i.stack.imgur.com/1dgRI.png

Question 2: How can I make the Popper component consistently adhere to the end of the row despite horizontal scrolling? https://i.stack.imgur.com/ihAAs.png

You can view the demo here: https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/Demo2.jsx

Alternatively, is there a more effective approach to achieve this scenario? 🤔

javascriptcssreactjsmaterial-ui

Answer â„–1

Finally, I was able to achieve it by familiarizing myself with the following functionalities:

  1. Using the column pinning feature https://mui.com/components/data-grid/columns/#column-pinning to create a container for edit and delete icons.
  2. componentsProps https://mui.com/components/data-grid/components/#row to manage which row is being hovered over.

Follow these steps:

  1. Utilize componentsProps to control the hovered row.
componentsProps={{
  row: {
    onMouseEnter: onMouseEnterRow,
    onMouseLeave: onMouseLeaveRow
  }
}}
  1. Add an actions column and display only the edit and delete icons when hovering over the row.
{
  field: "actions",
  headerName: "",
  width: 120,
  sortable: false,
  disableColumnMenu: true,
  renderCell: (params) => {
    if (hoveredRow === params.id) {
      return (
        <Box
          sx={{
            backgroundColor: "whitesmoke",
            width: "100%",
            height: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <IconButton onClick={() => console.log(params.id)}>
            <EditIcon />
          </IconButton>
          <IconButton onClick={() => console.log(params.id)}>
            <DeleteIcon />
          </IconButton>
        </Box>
      );
    } else return null;
  }
}
  1. Pin the actions column and modify the styles of the DataGrid.
<DataGridPro
  // some code here ...
  initialState={{ pinnedColumns: { right: ["actions"] } }}
  sx={{
    "& .MuiDataGrid-iconSeparator": {
      display: "none"
    },
    "& .MuiDataGrid-pinnedColumnHeaders": {
      boxShadow: "none",
      backgroundColor: "transparent"
    },
    "& .MuiDataGrid-pinnedColumns": {
      boxShadow: "none",
      backgroundColor: "transparent",
      "& .MuiDataGrid-cell": {
        padding: 0
      }
    },
    "& .MuiDataGrid-row": {
      cursor: "pointer",
      "&:hover": {
        backgroundColor: "whitesmoke"
      },
      "&:first-child": {
        borderTop: "1px solid rgba(224, 224, 224, 1)"
      }
    },
    "& .MuiDataGrid-cell:focus": {
      outline: "none"
    },
    "& .MuiDataGrid-cell:focus-within": {
      outline: "none"
    }
  }}
/>

Check out the demo here https://codesandbox.io/s/learn-mui-data-grid-column-pinning-gzgn0?file=/demo.js

https://i.stack.imgur.com/3LSwu.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for resolving the issue: SyntaxError - Unexpected token import

I've encountered this error in the past and have looked at other solutions, but none of them seem to work for my specific issue. My package.json file includes the following dependencies: "dependencies": { "axios": "^0.15.2", "babel": "^6.5. ...

javascriptnode.jsreactjsimportbabeljs

Facing an issue where WordPress AJAX is not showing the expected content

Currently, I am in the process of creating a WordPress website that will feature an initial display of two rows of images. Upon clicking a button, two more rows should dynamically appear. There are four key files involved in this project: case-study-ca ...

javascriptphpjqueryajaxwordpress

Exploring the combination of Babel and Next.js: Integrating custom scripts into a project

Hello, I am currently learning next.js and facing a common issue that I need help with. I have created my own ES6 JavaScript library and now I want to convert it to babel so I can use it in my next.js application. Is there a way to configure babel for sp ...

javascriptnode.jsreactjsbabeljsnext.js

Creating an Android application that integrates HTML styling efficiently

I currently have a social networking site with a mobile web version, and my goal is to package that view into an Android app and potentially enhance it with a custom splash screen. Essentially creating a branded browser window. If you have any tips or adv ...

jqueryandroidhtmlcssweb

This TypeScript error occurs when the props are not compatible and cannot be assigned to

Hello fellow Internet dwellers! I am a novice in the world of coding and TypeScript, seeking some assistance here. I am attempting to extract an array of objects from props, transform it into a new object with specific information, and then return it - ho ...

javascriptreactjstypescriptredux-thunk

Concealed div obstructing access to dropdown menu

I'm having some trouble creating a dropdown menu. The submenu I've created is appearing behind my wrapper, page, and content. I've attempted to adjust the z-index of various elements and have even tried setting the z-index of my menu and sub ...

htmlcss

React error: Unable to iterate through items because property 'forEach' is undefined

I am trying to implement private routing validation using the following code: import React from 'react'; import { Route, Redirect } from 'react-router-dom'; import routes from '../../routing/routes'; export default function ...

javascriptreactjs

What's the best way to ensure that only the most recent 100 entries are retained in a CSV file

Currently, I am working on an application that requires me to extract timestamp-based parameter values from various devices. The data is highly structured and because I have to retrieve 100k rows every few minutes, I haven't explored the option of usi ...

javascriptpythoncsv

What is the best way to use jQuery to increment the number in an input field by a specific value?

My goal is to utilize jQuery to increment a number in an input field and then display the updated value in the same input field. The specific id of this input field is "total". Here's my attempt so far: function addBag(){ var bagprice = 79.99; ...

javascriptjqueryhtml

Empty Media Viewer

I am encountering an issue with setting up a code, as it only displays a blank white page. Any suggestions on what might be causing this problem in the setup and assistance in resolving it would be greatly appreciated. <script type="text/javascript ...

javascripthtmljqueryjwplayer

Dynamically load scripts in angularJs

Having multiple libraries and dependencies in my angularjs application is posing a challenge as I want to load them all using just one script, given that three apps are utilizing these dependencies. Currently, I have this custom script: var initDependenci ...

javascriptangularjs

Error in React: Attempting to change the value of a property called 'validated' in an object that is read-only

I am currently working on a component that handles different types of alerts: export const Alert = (props: {message: string, type?: AlertType, createAgainButton?: Object} ) => { const type = props.type || 'Message' switch(type) { ...

reactjs

The button remains active in Internet Explorer 10 and cannot be disabled

The button has been specified as <input type="button" id="disable" disabled="disabled" value="Upload" /> However, the appearance of the button does not show it as disabled in Chrome, Firefox, and Safari. Additionally, in Internet Explorer, the bu ...

javascriptjqueryhtml

Placement of text is incorrect on certain react cards

I have an application that retrieves videos and generates a card for each video, displaying the video title, creator, link, download option, views, and upload date on each card. Fetching and displaying these elements works well, for the most part. However ...

htmlcsstwitter-bootstrap

Initiate the React application with the given external parameters

I have created a React app that is embedded within a webpage and needs to start with specific parameters obtained from the page. Currently, I am passing these parameters in the index.HTML file within a div element. The issue arises when these parameters ar ...

javascripthtmlreactjs

Having trouble with 'react npm run build' failing, but running 'npm start

My application is consistently failing to create an npm build and is throwing the following error: > react-scripts build Creating an optimized production build... Failed to compile. Cannot read property 'toLowerCase' of undefined Com ...

reactjsnpm

I am experiencing difficulties with the React-router useHistory function

Currently working on a project involving react and nodejs. Utilizing window.location.href to redirect to another page upon successful login, however, attempting to use useHistory for redirection without updating is yielding an error message: Error Uncaugh ...

javascriptreactjsnpmfrontendreact-router-v4

Django AJAX call for data retrieval

Can someone assist me, please? I'm trying to update content on a page without refreshing when a button is clicked. Currently, my approach involves using the jQuery cookie plugin to save the button's id into a cookie and then reading that value in ...

javascriptpythonajaxdjango

Exploring the connection between two MongoDB collections

I currently have two collections in my MongoDB database: Category and Book Here is the category.js code: var mongoose = require("mongoose"); var Schema = mongoose.Schema; var categoryModel = new Schema({ catName: String, menuKey: String }); module.ex ...

javascriptnode.jsmongodbexpressmongoose

Implementing Enter key functionality to add items to a Todo list using pure DOM manipulation

var listLis=document.getElementById('list'); const addbutton=document.querySelector('.fa-plus') const inputBar=document.querySelector('.show') function showInput(e){ inputBar.classList.toggle('show') } addbutt ...

javascripthtmlcss