-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Conversation
Deploy preview: https://deploy-preview-12238--material-ui-x.netlify.app/ |
There was a problem hiding this 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 👍🏻
packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx
Outdated
Show resolved
Hide resolved
packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
Outdated
Show resolved
Hide resolved
packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
Show resolved
Hide resolved
@@ -436,6 +441,9 @@ export const GridRootStyles = styled('div', { | |||
}, | |||
'&.Mui-selected': selectedStyles, | |||
}, | |||
[`.${c.virtualScrollerContent} > .${c.row}`]: { | |||
position: 'absolute', |
There was a problem hiding this comment.
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:
Screen.Recording.2024-02-28.at.16.10.07.mov
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
This PR is based on some of the work in #12023, split here to make review/merge easier.
Changes:
position: absolute
rows to avoid layout invalidationvirtualScrollerRenderZone
, not needed anymore since sticky{ colSpan: 1 }
, to avoid expensive computations on every row render