Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Performance: avoid layout invalidation #12238

Closed
wants to merge 58 commits into from

Conversation

romgrk
Copy link
Contributor

@romgrk romgrk commented Feb 28, 2024

This PR is based on some of the work in #12023, split here to make review/merge easier.

Changes:

  • Use position: absolute rows to avoid layout invalidation
  • Remove virtualScrollerRenderZone, not needed anymore since sticky
  • Compute the left offset on the fly rather than storing in the state
  • Consider no colspan info as meaning { colSpan: 1 }, to avoid expensive computations on every row render

@mui-bot
Copy link

mui-bot commented Feb 28, 2024

Deploy preview: https://deploy-preview-12238--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 05a4a8f

@romgrk romgrk marked this pull request as draft February 28, 2024 08:42
Copy link
Member

@cherniavskii cherniavskii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for extracting it to a separate PR!

Overall, I'm not sure the absolute row positioning is worth it (see the dynamic row height comment below).
Other changes make sense to me 👍🏻

@@ -436,6 +441,9 @@ export const GridRootStyles = styled('div', {
},
'&.Mui-selected': selectedStyles,
},
[`.${c.virtualScrollerContent} > .${c.row}`]: {
position: 'absolute',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The dynamic row height experience feels worse with this change because rows overlap:

https://deploy-preview-12238--material-ui-x.netlify.app/x/react-data-grid/row-height/#dynamic-row-height

Screen.Recording.2024-02-28.at.16.10.07.mov

@romgrk
Copy link
Contributor Author

romgrk commented Feb 28, 2024

I split the original PR incorrectly, to prove that position: absolute is a good change I also need the rest of the work in #12023. I've split the offsets, colspan & cell focus refactor into yet another PR: #12247.

Ignore this one for now.

@romgrk romgrk closed this Feb 28, 2024
@romgrk romgrk reopened this Feb 29, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 6, 2024
Copy link

github-actions bot commented Mar 6, 2024

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@romgrk romgrk closed this Mar 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PR: out-of-date The pull request has merge conflicts and can't be merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants