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

Is it feasible to utilize math.max with an array of objects?

When it comes to finding the largest number in an array, solutions like this are commonly used: var arr = [1, 2, 3]; var max = Math.max(...arr); But how can we achieve a similar result for an array of objects, each containing a 'number' field? ...

javascriptnode.jstypescript

Issue with JQuery's parentsUntil method when using an element as a variable not producing the desired results

I'm having trouble with a specific coding issue that can be best illustrated through examples: For example, this code snippet works as expected: $(startContainer).parents().each(function(index, parentNode) { if (parentNode.isSameNode(commonConta ...

javascriptjqueryhierarchytraversal

Next.js Error: Unable to access the 'collection' property, as it is undefined

I have recently started using next.js and I am interested in creating a Facebook clone by following YouTube tutorials. However, I keep encountering the error message "Cannot read properties of undefined (reading 'collection')". To troubleshoot, I ...

javascriptreactjsfirebasenext.js

Steps on how to modify the background ripple of the selected item in the bottomNavigationView

As a newcomer to Android development, I've been struggling to change the background color of a selected icon in the bottom navigation view. Despite extensive searches on Google and reaching out for help on ChatGPT, I haven't been able to find a s ...

androidmobilematerial-uicolorsbottomnavigationview

"Enhance your data visualization with Highcharts Windbarb and effortless AJAX data

Alright. Let's rephrase a question that hasn't been answered yet. I've got a chart below with data loading dynamically via ajax. A simplified version (without ajax) of this graph works well as shown in this jsfiddle. The code below represe ...

javascriptajaxhighcharts

Unable to retrieve link text following readFile function. Selector functions properly in Chrome console

My goal is to extract hyperlink text. Using the google chrome console with my selector, I am able to retrieve a list of 15 link texts as desired. However, when I execute my code with the same selector, the el.text returns undefined in console.log while th ...

javascriptnode.jscheerio

Encountered an issue while resolving dependencies in Vercel: During the resolution process, it was identified that @material-ui/[email protected] was found, with an

Encountered this log while deploying on Vercel: Installing dependencies... npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @material-ui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...

reactjsnpmmaterial-uivercel

Utilizing em units within CSS media queries is producing erratic outcomes on various browsers

My CSS media queries are set up in a progressive manner like the following: * { font-size: 14pt; } @media screen and (min-width:85em) { : : } @media screen and (min-width:110em) { : : } When I have two browsers open on the same screen, with identical siz ...

cssmedia-queriesfont-size

Strange formatting in the internet explorer browser (IE)

I have encountered an issue with CSS animation elements on the home page. The animations appear correctly in Google Chrome, but there is a strange indentation problem when viewed in IE. I have tried several solutions without success. Although I am not a w ...

htmlcssinternet-explorer

Glistening tabPanel and Analytics by Google

I recently completed a comprehensive tutorial here that delves into the intricacies of Google Analytics. Despite grasping the concepts explained in the tutorial, my understanding of jQuery remains at ground zero. In my ShinyApp, I utilize multiple tabPanel ...

javascriptjqueryrgoogle-analyticsshiny

"Utilizing multiple class names in Next.js to enhance website styling

Looking for a way to apply multiple classNames in Next.js, especially when dealing with variable classnames? I'm following the component level CSS approach. Take a look at my code and what I aim to achieve: import styles from "./ColorGroup.mod ...

cssreactjsnext.jsclassname

The functionality of clicking on a jQuery-generated element seems to be malfunctioning

When using Jquery, I am able to create an element and assign it the class .book: jQuery('<div/>', { name: "my name", class: 'book', text: 'Bookmark', }).appendTo('body'); I then wanted to add funct ...

javascriptjqueryclick

What is causing my component to render the count value twice?

This is my main layout component: function MainPage() { return( <div> <MLayout children={<MNavbar custOrFalse={false} />} /> </div> ); } export default MainPage; Here is the child navbar compone ...

javascriptreactjsnext.js

Tips for implementing a null check within the findAll() function

I am inquiring about the database and some parameters on the request body are optional. Can someone please guide me on how to determine if certain fields, like categoryId, are nullable and perform the where query based on that? var categoryId = req.body ...

javascriptnode.jssequelize.js

toggle the class on a label that contains a checkbox

Is there a way to use toggleClass to add a class to a label when clicked, even if the label contains a checkbox? Currently, I am having an issue where the class is only added when clicking directly on the checkbox. How can I make it so that the class is ad ...

javascriptjquery

Deleting a document by ObjectID in MongoDB with Node and Express without using Mongoose: A step-by-step guide

As a newcomer to backend development, I am currently using Node/Express/MongoDB with an EJS template for the frontend. I am in the process of creating a simple todo list app to practice CRUD operations without relying on Mongoose but solely native MongoDB. ...

javascriptnode.jsmongodbexpress

Unable to adjust the width of a datatable using the jQuery Datatable plugin version 10.1

I am facing a challenge with multiple datatables using the jQuery plugin on my page. Some of the datatables fit perfectly within the page width, while others extend beyond the page boundaries. Despite trying various methods, including setting styles in HTM ...

jqueryhtmlcssdatatable

Cannot locate a compatible version for @babel/traverse@^7.14.0

After attempting to clone a project and running npm install, I encountered the following error: npm ERR! code ETARGET npm ERR! notarget No matching version found for @babel/traverse@^7.14.0. npm ERR! notarget In most cases you or one of your dependencies a ...

reactjsnpm

Issues with Braintree webhooks and CSRF protection causing malfunction

I have successfully set up recurring payments with Braintree and everything is functioning properly. Below is an example of my code: app.post("/create_customer", function (req, res) { var customerRequest = { firstName: req.body.first_name, lastN ...

javascriptnode.jsexpresscsrfbraintree

Creating a Bar Chart in d3js with time on the x-axis and one or multiple sets of numerical data on the y-axis: a step-by

My webpage structure is as follows: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="css/style.css" rel="stylesheet" /> &l ...

javascriptd3.js