Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[DataGrid] Fix column separators#12808

Merged
cherniavskii merged 3 commits into
mui:masterfrom
romgrk:fix-grid-column-separators
Apr 17, 2024
Merged

[DataGrid] Fix column separators#12808
cherniavskii merged 3 commits into
mui:masterfrom
romgrk:fix-grid-column-separators

Conversation

@romgrk
Copy link
Copy Markdown
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 scope: data grid Changes related to the data grid. label Apr 17, 2024
@mui-bot
Copy link
Copy Markdown

mui-bot commented Apr 17, 2024

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

Generated by 🚫 dangerJS against a0b310a

@cherniavskii cherniavskii added type: regression A bug, but worse, it used to behave as expected. feature: Column resize labels Apr 17, 2024
Copy link
Copy Markdown
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
Copy Markdown
Member

@MBilalShafi MBilalShafi Apr 17, 2024

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
Copy Markdown
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
@WhiteWolf-js
Copy link
Copy Markdown

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
Copy Markdown
Contributor Author

romgrk commented Apr 17, 2024

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

DungTiger pushed a commit to DungTiger/mui-x that referenced this pull request Jul 23, 2024
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature: Column resize scope: data grid Changes related to the data grid. type: regression A bug, but worse, it used to behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[data grid] resize handle is not located in the middle of columns. [data grid] .MuiDataGrid-columnHeader: first-of-type doesn't work in v7

5 participants