diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx index 8358424a82a7..de69959b29d9 100644 --- a/packages/x-data-grid/src/components/GridRow.tsx +++ b/packages/x-data-grid/src/components/GridRow.tsx @@ -67,18 +67,8 @@ export interface GridRowProps extends React.HTMLAttributes { [x: string]: any; // Allow custom attributes like data-* and aria-* } -function EmptyCell({ width }: { width: number }) { - if (!width) { - return null; - } - - return ( -
- ); +function EmptyCell() { + return
; } EmptyCell.propTypes = { @@ -454,10 +444,6 @@ const GridRow = React.forwardRef(function GridRow( } : null; - const expandedWidth = - dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth - scrollbarWidth; - const emptyCellWidth = Math.max(0, expandedWidth); - return (
(function GridRow( style={{ width: offsetLeft }} /> {cells} - {emptyCellWidth > 0 && } - {rightCells.length > 0 &&
} + {rightCells} {scrollbarWidth !== 0 && 0} />}
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts index eb1ccdc74996..3f049bf769d5 100644 --- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts @@ -564,6 +564,7 @@ export const GridRootStyles = styled('div', { lineHeight: 'inherit', }, [`& .${c.cellEmpty}`]: { + flex: 1, padding: 0, height: 'unset', }, @@ -743,7 +744,7 @@ export const GridRootStyles = styled('div', { }, [`& .${c.filler}`]: { - flex: '1 0 auto', + flex: 1, }, [`& .${c['filler--borderBottom']}`]: { borderBottom: '1px solid var(--DataGrid-rowBorderColor)', diff --git a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx index aa79485f5a4a..7d166b150998 100644 --- a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -300,12 +300,14 @@ export const useGridColumnResize = ( const prevWidth = refs.columnHeaderElement!.offsetWidth; const widthDiff = newWidth - prevWidth; const columnWidthDiff = newWidth - refs.initialColWidth; - const newTotalWidth = refs.initialTotalWidth + columnWidthDiff; - apiRef.current.rootElementRef?.current?.style.setProperty( - '--DataGrid-rowWidth', - `${newTotalWidth}px`, - ); + if (columnWidthDiff > 0) { + const newTotalWidth = refs.initialTotalWidth + columnWidthDiff; + apiRef.current.rootElementRef?.current?.style.setProperty( + '--DataGrid-rowWidth', + `${newTotalWidth}px`, + ); + } refs.colDef!.computedWidth = newWidth; refs.colDef!.width = newWidth;