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.

Sign up for GitHub

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

Jump to bottom

[DataGrid] Fix overflow with dynamic row height #12683

Merged
merged 2 commits into from
Apr 11, 2024
Merged

[DataGrid] Fix overflow with dynamic row height #12683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d83aed
fix: grid overflow
romgrk Apr 4, 2024
37af7e4
ci: run
romgrk Apr 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,8 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access)
- You can now style a row's hover state using just `:hover` instead of `.Mui-hovered`.
- The `.MuiDataGrid--pinnedColumns-(left\|right)` class for pinned columns has been removed.
- The `.MuiDataGrid-cell--withRenderer` class has been removed.
- The cell element isn't `display: flex` by default. You can add `display: 'flex'` on the column definition to restore the behavior. This also means cells aren't vertically centered by default anymore, so if you have dynamic row height, you might want to set the `display: 'flex'` for all non-dynamic columns.
- The cell element isn't `display: flex` by default. You can add `display: 'flex'` on the column definition to restore the behavior.
NOTE: If you're using **dynamic row height**, this also means cells aren't vertically centered by default anymore, you might want to set the `display: 'flex'` for all non-dynamic columns. This may also affect text-ellipsis, which you can restore by adding your own wrapper with `text-overflow: ellipsis;`.
Copy link
Member

Choose a reason for hiding this comment

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

Should we add a code snippet here?

{
  display: "flex",
  renderCell: ({ value }) => (
    <div style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
      {value}
    </div>
  ),
},

- The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`.
- The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.
- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to.
Expand Down
1 change: 0 additions & 1 deletion packages/x-data-grid/src/components/containers/GridRootStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -460,7 +460,6 @@ export const GridRootStyles = styled('div', {
userSelect: 'none',
},
[`& .${c['row--dynamicHeight']} > .${c.cell}`]: {
overflow: 'initial',
whiteSpace: 'initial',
lineHeight: 'inherit',
},
Expand Down