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] Replace GridAutoSizer with ResizeObserver #8091

Merged
merged 7 commits into from
Apr 14, 2023

Conversation

m4theushw
Copy link
Member

@m4theushw m4theushw commented Mar 1, 2023

Closes #7297
Fixes #7956

@m4theushw m4theushw added the component: data grid This is the name of the generic UI component, not the React module! label Mar 1, 2023
@mui-bot
Copy link

mui-bot commented Mar 1, 2023

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-8091--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case Unit Min Max Median Mean σ
Filter 100k rows ms 652.4 1,015.9 683.4 813.32 142.809
Sort 100k rows ms 747.9 1,375.9 747.9 1,004.08 226.957
Select 100k rows ms 216.4 376.5 318.3 307.24 53.088
Deselect 100k rows ms 153.9 344.8 216.7 229.12 62.651

Generated by 🚫 dangerJS against d5bcadf


return (
<div ref={ref} {...props}>
Copy link
Member Author

@m4theushw m4theushw Mar 21, 2023

Choose a reason for hiding this comment

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

This DIV is useless.

Comment on lines +265 to +268
setContainerDimensions({
width: rootRef.current.clientWidth,
height: rootRef.current.clientHeight,
});
Copy link
Member Author

Choose a reason for hiding this comment

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

@@ -14,8 +14,8 @@ const StyledBox = styled(Box, {
padding: theme.spacing(1),
justifyContent: 'center',
...(isDataGridTest && {
width: 500,
Copy link
Member Author

Choose a reason for hiding this comment

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

There was a regression test failing for no reason: https://app.circleci.com/pipelines/github/mui/mui-x/35345/workflows/1608837d-fb6c-4adf-bc68-74b2d338dc00/jobs/202833

It seems that the width changed to 0 during the test. I couldn't simulate this outside the test environment. The way I found to fix it was forcing the container width.

@m4theushw m4theushw merged commit 0acb52f into mui:master Apr 14, 2023
@m4theushw m4theushw deleted the resize-observer branch April 14, 2023 21:04
@michGreg
Copy link

@m4theushw I thing something is wrong when i use datagrid with autoHeight prop.
image

@cherniavskii
Copy link
Member

@michGreg Can you open an issue with a reproduction example?
Thanks!

rafaelcmm added a commit to rafaelcmm/mui-x that referenced this pull request May 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[data grid] Row doesn't have a right border [data grid] Use ResizeObserver to detect resize
5 participants