[DataGridPro] Render pinned and non-pinned column headers in one row #12376
Conversation
This file contains 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
cherniavskii
added
bug 🐛
|
Deploy preview: https://deploy-preview-12376--material-ui-x.netlify.app/ Updated pages: |
github-actions
bot
added
the
PR: out-of-date
This comment was marked as outdated.
This comment was marked as outdated.
github-actions
bot
removed
the
PR: out-of-date
cherniavskii
commented
Mar 12, 2024
| @@ -533,7 +522,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow( | |||
| /> | |||
| {cells} | |||
| {emptyCellWidth > 0 && <EmptyCell width={emptyCellWidth} />} | |||
| {rightCells.length > 0 && <div role="presentation" style={{ flex: '1' }} />} | |||
| {rightCells.length > 0 && <div role="presentation" className={gridClasses.filler} />} | |||
There was a problem hiding this comment.
Moved inline styles to GridRootStyles since the filler is rendered for every row
romgrk
reviewed
Mar 12, 2024
| @@ -77,10 +77,6 @@ export interface GridCorePrivateApi< | |||
| * The React ref of the grid column container virtualized div element. | |||
| */ | |||
| columnHeadersContainerElementRef?: React.RefObject<HTMLDivElement>; | |||
There was a problem hiding this comment.
We could refactor this one to columnHeadersContainerRef, long names aren't great for readability.
romgrk
reviewed
Mar 12, 2024
| import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector'; | ||
| import { GridScrollParams } from '../models/params/gridScrollParams'; | ||
| import { GridEventListener } from '../models/events'; | ||
| import { useTimeout } from '../hooks/utils/useTimeout'; |
There was a problem hiding this comment.
We have it in @mui/utils/useTimeout now I think.
There was a problem hiding this comment.
Done, also for the useLazyRef and useOnMount hooks.
Plus, did the same in @mui/x-tree-view
romgrk
approved these changes
Mar 12, 2024
cherniavskii
commented
Mar 13, 2024
| @@ -1024,12 +1024,6 @@ | |||
| "description": "Styles applied to the selection checkbox element.", | |||
| "isGlobal": false | |||
| }, | |||
| { | |||
| "key": "columnGroupHeader", | |||
There was a problem hiding this comment.
Wasn't used in the codebase
cherniavskii
commented
Mar 13, 2024
docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md
Outdated
Show resolved
Hide resolved
…-v6.md Signed-off-by: Andrew Cherniavskii <[email protected]>
oliviertassinari
added
plan: Pro
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
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.
Closes #11949
TODO:
Changelog
Breaking changes
columnHeader--showColumnBorderclass was replaced bycolumnHeader--withLeftBorderandcolumnHeader--withRightBorder.columnHeadersInner,columnHeadersInner--scrollable, andcolumnHeaderDropZoneclasses were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.pinnedColumnHeaders,pinnedColumnHeaders--left, andpinnedColumnHeaders--rightclasses were removed along with the element they were applied to.The pinned column headers now use
position: 'sticky'and are rendered in the same row element as the regular column headers.