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] Fix column separators #12808

Merged
merged 3 commits into from Apr 17, 2024

Conversation

romgrk
Copy link
Contributor

@romgrk romgrk commented Apr 17, 2024

Closes #12788
Closes #12783

Fix column separators, make the separators from their full width. The last column is overflow: hidden because otherwise the flex layout is messed up due to the separator sticking out of the row width.

Preview: https://deploy-preview-12808--material-ui-x.netlify.app/x/react-data-grid/column-dimensions/

@romgrk romgrk added the component: data grid This is the name of the generic UI component, not the React module! label Apr 17, 2024
@mui-bot
Copy link

mui-bot commented Apr 17, 2024

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

Generated by 🚫 dangerJS against a0b310a

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.

Nice!

@cherniavskii cherniavskii enabled auto-merge (squash) April 17, 2024 09:50
Copy link
Member

Choose a reason for hiding this comment

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

It might not be related to this PR, but I observed that that width of last column separator is always less than the rest. Is it known/intentional? Possibly due to overflow: hidden?

lastColumn.mp4

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Intentional, for the reasons listed above.

@cherniavskii cherniavskii merged commit f047a84 into mui:master Apr 17, 2024
15 checks passed
@WhiteWolf-js
Copy link

WhiteWolf-js commented Apr 17, 2024

I noticed that when I needed to set first-of-type, your suggestion to me was to use [aria column index=1]. Can you also consider adding MuiDataGrid-columnHeader--first, or is there a better way? @romgrk

@romgrk romgrk deleted the fix-grid-column-separators branch April 17, 2024 12:54
@romgrk
Copy link
Contributor Author

romgrk commented Apr 17, 2024

I'd rather not add code if there's already a way to do it.

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! feature: Column resize regression A bug, but worse
Projects
None yet
5 participants