[question] Sticky actions

[jaballogian]

Order ID 💳

48778

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

Benchmark

I have a request to create a custom style on the actions column. The request is to create a gradient effect like the image below. We could look at the demo and inspect the code here https://drive.google.com/file/d/1AGGvxOawEwFiLZLYhfE0pjoJERGf8FW3/view?usp=sharing It's just a saved HTML code. No harmful files there.

If we pause the debugger (using the F8 key on Windows and Chrome), then inspect the actions column from the HTML code above, we could get the style background-image: linear-gradient(to right, transparent 0, #efefef 17%); that makes the gradient effect.

Approach

I use the column pinning method from the MUI Data Grid component to create the above request. Here is the simplified version of the code https://codesandbox.io/s/github-mui-data-grid-gradiend-style-on-pinned-actions-column-gkrq7w. Here is the screenshot when we hover over one of the rows.

In my perspective, we could achieve the request by creating a solid background for the hovered row element (.MuiDataGrid-row:hover or .MuiDataGrid-row.Mui-hovered) and a transparent background for the actions column.

Using a transparent background or default MUI style (by commenting lines 70-75 on the CustomDataGrid component) for the hovered row will produce something like this. There is a clear boundary (light green circle) for the gradient effect.

Hypothesis

Based on my perspective, the pinned columns also have the same hovered-row styles (.MuiDataGrid-row:hover or .MuiDataGrid-row.Mui-hovered) as the unpinned columns. If we keep the default hovered-row styles then we hover a row (by commenting lines 61-64 and 70-75 on the CustomDataGrid component), the pinned column would multiply the transparency of the background color (like piling up a few transparent plastics) of the row like in this image below. I think this could happen because the default hovered-row background color (rgba(0, 0, 0, 0.4) from https://mui.com/material-ui/customization/default-theme/) has an alpha or transparency value.

But if we change the hovered-row background color into something solid like #F5F5F5 (concrete color from the colors.js file), the gradient effect would not show like this image below.

So the question is how to achieve the goal like the benchmark demo above.

Your environment 🌎

`npx @mui/envinfo`

Uncaught SyntaxError: Invalid or unexpected token

OS: Windows 11 Browser: Chrome 110

Dependencies

"dependencies": {
  "@emotion/react": "11.10.6",
  "@emotion/styled": "11.10.6",
  "@mui/icons-material": "5.11.9",
  "@mui/material": "5.11.10",
  "@mui/styles": "5.11.9",
  "@mui/x-data-grid-premium": "5.17.24",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-scripts": "4.0.0"
},

[jaballogian]

Is this issue related or similar to this issue https://github.com/mui/mui-x/issues/5198?

[m4theushw]

You also need to reset the background color of the rows inside the pinned columns:

.MuiDataGrid-pinnedColumns .MuiDataGrid-row.Mui-hovered: {
  backgroundColor: "transparent"
},

The gray background you added to the non-pinned columns is leaking to them.

Using the linear gradient will create another problem when scrolling all the way to the right:

You can try to use the code from https://github.com/mui/mui-x/issues/7152#issuecomment-1344981248 to conditionally remove the gradient when reaching the right edge.

[jaballogian]

Thank you for the answer @m4theushw I will be in touch after I implemented the solution later and edit this comment.

[kadekval]

.MuiDataGrid-pinnedColumns .MuiDataGrid-row.Mui-hovered: {
  backgroundColor: "transparent"
},

hi @m4theushw im a friend of @jaballogian, I'm trying to implement your answer but looks like this hasn't solved the problem. you can see on the codesandbox https://codesandbox.io/s/github-mui-data-grid-gradiend-style-on-pinned-actions-column-forked-d2jk45

when it's on the edge, the problem is visible

but when it's not at the end, it looks like the results are as expected

[jaballogian]

You also need to reset the background color of the rows inside the pinned columns:

.MuiDataGrid-pinnedColumns .MuiDataGrid-row.Mui-hovered: {
  backgroundColor: "transparent"
},

The gray background you added to the non-pinned columns is leaking to them.

Using the linear gradient will create another problem when scrolling all the way to the right:

You can try to use the code from #7152 (comment) to conditionally remove the gradient when reaching the right edge.

Finally, we could figure out the solution using the clue you gave. Thank you for the answer.