[data grid] Fix column resizing issues

mui · Oct 24, 2024 · 182191f · 182191f
1 parent ab4823d
commit 182191f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 24 deletions.
diff --git 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<HTMLDivElement> {
   [x: string]: any; // Allow custom attributes like data-* and aria-*
 }
 
-function EmptyCell({ width }: { width: number }) {
-  if (!width) {
-    return null;
-  }
-
-  return (
-    <div
-      role="presentation"
-      className={clsx(gridClasses.cell, gridClasses.cellEmpty)}
-      style={{ '--width': `${width}px` } as React.CSSProperties}
-    />
-  );
+function EmptyCell() {
+  return <div role="presentation" className={clsx(gridClasses.cell, gridClasses.cellEmpty)} />;
 }
 
 EmptyCell.propTypes = {
@@ -454,10 +444,6 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
       }
     : null;
 
-  const expandedWidth =
-    dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth - scrollbarWidth;
-  const emptyCellWidth = Math.max(0, expandedWidth);
-
   return (
     <div
       ref={handleRef}
@@ -477,8 +463,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} />}
+      <EmptyCell />
       {rightCells}
       {scrollbarWidth !== 0 && <ScrollbarFiller pinnedRight={pinnedColumns.right.length > 0} />}
     </div>

diff --git 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
@@ -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;