[data grid] Is there a way to update a single ColDef without triggering a re-render of every cell?

[tomekpaszek]

The problem in depth

Hi!
I'm customizing the grid in order to have column highlighting. The implementation seems pretty straightforward as I'm adding a custom field to the column definition (highligted) and updating the columns when needed. I use updateColumns to update a single column, however, that triggers a re-render of every cell.
Is there a way to avoid that and only re-render the updated column?

Your environment

System:
OS: macOS 14.4.1
Binaries:
Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
pnpm: Not Found
Browsers:
Chrome: 124.0.6367.93
Edge: 124.0.2478.67
Safari: 17.4.1
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.26
@mui/core-downloads-tracker: 5.15.11
@mui/lab: 5.0.0-alpha.155 => 5.0.0-alpha.155
@mui/material: 5.14.20 => 5.14.20
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.15
@mui/types: 7.2.14
@mui/utils: 5.15.14
@mui/x-data-grid-pro: ^7.3.1 => 7.3.1
@mui/x-license: 7.2.0
@types/react: ^18.0.14 => 18.2.61
react: ^18.2.0 => 18.2.0
react-dom: ~18.2.0 => 18.2.0
typescript: ^5.0.2 => 5.3.3

Search keywords: updateColumns render
Order ID: 78765

[romgrk]

Do you have a use-case that showcases a performance issue with the current behavior? We did work to avoid many re-renders, we could do more but we've optimized the important/frequent use-cases, we didn't pay much attention to this one as it's unlikely to affect the user experience much, imho.

[tomekpaszek]

Hi,
Thanks for your reply. The way I'm using the DataGrid is to render a matrix of results with ~5000 rows and 30-100 column. There is maybe ~1500 cells rendered at a time. We use custom renderers and DataGrid does a great job with virtualization so there is no problems with performance when without the column highlighting.
When issue comes when we're updating the columns with GridApi and that updating a single column would trigger a repaint of all visible cells. I don't see a need to repaint every cell in a case, where, let's say I only want to update the header of a column.
If needed I can provide with a working example to clarify it.

[romgrk]

If you can provide an example that showcases a performance degradation, that would help us prioritize the issue. We have been working on performance optimization but we tend to focus on areas where the UX is noticeably affected. But yes in an ideal world the cells would not re-render when a column is changed.

[tomekpaszek]

Here is a live example: link
Try hovering across the header titles and see the highlighted column lagging behind. It's not the case for the highlighted row.
Cell values increment on every render.
Here is a video of that:

Screen.Recording.2024-05-02.at.15.21.58.mov

[romgrk]

I have opened the PR linked above to fix the issue, but fwiw I think you should use the DOM APIs directly rather than changing the column. Add/remove an attribute like data-column-hover on mouse enter/leave, with [data-column-hover] { background-color: grey; }. I think react is too slow to deal with hover events in a satisfying manner. We used to go through react for pinned rows hover events in the past and I would sometimes see a bit of latency even on my fast laptop.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@tomekpaszek: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.