[DataGrid] Fix resizing right pinned column #15107
Conversation
KenanYusuf
added
component: data grid
|
Deploy preview: https://deploy-preview-15107--material-ui-x.netlify.app/ |
| @@ -477,8 +451,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow( | |||
| style={{ width: offsetLeft }} | |||
| /> | |||
| {cells} | |||
| {emptyCellWidth > 0 && <EmptyCell width={emptyCellWidth} />} | |||
| {rightCells.length > 0 && <div role="presentation" className={gridClasses.filler} />} | |||
| <div role="presentation" className={clsx(gridClasses.cell, gridClasses.cellEmpty)} /> | |||
There was a problem hiding this comment.
Rendering the empty cell all the time improves resizing of the right-pinned cells
Before
before.mov
After
after.mov
There was a problem hiding this comment.
Ideally the actions column would also move with the right pinned column...
| '--DataGrid-rowWidth', | ||
| `${newTotalWidth}px`, | ||
| ); | ||
| if (columnWidthDiff > 0) { |
There was a problem hiding this comment.
Before
before.mov
After
after.mov
| @@ -564,6 +564,7 @@ export const GridRootStyles = styled('div', { | |||
| lineHeight: 'inherit', | |||
| }, | |||
| [`& .${c.cellEmpty}`]: { | |||
| flex: 1, | |||
There was a problem hiding this comment.
This way the empty cell always takes up the right amount of space in a row. Shrinks when the row is full of cells, grows when there aren't enough to fill a row.
| @@ -477,8 +451,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow( | |||
| style={{ width: offsetLeft }} | |||
| /> | |||
| {cells} | |||
| {emptyCellWidth > 0 && <EmptyCell width={emptyCellWidth} />} | |||
| {rightCells.length > 0 && <div role="presentation" className={gridClasses.filler} />} | |||
There was a problem hiding this comment.
Not sure why we need this + the empty cell. Perhaps I'm missing something.
There was a problem hiding this comment.
I don't remember :| You should build a test case with all the variations of:
- pinned or no pinned columns
- scrollbar or no scrollbar
- empty space or no empty space (when columns don't fill the width)
And then check if all the cases behave correctly. Make sure to enable vertical borders on all cells, we need to make sure that borders are where they're supposed to be (by default the grid only has vertical border on pinned sections).
We should probably create a visual regression test based on that.
KenanYusuf
changed the title
Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Signed-off-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Fixes #12852 and #13548
There is already a PR open that fixes the same issue, but takes a different approach. Curious to see what others think of this way which relies on always rendering the empty cell (rather than conditionally) to grow/shrink in the space as the column resizes.
Before: https://mui.com/x/react-data-grid/column-pinning/
After: https://deploy-preview-15107--material-ui-x.netlify.app/x/react-data-grid/column-pinning/