[DataGrid] Fix column dropdown menu "Unpin" text alignment #19462
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
MBilalShafi
changed the title
MBilalShafi
added
scope: data grid
|
Deploy preview: https://deploy-preview-19462--material-ui-x.netlify.app/ Bundle size report
|
Co-authored-by: MBilalShafi <[email protected]>
Copilot
AI
changed the title
[WIP] [DataGridPro] Column Dropdown Menu Unpin Text Alignment
[data grid] Fix column dropdown menu "Unpin" text alignment
Sep 5, 2025
Copilot finished work on behalf of
MBilalShafi
September 5, 2025 21:25
MBilalShafi
reviewed
Sep 5, 2025
packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: MBilalShafi <[email protected]>
Copilot finished work on behalf of
MBilalShafi
September 5, 2025 21:32
MBilalShafi
approved these changes
Sep 6, 2025
packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
Outdated
Show resolved
Hide resolved
Signed-off-by: Bilal Shafi <[email protected]>
arminmeh
approved these changes
Sep 8, 2025
arminmeh
changed the title
JCQuintas
pushed a commit
to JCQuintas/mui-x
that referenced
this pull request
Sep 15, 2025
Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: MBilalShafi <[email protected]> Co-authored-by: Bilal Shafi <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The "Unpin" menu item in the column dropdown was misaligned compared to other menu items like "Pin to right" and "Unsort". The text appeared further to the left, creating an inconsistent visual appearance.
Root Cause
The issue was in
GridColumnMenuPinningItem.tsxwhere the "Unpin" menu item usediconStart=""(empty string). Since empty string is falsy, theBaseMenuItemcomponent doesn't render theListItemIconcontainer, causing the text to start at the left edge instead of being properly aligned.Solution
Changed
iconStart=""toiconStart={<span />}for the "Unpin" menu item. The<span />element is truthy, so theBaseMenuItemcomponent renders theListItemIconcontainer, creating consistent spacing with other menu items that have actual icons.Before:
After:
Testing
Fixes #19428.
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.